xansibar website design vancouver

Case Study – Mobile App EzQuote

mobile app prototype

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:

September-November 2022
mobile interactive prototype

The problem:

Getting reliable shipping quotes is often a long and unreliable process (waiting on the phone/in person, complex online forms, etc. Quotes often expire or change quickly, making them unreliable.

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

female user persona

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.

Age: 51

Education: MBA

Hometown: Ningbo

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. 

male user persona

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.

Age: 45

Education: High-school

Hometown: Kolkata

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

  • 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.

paper-wireframes

Digital wireframes

Keep accessibility in mind

for all kinds of users.

low-fi mockup
  • 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.

lo-fi app sample
  • 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

  1. Users want an easier flow to create a new quote.
  2. Users need better cues to understand forms and next steps.
  3. Users need better cues on the “plus” button (bottom menu). 
  1. Users want slower success messages after quote creation/payment.
  2. Users need simpler & more accurate button’s text when creating a quote.
  3. 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

lo-fi app sample

After usability study

app screen mockup prototype

The option to use a New or Default shipping address was incorporated on the quote form with a drop-down field.

Mockups – userflow

app mockup design
app mockup userflow
checkout process mockup
hi fi prototype screen

High-fidelity prototype

Click here to see the high-fidelity prototype in action.

figma app prototyping

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!

!
Share This