No-Code App Builder [native app]
Amy Turner
The product:
No-Code App Builder is an initial concept for a native app that provides business owners and managers a simple, intuitive interface for creating custom business apps right from their mobile device, without developers, coding, or even being highly tech-savvy.
Project Overview
Project duration:
2 Weeks, February 2023
Project overview
The problem:
Project overview
The Goal:
My role:
UX designer leading the app design through concept, research, ideation, mockups, prototypes, and usability testing
Project overview
Responsibilities:
User research, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, analyzing research results and gathering insights, iterating on designs based on insights.
Understanding
the user
User research: summary
I did extensive interviews with participants from the target demographic (small business owners or managers) to understand primary pain points and common bottlenecks with work management.
Most participants reported feeling overwhelmed by too many disconnected software applications and tedious technologies or modes of communication. Having to use many different, unrelated apps just to do basic work tasks was draining and demoralizing. Most participants reported wanting to create specific workflow customizations inside an app they use, but not knowing how or having time to learn, and wishing for a simpler, faster way to create custom solutions for their specific processes.
I also conducted a Competitive Audit which revealed additional opportunities for the product concept:
Persona 1: Abby
Problem statement:
Abby is a CPG (consumer packaged goods) sales manager who often feels overwhelmed with work tasks, technology, and managing their team. They need easy, user-friendly tools and systems to help them manage workflows because they want to meet and exceed sales goals, manage effectively and minimize overwhelm, and gain/keep the respect and confidence of their boss, reports, and retail partners.
Persona 2: Alister
Problem statement:
Alister is a 37-year-old small business owner who oversees a small team. They need better systems because important tasks keep falling through the cracks and they want to help their team work more effectively.
Competitive audit
An audit of a few competitor’s products provided insights on gaps and opportunities in the market that could be addressed with a no-code app builder (as a native app).
Click to view the full competitive audit and audit report
Ideation
I did a quick ideation exercise (Crazy Eights) to come up with ideas for how to address user pain points and gaps identified in the competitive audit.
My focus was specifically on:
Starting
the design
Digital wireframes
Digital wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the No-Code App Builder. These designs focused on a way for users to build custom no-code apps in an easy, intuitive interface in a native mobile app. The app provides a selection of app themes to get started quickly and has a simple approach for custom databases that has a familiar design like a spreadsheet and makes managing data a breeze.
App “themes” allow users to get started quickly and use a pre-built designs.
App databases are easy to customize due to a familiar “spreadsheet-like” design.
Low-fidelity prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the screens of two primary user flows:
Flow 1: Select an app theme and edit the theme’s template.
Flow 2: Create or edit the app’s database and tables.
Usability study: parameters
Study type:
Unmoderated usability study
Location:
United States, remote
Participants:
5 participants
Length:
15-20 minutes
Usability study: findings
These were the main findings uncovered by the usability study:
People were confused about how to save edits due to inconsistency in different sections of the app.
Finding
Finding
Finding
People were not always clear where to begin in the user flow.
Some people were thrown off course by Figma’s setting options on the prototype interface.
1
2
3
Refining
the design
Wireframe
Iteration
Based on the insights from the usability study, I applied design changes like making the experience for saving edits consistent throughout the app.
Before usability study
After usability study
Theme section has a�“Save Edits” popup
The Database section did not have a�“Save Edits” popup
“Save Edits” popup added to all sections of the app for consistency
Wireframe
Iteration
Additional design changes included 1) changing the Welcome screen so it introduces the app and its benefits; and 2) adding a second intro screen that explains the primary elements of building an app in the No-Code App Builder (Database, Pages, Theme, and Workflows) to help users unfamiliar with these concepts find their footing faster.
Before usability study
After usability study
Welcome screen had no introductory info
Welcome screen introduces the app and its benefits.
A new Getting Started screen added to explain the elements of building an app in the no-code app builder
Mockups
High-fidelity�prototype
The high fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
View the No-Code App Builder high-fidelity prototype
Accessibility considerations
Clear labels for interactive elements that can be read by screen readers
Voice typing option on Search field�(speech to text) to provide an alternative way for people to add their search terms
1
2
Going forward
Next steps
Complete the remaining user flow designs and prototypes (primarily for Pages, Workflows, App Settings, and Account Profile). Conduct a usability study for each new user flow prototype to gain further insights into user needs and challenges with the app.
Conduct research on how successful the “just-in-time” in-app video tutorials are at helping users complete tasks within a given flow if they get stuck.
A/B test different video styles to learn which is most helpful to users.
For the additional usability studies, recruit more participants from under-represented groups.
1
2
3
Takeaways
Impact:
Users shared that the app made creating or editing custom content and data on a phone app easier than other work and project management apps they had used previously. One quote from user feedback was “I like that there are starter data tables in the database already, to help you see what you can do.” Another user said, “It’s nice you’re not overwhelmed with too many options. I like that it’s simple.”
What I learned:
I learned that even when you believe you’ve simplified a design a lot, you can probably get simpler. Prioritizing just the “essentials” in a design helps you consider how to maximize the value of the elements that remain on the screen. Yet, you need to be careful about stripping away too much. Users still need the right cues at the right times and easy access to off-screen features with the fewest clicks possible. Design consistency across the app is also crucial. Even in the smallest interactions, consistency is key for intuitive user experiences.
Let’s connect!
Insert a few sentences summarizing the next steps you would take with this project and why. Feel free to organize next steps in a bullet point list.
Thank you for taking the time to review my work on the No-Code App Builder (native mobile app)! If you’d like to see more or would like to get in touch, my contact information is provided below.
Email: amyaturnersb@gmail.com
Website: amyaturner.com