Airkit
Improving Layouts in Airkit Studio
How can we continue to improve the experience to make it easier for our users to build apps with more dynamic layouts?
In Dec 2020, I designed Version 2 of Layouts to enable users to configure more dynamic app layouts within Airkit Studio. Most users—devs who may not be familiar with frontend coding—can build a simple web page with headlines and inputs in ~30 minutes. Version 1 was built by Engineering without design support, resulting in a simpler UI that took most users ~10 clicks to configure but required CSS knowledge on FlexBox.
After launching in Feb 2021, we saw the overall time spent building apps improve by 5 minutes, yet the number of clicks doubled. Based on user feedback, I decided to address the new pain points with this iteration.
Company
Timeline
Team
Version 1 featured a simpler UI but required users to understand Flexbox concepts to configure.
Version 2 introduced features to move away from Flexbox towards a more interactive UI.
Goal
Address the pain points of the recent update of the layout project, so that we can reduce the amount of time developers spend configuring layout while improving their understanding and confidence in using the feature.
Process
I collaborated with our team and our users to understand the issues they were facing.
Research
Collect & analyze feedback from users
Hear from our users to identify problem areas that need to be fixed or need improvements.
Ideation
Collaborate with Engineering
Conduct a co-working session with engineering to develop and implement solutions for testing.
Test
Conduct user testing
Test our solutions on UserTesting with users and see if improvements were made.
Research
Ideation
Test
Collect & analyze feedback from users
To understand our users' issues, I worked with the team to collect feedback on my Version 2. The overall feedback showed that the new UI was still missing users expectations, creating to more confusion, clicks, and guesswork.
"I keep trying to click here but nothing happens. I keep clicking around expecting it to move something but it doesn't do anything. I'm not sure what it's for."
Scott Ackerman
Solutions Engineer
"I know this dropdown changes how things line up on the page, but to be honest, I just go through all of nine options until I find the one that looks right."
Jeff Chen
Solutions Consultant
"I didn't even know I could enter a number here until you told me. Same there here—I didn't know I could change the padding and margin. This would've been good to know."
Zack Cohen
Developer Advocate
I grouped the feedback into key problem areas that we could tackle within this sprint.
Layout Preview
Shows a static visual preview of how UI elements in the layout are aligned within a parent Container. Users kept clicking on the visual expecting something to happen.
Alignment Property
Sets how UI elements are aligned within a parent Container. Users didn't understand the alignment options and would go through each option until they found the one they needed.
Distribution Property
Sets how UI elements are spaced apart from each other. Users didn't know they can enter numeric values to set fixed spacing, believing there were only certain options they can choose from.
Padding & Margin
These properties specify the spacing around a UI element. Margin and padding properties were hidden behind a button click, which most users didn't find.
Research
Ideation
Test
Collaborate with Engineering
Teaming up with Hien (Head of Design), Warren (SWE), and Irvin (SWE Manager), I conducted a collaborative session in Figma. We spent a few hours discussing potential solutions and engineering costs. I helped mock our solutions throughout the discussions and again when we built the solutions for user testing.
Our co-working session in Figma after a productive day of ideation.
Solution 1
Make the layout preview interactive
Problem
Users were confused by the alignment options and the visual shown and weren't making the connection between the two.
They expected the visual to be interactive in a way but it wasn’t, or
They were given so many alignment options that they didn’t know what each one did and which one was the one they needed.
Solution
Since the Alignment property and the Layout Preview are closely related, we tackled these two together.
Making the Layout Preview interactive helps reduce redundancy and eliminates the need to have a control for alignment.
This provides users with more proactive and instant feedback when configuring alignment. Users are more likely to learn how each alignment option works through visual and interactive repetition.
Solution 2
Add selectable values to the distribution property
Problem
Users didn’t know that they could specify a fixed amount of distribution spacing because the dropdown options showed three options specific to Flexbox.
Solution
Adding fixed value inputs into the dropdown list reinforces the idea that these values are accepted inputs, increasing the likelihood of them entering a number. Defining these values would also:
Encourage use of more consistent UI spacing in their app, and
Allow them to tweak values quickly when something more custom is needed.
Solution 3
Bring out the padding and margin properties
Problem
Users didn't know they could adjust padding and margins since these controls were hidden in the UI and only discovered after pressing a button.
Solution
We fixed this by bringing the box model out of the popup and allowing users to directly edit the two from it. This increases awareness of these two properties and makes it easier to understand how they work together.
Research
Ideation
Test
Conduct user testing
Using UserTesting, I conducted a test with 10 participants who were tasked with building a simple web app. Compared to the previous iteration, our new solutions were getting much more positive reactions. What we found was that:
Time to complete app building task
60% participants
Completed the task under 20 minutes
30% of participants were able to complete the task under 17 minutes.
4-5 clicks
To configure layout positions
Each participant took an average 4-5 clicks on the layout preview to figure out the position they needed.
80%
Configured padding & margin successfully
Participants were able to set padding and margin on their first time viewing the box diagram.
🤔
Still feeling confused
Participants were still confused by FlexBox concepts that we decided to keep. However, everyone was able to select and enter a value to specify the distribution.
Results
The new layout iteration proved to be quite successful. We saw users were more reactive and less hesitant using the new UI.
Fewer clicks, fewer guesses
Addressing our users pain points and updating the Layouts UI decreased the number of clicks and guesses users were making.