Case Study – Mobile App EzQuote
This is a high-fidelity mockup of a billing estimate app. We used Figma for its design: from wireframing to lo-fi/hi-fi mockups and prototyping.
Billing Estimate App for a Secure Logistics company
by Xavier Vivas
Project overview
The product:
EzQuote is a Bill Estimation app that allows fast & reliable quotes for secure shipping services.
Project duration:
The problem:
The goal:
EzQuote simplifies the quote/shipping process in a few steps and from the comfort of your home, business, or on the go. Expect fast and accurate quotes that allow immediate execution.
The role:
For this project my roles have been as UX Researcher & UI/UX Designer.
Responsibilities:
Ideation, user research, wireframing, and prototyping.
Understanding the user
-
User research
-
Personas
-
Problem statements
-
User journey maps
User research: summary
The research for this project involved ideation, competitors’ audit, moderated & unmoderated usability studies, and documentation research on similar projects.
User research: pain points
1
Address Options are Confusing
Users were not sure about the specificity of addresses on the Quote form: from/to.
2
Bottom menu button is useless
There were not enough cues on the Create a Quote “plus” icon button.
3
Fast Loading Interactions
The success messages after confirming a quote/payment were too fast and created confusion/anxiety to users.
4
Unclear Payment Options
There were not clear enough cues to indicate payment steps and payment methods.
User personas
Vivi
Business Owner
Goals:
- Get valuable items securely and quickly.
- Get quick and reliable estimates from logistics companies.
Frustrations:
- Don’t want to waste time calling or going in person to a logistics company.
- Sometimes estimates are not reliable and she ends up paying more.
Narinder
Business Owner
Goals:
- Obtain many accurate estimates for shipping goods.
- Get low-cost quotes for shipping.
- He can wait a bit as long as prices are low.
Frustrations:
- Getting online quotes are often too complex for him as he has dyslexia.
- He doesn’t have time for “in person” quotes so he often calls but his English is not too clear.
User journey map
Get quick & reliable estimates for shipping valuable items.
Starting the design
-
Paper wireframes
-
Digital wireframes
-
Low-fidelity prototype
-
Usability studies
Paper wireframes
The main goal was to simplify the process from the start and come up with an intuitive design.
Digital wireframes
Keep accessibility in mind
for all kinds of users.
- A quick dashboard quickly shows process completion/alerts.
- Big buttons with main functionality for easy access.
Focus user’s attention
on main elements & decrease anxiety.
-
Opacity screen to focus the user’s attention on tasks.
-
A big “back” button for user’s peace of mind.
Low-fidelity prototype
Click here to see the low-fidelity prototype in action.
The user flow shows links to the Main Menu, Home, New Quote, History, and Alerts.
Usability study: findings
We conducted two separate usability studies. The first one to test the first mockups and the second one to find more insights on the prototype iteration.
Round 1 findings
Round 2 findings
- Users want an easier flow to create a new quote.
- Users need better cues to understand forms and next steps.
- Users need better cues on the “plus” button (bottom menu).
- Users want slower success messages after quote creation/payment.
- Users need simpler & more accurate button’s text when creating a quote.
- Users want to see a calendar view when picking a date on the form.
Refining the design
-
Mockups
-
High-fidelity prototype
-
Accessibility
Mockups
Before usability study
After usability study
The option to use a New or Default shipping address was incorporated on the quote form with a drop-down field.
Mockups – userflow
High-fidelity prototype
Click here to see the high-fidelity prototype in action.
Accessibility considerations
1
The size of icons, such as the main functionality buttons are made for easy access for users with visibility limitations.
2
The inclusion of an “Accessibility” button on the bottom menu is thought for users with various limitations (sight, audition, focus, etc.).
3
The combination of text & icons, and good contrast on different areas of the app improve accessibility and general good design practices.
Takeaways
Impact
The design of this app takes into account the most recent user experience & accessibility guidelines. The app flow has been simplified considering inclusion of all users.
“I like it! It’s very, very easy!” ~ User B
What was learned
The importance of design inclusion is not only a trend. It can really help the overall UX process for everyone… it’s just good design!
