Designing a User-friendly App Wizard
To create a intuitive, productive & efficient app wizard that streamlines the process of defining app details, minimizing the need for subsequent revisions
TimeLine
1 week
Stakeholders
Full Stack Developer
UX Research
Scenario Planning
Empathy Evaluation
Usability Testing
Hi-fi
Project Summary
Problem
Currently there is no wizard, user lands on the platform clueless of what to do next.
The app creation process can be complex and time-consuming for users, particularly those who are new to the platform
Key-Objectives
-Simplify the app creation process.
-Reduce user errors and frustration.
-Gather accurate and complete information from users.
-Automate few steps which are overwhelming to new users
Context
What are Wizard?
A wizard is a step-by-step process that allows users to input information in a prescribed order and in which subsequent steps may depend on information entered in previous ones.
One wizard page typically corresponds to a single step in a multistep process.
Placement of wizard in our platform
The idea is to capture user’s Essential User Requirements for app creation like App’s name, Logo, Industrial domain, Color scheme. Few Requirements align to User’s App creation but few were to train our AI model in future.
Defining Research
What does the platform do?
Its an end-to-end app creating place where an user can create Data models, Configure permission access and Design screens
back end-
Neon(postgresql)
Cloudfare workers
front end-Tailwind
understanding where we are?
Discovery
Problem
worth solving
& Solutioning
Planning
Prioritizing
what to develop
Execution
Building
Evolution
Learning+
Iterating
Evolution consists of Good to have features to avoid user friction - wizard was one of the feature.
Where did we feel the gap?
Internal
The users were unclear of what features does the platform provide
Eg Design Systems
Aa Bb Cc
Aa
AaBbCc123
AaBbCc123
Primary
Primary & Secondary
Aa Bb Cc
Aa
AaBbCc123
AaBbCc123
Aa Bb Cc
AA
AaBbCc123
AaBbCc123
124
Total Transactions
89
Total Cash Collected
Month
Money Incurred
Total Money Incurred
Cash
Online
Enter Details
Vehicle Number*
RA 15 AS 2002
RFID Number
RA 15 AS 2002
Scan QR Code
SCAN
Smart Camera Number
BSW123NN4RT
Wallet Balance
7500
PRINT DRIVER DETAILS
SUBMITTED
Gate Status
OPEN
Permission granted for vehicle
RA15 AS 2002.
Spuer
Agency
Enty
Exit
Registrations/Allocations
Wallet
Services
Configurations
Analytics/Tables
Log out
Vehicle Details
User Details
Registration
Verified
124
Total Transactions
89
Total Cash Collected
Month
Money Incurred
Total Money Incurred
Cash
Online
Vehicle Number*
RA 15 AS 2002
RFID Number
RA 15 AS 2002
Scan QR Code
SCAN
Smart Camera Number
BSW123NN4RT
Wallet Balance
7500
PRINT DRIVER DETAILS
SUBMITTED
Gate Status
OPEN
Permission granted for vehicle
RA15 AS 2002.
Spuer
Agency
Enty
Exit
Registrations/Allocations
Wallet
Services
Configurations
Analytics/Tables
Log out
Vehicle Details
User Details
Registration
Verified
1
2
3
4
...
124
Total Transactions
89
Total Cash Collected
Month
Money Incurred
Total Money Incurred
Cash
Online
Vehicle Number*
RA 15 AS 2002
RFID Number
RA 15 AS 2002
Scan QR Code
SCAN
Smart Camera Number
BSW123NN4RT
Wallet Balance
7500
PRINT DRIVER DETAILS
SUBMITTED
Gate Status
OPEN
Permission granted for vehicle
RA15 AS 2002.
Spuer
Agency
Enty
Exit
Registrations/Allocations
Wallet
Services
Configurations
Analytics/Tables
Log out
Vehicle Details
User Details
Registration
Verified
Primary on neutral
Things where users take extra steps to overcome a task can be automated
Further things which are neglected in initial steps can be set from inputs
Eg User Role Permission and aceess
This can also be a type of analysis for knowing what users prefer for next developments
Eg Make a template for _____ App
Users Take
Easily change Colors which reflects globally
A pre-set apt Color theme so as to reduce congnitive load for this step
Least Important but Basic needs set aside
Setting structure
LIst of requirements
Logo and Name
App Type
Design System
Color (Primary and Secondary)
Typography
Input Type
Select one type
Description
Logo Avatar
Logo Generator
Upload Image
App Name
STEPS
WHATS
Filtered Industry Type
Divided into two that works for
Users’s Best
Our Best
App Name
App Logo
Setting the theme-
how would the app look
Industry Domain-
Will give best result for components specifically required for the App
About the App-
Used to train our system for further themes and
Can these inputs be helpful to set few more App settings? and How?
Categorisation of themes and finding commonalities
Primary
Secondary
Display Font: Nunito Sans Bold
Body Font: Nunito Sans Regular
Primary
Secondary
Display Font: Karla
Body Font:Inconsolata
Primary
Secondary
Display Font: Yeseva One
Body Font: Nunito Sans Regular
Primary
Secondary
Display Font: Montserrat
Body Font: Hind
Primary
Secondary
Display Font: Montserrat
Body Font: Hind
Primary
Secondary
Display Font: Playfair
Body Font: Lato
Primary
Secondary
Display Font: Georgia
Body Font: Lato
Primary
Secondary
Display Font: Bodoni
Body Font: Lato
Vintage- Retro
Primary
Secondary
Display Font: Playfair
Body Font: Lato
Vintage- Retro
Primary
Secondary
Display Font: Futura(bold)
Body Font: Open Sans
Neon-Cyberpunk
Primary
Secondary
Display Font: Futura(bold)
Body Font: Open Sans
Dreamy-Pastel
Primary
Secondary
Display Font: Futura(bold)
Body Font: Open Sans
Dreamy-Pastel
Primary
Secondary
Display Font: Raleway
Body Font: Nunito Sans
Dreamy-Pastel
Primary
Secondary
Display Font: Pacifico
Body Font: Roboto
Dreamy-Pastel
Primary
Secondary
Display Font: Lora
Body Font: Open Sans
Dreamy-Pastel
Primary
Secondary
Display Font: Futura(bold)
Body Font: Open Sans
Vintage- Retro
Primary
Secondary
Display Font: Futura(bold)
Body Font: Open Sans
Futuristic-Tech
Primary
Secondary
Display Font: Gotham
Body Font: Open Sans
Elegant
Primary
Secondary
Display Font: Gotham
Body Font: Open Sans
Nature Inspired
Primary
Secondary
Display Font: Gotham
Body Font: Open Sans
Nature Inspired
Primary
Secondary
Display Font: Times New Roman
Body Font: Helvetica
Nature Inspired
Primary
Secondary
Display Font: Times New Roman
Body Font: Helvetica
Elegant
Primary
Secondary
Display Font: Gotham
Body Font: Open Sans
Elegant
Primary
Secondary
Display Font: Gotham
Body Font: Open Sans
Futuristic-Tech
Primary
Secondary
Display Font: Futura(bold)
Body Font: Open Sans
Futuristic-Tech
Primary
Secondary
Display Font: Exo
Body Font: Open Sans
Futuristic-Tech
Primary
Secondary
Display Font: Gotham
Body Font: Open Sans
Futuristic-Tech
Primary
Secondary
Display Font: Gotham
Body Font: Open Sans
Futuristic-Tech
Primary
Secondary
Display Font: Gotham
Body Font: Open Sans
Futuristic-Tech
Primary
Secondary
Display Font: Exo
Body Font: Open Sans
Futuristic-Tech
Primary
Secondary
Display Font: Exo
Body Font: Open Sans
Vintage-Retro
Minimalist-Monochrome
Neumorphism
Futurisctic-Tech
Elegant Luxury
Basics
Nature Inspired
Cyberpunk/Electric
Pastel
Final Screens
1st Iteration
Jump To Blank Canvas
Step-1/3
Tell us about your Idea
Set a Logo and Name
Set a Logo
or
Upload your Logo
(Supported Format: .jpeg/.png/.jpg/.pdf; Max size: 2 kB)
Choose a file
No file choosen
Next
1st Iteration
🤩 User’s Choice
Giving a range of options is good when
-users are here on the platform to test
-are yet not clear
🥲 Problem Faced
Choice overload-Giving too many options often delay in decision making
Is there a way that Inputs boils down to two- App Name and Logo
GO BACK
Step-1/3
Jump to platform
Set Project Name and Logo
Name of the Project
Papaya House |
Set a Logo
Upload
No file chosen
or
Add file URL
💡You can change details later.
NEXT
2nd Iteration
Jump To Blank Canvas
Step-2/3
Tell us about the domain your app caters to
Domain and Description
Industry/Domain
Health and Wellness
Community
Events
EV
eCommerce
Entertainment/Social Media
FinTech
IoT
BioTech
EdTech
What is the idea about?
E.g.: eCom for apparel
Next
1st Iteration
🤩 User’s Choice
Avoid this step all together- irrelevant to their needs
GO BACK
Step-2/3
Jump to platform
Tell us about the type of the Project
Industry/Domain
Health and Wellness
Community
Events
EV
eCommerce
Entertainment/Social Media
FinTech
IoT
BioTech
EdTech
Productivity
Others?:Enter Domain
What is the Project about?
E.g.: eCom for apparel
NEXT
2nd Iteration
Jump To Blank Canvas
Step-3/3
Set a Theme for the App
Set Color Palette and Font
Choose a Style
Primary
Secondary
Display Font: Montserrat
Body Font: Hind
Primary
Secondary
Display Font: Montserrat
Body Font: Hind
Primary
Secondary
Display Font: Montserrat
Body Font: Hind
Primary
Secondary
Display Font: Montserrat
Body Font: Hind
or
Select your own Style
Confirm
1st Iteration
🤩 User’s Choice
A range of good themes which also goes with design trends
🥲 Insight
6 filtered themes which will fit the chosen industry domain
Inputs boils down to two- App Name and Logo
GO BACK
Step-3/3
Jump to platform
Set a Theme for the App
Choose a Style
Material Design
Primary
Secondary
Display Font: Noto Sans
Body Font: Noto Sans
Minimalist Modern
Primary
Secondary
Display Font: Montserrat
Body Font: Hind
Vintage- Retro
Primary
Secondary
Display Font: Playfair
Body Font: Lato
Dreamy-Pastel
Primary
Secondary
Display Font: Raleway
Body Font: Nunito Sans
Nature Inspired
Primary
Secondary
Display Font: Times New Roman
Body Font: Helvetica
Neon-Cyberpunk
Primary
Secondary
Display Font: Futura(bold)
Body Font: Open Sans
or
Select your own style
Secondary Color
#FFD500
Display Font
Montserrat
Body Font
Hind
NEXT
2nd Iteration
Final Iteration
Number of screen reduced to 4 from 7, one with each topic of question related, reducing navigation and reading time.
Learnings
Regular discussions with devs.What seems default function may not actually be, the developer might have to put in extra steps and so as we as designers shall also wear devs lens.
Thanks for Visiting!