Calibrate

Mobile-First Design for Travel App

UX/UI Designer
Prototype, Presentation
July 2022 - Oct 2022
(4 months)
Figma

Role:
Deliverables:
Time Frame:

Tools:

Challenge

Creating an itinerary is one of the most time-consuming and stressful aspects of planning for a trip. Travelers who want their trip to be well-organized and meaningful have difficulty striking a balance between activity and rest in their itinerary.

Design Concept

Calibrate aims to help travelers adjust the overall pacing of their trip by suggesting alternative activities that take less time, similar time, or more time.

After conducting user interviews with 10 travelers,
I was able to narrow down 3 pain points—

  1. Desire to make a trip meaningful

  2. Need to plan within budget and scheduling constraints

  3. Need to accommodate travel companions

—and determine that a “meaningful” trip was characterized by its overall pacing:

  1. Continually resting and feeling unhurried during a trip; or

  2. Constantly being on the "GO, GO, GO, GO" and feeling accomplished during a trip (by checking off a list of destinations and points of interests)

I crafted 2 personas based off these 2 differing preferences:

Affinity Map

How might we help travelers adjust their itinerary
according to their preferences for that day?

Based off my user research findings and insights, I determined the following ideas were worth developing further:

  1. Total the amount of time spent on each activity during a trip; and

  2. Suggest alternative activities that take less time, similar time, or more time

To refine these ideas, I conducted competitive analysis:

TripIt from Concur

  • sent real time alerts on a trip regarding reservations (e.g. flight statuses & hotel check-in times)

Wanderlog

  • allowed users to toggle easily between their itinerary, their notes, & a map

  • provided users tool to filter search results by niche categories (e.g. bubble tea, street markets)

RoadTrippers

  • provided local points of interests in addition to waypoints

Airbnb
mobile (iOS) app

  • displayed an icon that, when tapped, redirected the user to another screen that lists all available filter options

Google Sheets
mobile (iOS) app

  • displayed an edit icon on the bottom right which, when tapped, triggered a bottom sheet to appear

Wanderlog
mobile (iOS) app

  • displayed a top banner with edit features when a user selected an itinerary item

Taking the key strengths of existing web applications into consideration, I developed
mid-fidelity wireframes that displayed info concisely & introduced features succinctly.

60% of user research participants felt most anxious before a trip. Many attributed the anxiety to lack of preparedness.

Many relied on a well-organized itinerary
(complete with dates, times, destinations, activities) to make a trip feel as painless as possible.

Since the majority used spreadsheets to create their itineraries, I followed that format in my designs.

→

←

Hi-Fidelity Wireframe

01

Organized info
(e.g. time, location)
within an itinerary using
tabs & rows

02

Summed up
activity duration
at the bottom

To facilitate my design process, I developed
a logo and UI kit with the brand values of “clarity” and “productivity in mind.

I based the logo off a speedometer as a reference to adjusting pacing of a trip and integrated the letter “C” as a reference to “Calibrate”, the name of the service.

Hi-Fidelity Wireframes

After bringing my wireframes to hi-fidelity, I conducted usability tests on the following task flow:

“Change an activity on an existing itinerary that was similar but took less time.”

100%

participants
completed the task*

*time to completion time varied a lot,
with 24 min. being the most & 2 min. being the least

42.8%

participants
clicked “View Itinerary”
to edit an itinerary*

*participants expected multiple itineraries to exist

participants averaged

7.6*

in tech saviness

*0 being not very tech-savvy
10 being very tech-savvy

Multiple participants expressed that they enjoyed
seeing a summary of changes at a glance.

“I want to be able to compare activities or versions of itineraries side by side.”
— Usability Test Participant
“I prefer numbers over words.”
— Usability Test Participant

Using the insights from the usability testing & the Impact Effort Matrix,
I made priority revisions so that

  1. each input resulted in an output that aligned with user expectations

  2. task flows required less clicks & movement between screens

Combined “View” & “Edit” Itinerary
into a single option & screen
to align with user expectations
& promote happy paths
over alternative paths.

→

Before

After

Reduced text &
increased use of icons
to improve readability

→

After

Before

Key Takeaways

  1. Immediate visual feedback helps & delights users.

  2. Icons communicate info to users simply but effectively.

  3. Consistency in positioning & phrasing reduces cognitive load on users.

By loosely following the double diamond model in designing Calibrate, I learned the value of testing a product early in the process. This process helped me properly address user needs and keep core functionality a priority.

Conducting usability tests provided insight to a variety of mental models and discover barriers that I had not considered in earlier designs. I was able to learn which aspects of my designs caused confusion and which aspects evoked delight.