AWS no code low code
AWS App Studio
Did you know that you don’t need code to build an app? I designed an experience from the ground up that enabled enterprise business users to build apps for their organization.
Introduction
My role
Component lead
Designed all App Studio components and influenced component strategy with user research to ensure scalability and consistency. Bridged communication between design system and product/tech team.
Builder UI lead
Lead builder interaction design, created speculative design mocks and conducted testing. Created new UX for high requested theme features.
Process
Timeline
00
From zero to hero
Analyzed past research and learnings to inform initial hypothesis Competitive analysis and persona research
01
Vision work
Set the vision for the types of apps we wanted users to build and what it would look like Created mocks for PM to prioritize a list of components to work backwards from
02
Component design
Analyzed competitor products and create components that are expected from builders Designed configuration and building experience for all components Began influencing the design system and leading the team towards best practices
03
User feedback
Moderated in-person user feedback sessions Gathered the biggest pain points and iterated on design
04
Pivot to simplification
Now that our pillar (components) had been built from the ground up, it was time to understand how it would connect to other sections of our product. Analyze builders journeys and identify points of friction Simplify manual building experiences in the product
05
Usability touches
FIt and finish polish for the final stretch. Improve container behavior Customization and themes
Process
Personas
App Studio Components
Customer use cases
An inspection dashboard showcasing critical data through metric cards and graphs
All inspections table displaying a list of inspections
New inspection report creation flow using a stepflow component
From our research, I created a proof of concept based on a real customer use case of building inspections. This helped us envision the types of apps end users would want to use. This allowed us to work backwards and create a tailored builder experience with components that would help users achieve this vision. This case study outlines our design process, the challenges we addressed, and the impact of our solutions.
App studio components
What are components?
Components are the building blocks for every app. Builders need to configure components in the App Studio Builder.
Contributions to the design system
By working close with components, naturally I collaborated with our design system designers and eventually became a design system ambassador. For every component, I would cross check with our design system files to understand which UI configurations are possible. New components I make for app studio can also be contributed back to the design system.
App Studio Components
App creation flow
App Studio Components
Original workflow + research insights
Creating a form was difficult
Users wanted to quickly create a form from existing data. Manually dragging every input was tedious. When testers are shifted between modes, they are not shifted back to complete the action. High confusion generated on where they are expected to take action.
“It is tedious to create 8 fields in a form, parameters, and then map it in each step”
Users would like to know when to switch modes .
Users would like better guidance on the locations to take different actions.
Parameters were tedious to create
In order to pass data from an input to their database, they needed to create parameters first. Users had to create every parameter manually.
“Parameters take too much space”
Testers felt form fields should automatically map onto entity.
Users are unclear where to map automation values to data model.
Users expect automation expressions to be able to reference UI/Entity/query directly.
Too much expression writing
To pass a value from an input to a parameter, users had to type an expression each time. One of our users had 71 fields, that meant 71 parameters and 71 expressions!
Users had trouble wth the expression syntax writing.
Users felt that they were repeating the same task multiple times when it could easily be resolved by auto-populating.
App Studio Components
Form creation bootstrap
To mitigate the pain of the creation process, I designed a bootstrap experience that reduced form creation to as little as 4 clicks. This bootstrap experience took care of parameter and automation creation for the customer.
App Studio Components
User research
Pain point 1
Auto-generation helped users onboard to form creation however, they were still confused on how to make updates to the form.
Pain point 2
Users wanted auto-generation to go beyond initial component creation. They wanted continuous synchronization with their data.
Pain point 3
Almost every user needed to navigate away from forms to set up their data. Almost all users had data coming in.
Pain point 4
To make an update, users still had to interact with other modes. They became frustrated with mode switching.
Ultimately...
1
We needed to update the user journey to match our customers workflow and expectation. 

2
We needed a better solution from tech to enable seamless data connection without parameters.
App studio components
Form 2.0
From here, there were two ways to move forward. We could move forward with the manual form strategy accompanied by auto-generation. We could also pivot and move towards a primitive form strategy where data flows directly to the form.
Manual form
Users would continue building their form manually and we would create additional auto-generation experiences.
Primitive form
Pivot to a new type of form that is directly connected to data
App studio components
New form creation flow
Data first journey to match the user flow
Most users came in with data. It was counter intuitive to drop them in UI mode first. The new flow promotes the idea that data powers components. Learning these prerequisites helps reduce learning curve later on.
Reduce manual labor with new smart parameter type
Instead of creating a single parameter for each value you want to pass, we were able to unblock from the tech side to allow synchronous updates by using a type of smart parameter that can pass updated values immediately.
Reduce context switching with data actions
Data actions are actions that directly relate to your data source. For example, you can have a create action that creates a new record for your form. We eliminated the need to create new automations, thus reducing context switching.
Automatic form creation
Upon selecting the form type, the form is now ready to use. It will also update seamlessly when there are changes to its database.
Impact
Outcomes
Customer obsessed
Convince stakeholders to adjust our system to align with customer workflows.
Simplification
Eliminate the need for additional context switching. Components can be created with 2 clicks.
Scalability
Extend this pattern for all components that rely on data
In the spirit of moving quickly and meeting deadlines, I delivered what the team needed while continuously testing and iterating. I eventually convinced the team to pause before making irreversible, one-way decisions. This led to a significant shift in our workflow and encouraged parallel teamwork across different areas, rather than siloed, vertical operations.
The final stretch
The desire for customization
"During the final stretch before launch, we sought to identify improvements to enhance the builder experience. Through observation and general user testing with 7 external customers and 8 internal customers, we gathered insight that users valued visuals and customization.
Biggest pain points
There is a desire for personal branding as generated apps lacked colors, branding, and themes.
Discoverability was hard. Users were not able to discover app navigation with the previous UI.
Layout containers were hard to use and workarounds were hard to configure.
Process
Work backwards with visual design to create the vision.
Create a new canvas UX that would help achieve the end vision.
Work with engineering to come up with good presets
Vision from visual design
UX for setting up logo and banner in canvas
UX for discovering and updating the app header
Updates to container configuration UI and behavior to improve usability
Product preview launch
AWS New York Summit
Following months of iteration and collaboration, our product successfully launched at AWS NY Summit in June 2024, marking a significant milestone in the journey. Early feedback has been overwhelmingly positive, the strong interest and surge in sign-ups indicate a clear customer need for the solution we delivered. My focus on user experience helped refine critical features leading up to the launch, ensuring the product met its design goals and provided a seamless experience. Continuous testing and adaptation based on customer insights played a pivotal role, and I’m excited to see how the product evolves post-launch.
Thank you for reading!