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
EzQuote is a Bill Estimation app that allows fast & reliable quotes for secure shipping services.
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.
For this project my roles have been as UX Researcher & UI/UX Designer.
Ideation, user research, wireframing, and prototyping.
Understanding the user
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
Address Options are Confusing
Users were not sure about the specificity of addresses on the Quote form: from/to.
Bottom menu button is useless
There were not enough cues on the Create a Quote “plus” icon button.
Fast Loading Interactions
The success messages after confirming a quote/payment were too fast and created confusion/anxiety to users.
Unclear Payment Options
There were not clear enough cues to indicate payment steps and payment methods.
- Get valuable items securely and quickly.
- Get quick and reliable estimates from logistics companies.
- 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.
Family: 1 daughter
Occupation: Business owner
Vivi lives in Vancouver and manage 3 businesses in China. As a busy woman, her iPhone is a great tool to handle many daily tasks. She doesn’t like wasting her time in brick-and-mortar shops when that can be avoided. Vivi likes spending time with her 18 y-o daughter and travel around the world.
- Obtain many accurate estimates for shipping goods.
- Get low-cost quotes for shipping.
- He can wait a bit as long as prices are low.
- 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.
Family: Wife & 3 children
Occupation: Owns a mini market
Narinder lives in a suburb near Toronto. He immigrated to Canada at 26. A decade ago he opened a mini market with his wife. He is trying to expand his business and add some more valuable items but the freight quotes are often expensive or he has to negotiate and he has language limitations and dyslexia. He wishes he could simplify this process but websites’ forms are complex and time-consuming.
User journey map
Get quick & reliable estimates for shipping valuable items.
Starting the design
The main goal was to simplify the process from the start and come up with an intuitive design.
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.
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
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
Click here to see the high-fidelity prototype in action.
The size of icons, such as the main functionality buttons are made for easy access for users with visibility limitations.
The inclusion of an “Accessibility” button on the bottom menu is thought for users with various limitations (sight, audition, focus, etc.).
The combination of text & icons, and good contrast on different areas of the app improve accessibility and general good design practices.
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!