AWS Application Composer
A visual drag-and-drop tool for AWS services
2023
Website
Overview
At Amazon Web Services, I played a pivotal role on my team in designing the foundation of a new AWS service, Application Composer—a visual drag-and-drop tool for building cloud applications.
🎉 Results
AWS Application Composer launched at Re:Invent in 2022. The project's extension that I led also led to a 378% year-over-year growth in user adoption for Application Composer with 80% of new accounts originating from the VS Code extension.
My contributions
Designed user interfaces from scratch
Conducted user research to enhance usability
Sole design lead for VS code extension
My role:
I joined the Application Composer team early on from when it was acquired as a startup. With minimal product requirements defined, I was tasked to create a blue sky, visual builder application from scratch which included defining features necessary to the core experience, customer journey work, designing POCs, and layouts.
What is Application Composer?
Application Composer is a visual builder that lets developers build their architecture visually and incrementally via a drag-and-drop interface on AWS (Amazon Web Services).
In other words…
Application Composer lets you build applications like Netflix by visually connecting AWS services together. Below is an example of different types of services AWS provides.
Before Application Composer…
❌ The problem
Before Application Composer, users had to..
Manually write infrastructure code using CloudFormation
Edit YAML or JSON to define configuration files
Have a deep understanding of AWS architecture and services
Troubleshoot errors without visual feedback
✅ The solution
With Application Composer, users can…
Visually compose applications with a drag-and-drop interface
Connect AWS services visually, reducing integration complexities
Debug and test quicker with immediate feedback with the visual interface
Have a lower the barrier to entry for new serverless developers
Rapidly prototype and iterate on designs
Facilitate collaboration between team members with visual interface
Initial research
I did some initial research and wrote a doc highlighting customer problems and also potential solutions.
CloudFormation, an AWS service that helps you set up and manage AWS resources using code, is difficult to master—especially for those new to IaC (Infrastructure as Code)
Developers who are new lack knowledge in how to build serverless applications and also ensuring they follow best practice.
Customers are unaware of their knowledge gaps, where the level of abstraction can be too complex to where it hinders their ability to recognize and remedy infrastructure problems.
Competitive Anaylsis
Part of my research included looking at competitors and noting their strengths and flaws. Some potential solutions I came up with were:
Simplify the building process, give users the ability to visually compose and configure their resources, accelerating deployment cycles.
Allow users to decouple or group components to see how their application was constructed, reducing the need for deep knowledge.
Have guardrails and audits to help customers learn the ins-and-outs of IaC and automatically validate their templates so customers have to read through less documentation and meet best practices.
Stackery
This is Stackery, the start up that AWS acquired. Its scope was limited as it only focused on serverless.
CloudFormation Designer
Difficult to use and outdated. Mostly used to set up servers and storage, not for building applications.
Turning thoughts into low fidelity wireframes
I sketched out the overall console layout and planned where all the other elements would live as part of laying down the initial framework and how they would scale when we add more features in the future.
Moving on to high fidelity mockups
I met regularly with PMs, Senior developers, Designers, and Dev Managers to review mockups and ideations every week and come back the next week with new ideas and changes.
Resource cards
Resource cards are AWS services that customers can drag and drop onto the canvas. I worked on the appearance, content within, and also states of the cards.
Complex resources
Resource cards started getting a little more complicated, some of them required facets, some required nesting cards within other cards, here’s an example of an API gateway card.
Adding connector interactions
Dark mode
Putting everything together
After I created the key elements and features for the product, it was time to piece them together. I collaborated closely with two other talented designers who joined the team later and gave me a ton of feedback to ensure the final product was user-friendly and met our customers' needs.
The final experience
And then we launched!
After working on this project for 9 months with the team, we launched at Re:Invent in 2022.
Check out Tech Crunch's article about Application Composer
2 min read // Image credits by AWS
Read
Post launch usability studies
After the launch of Application Composer, I led the research study working closely with our PM to understand product needs and opportunities—this study allowed us to identify key areas of improvements for GA and our roadmap for the upcoming year.
Key Objectives
Measure how well customers can complete tasks within Application Composer.
Uncover unexpected customer behavior.
Identify key areas of improvement.
Quick methodology summary
The study helped baseline AWS Application Composer through a set of core tasks. Each session duration lasted 90 minutes with 9 sessions.
A set of participants will be chosen based on participant profile/criteria
Participants will be asked to carry out 5 realistic programming tasks using Application Composer. Each task is a use case that is being tested.
Using a “think aloud” protocol, Participants will verbally narrate their thoughts while walking through each of the tasks in order to uncover their mental processes, as well as any questions, doubts or strategies.
Failure conditions are as follows: the participant verbally states that they give up, the participant goes overtime, or they submit an incorrect answer.
Participant profile
The participant criteria were serverless developers who haven’t used Application Composer, and those who have, developers new to serverless, and developers looking to transition to serverless development.
Synthesizing data
After each session, I took the transcript of the usability study to create notes and quotes from the participants and grouped them by themes and also by tasks.
Final usability study report
When my PM and I were finally done with synthesizing all the data, I began writing the research report of UX findings and immediate next steps. I separated our user’s journey into 4 different stages: Getting started, Building, Organizing/Navigating, and Deploying.
💡 Key Insights
Users want more information and parameters regarding connection lines between resources.
Across all user segments, more guidance within Application Composer had been requested.
Users were unclear on how to deploy their template.
Users were confused between connected mode and unconnected mode.
Discoveries from the study
From the usability study, one of the things we uncovered were that our customers still had a fragmented workflow when wanting to use Application Composer.
Hurdles customers have to jump through:
Getting started is tricky
Customers have to use a supported browser, and also Sign into the AWS Console.
Navigating AWS Console
The AWS Console makes it tricky to navigate to Application Composer making it inefficient to use.
Once in Application Composer, users have to turn on local-sync in order to auto save to their local machine.
How might we streamline the Application Composer experience to minimize friction and enhance workflow efficiency by integrating it with familiar tools?
By creating an IDE extension for Application Composer within Visual Studio Code.
Users can focus on visually designing their application without any context switching between their local IDE (VS code) and the console.
This will allow developers to use the tool they currently use while unlocking the full benefit of visualizing their application using Application Composer.
VS Code Extension project
My role
I was the lead designer to bring Application Composer to VS code where I also addressed some of the UX recommendations from the usability study. (Local sync, deployment, and getting started)
Customer journey
I divided the IDE extension project into 5 flows that encompassed the customer journey.
Discovery
Installation
Starting a new project/opening an existing template
Authoring/modifying a template
Deployment
Mockups
IDE Extension for Application Composer
Launch! (again)
In November 2023, we launched the integration at Re:Invent.
With the new launch:
Our customers’ entire development cycle will be simplified and expedited by instantly visualizing the changes in their template while staying in the context of their VS code IDE.
This was my second launch at AWS, with the help of my partners, I was able to grow Application Composer by 378% YoY, with 80%, 14,395 of accounts, using it on the IDE extension for VS Code.