Tripps — Designing a Travel Planning App. A UX Case Study.

A User-Centered Research Process

General Assembly, UXDI #29.

Brief: Create an application to solve a problem for one unique user
Following all the steps of the UX process, determine the user’s needs and pain points and how to address them with a new mobile app.
The Team
UX Designer: Davide Tremolada
User: Genevieve Smith
Testers: Sim, Bill, Lola, Lauren, Dal, Xenia, Joy
Tools
User research, UX, Sketch, usability testings, InVision
Sprint Duration
2 weeks (from the initial research to a high-fidelity prototype)

№1: User Research & Analysis

I conducted an exploratory interview of my unique user: Gen, a senior graphic designer based in London.
I identified one area of her life that was important for her but contained some pain points that I could tackle with a mobile application.

1 — Me and Gen during the exploratory interview 2 — The User Flow showing the pain points that Gen encounters during travel planning

Findings

  • Gen has two great passions: travelling and ancient history.
  • She wants to create detailed travel plans for the activities on her trips.
  • She often travels with many friends and her family, rarely alone.
Key quotes from the exploratory interview

The Problem

  • To plan her trips Gen researches information from different sources.
  • She finds this process very time-consuming and stressful.
  • Gen wants to share with her friends her ideas.
  • Often she doesn’t receive feedback from them and she feels frustrated.

Key Pain Points

  1. It can be very stressful to research activities for a holiday trip.
  2. It’s difficult to engage friends in activity planning.

My Solution

I decided to create an application to:

  • Quickly find a curated selection of activities.
  • Easily invite her friends to plan a trip.

№2: Brainstorming & Ideation

Outcome Statement

Design Principles

  • The product should be a single source of information to find activities.
  • Friends and family members need to be easily involved.
  • The product should provide clear & intuitive experience, with clean & friendly interface.

Storyboard

Creating a visual storyboard helped me to frame the function of the app into the broader structure of the user flow.

Storyboard: using the app Gen can easily plan a trip, avoiding any stress

User Flow

The main purpose behind the user flow was to make it as easy as possible, quick to learn and with an intuitive set of actions.

Digitized version of the user flow, created with draw.io

Here are the four steps I decided to develop:

User Flow: four main steps

Idea Sketches

Drawing on paper allowed me to quickly change and discard different ideas.

It also provided the first insights on how the actual navigation and logic behind each step could be developed.


№3: Usability Testing

Overall, the design tries to do two things: 
1) Provide information about possible activities; 
2) Encourage the user to involve her friends.

Paper Prototype

The benefits of this approach are many:

  • I was able to quickly iterate through different versions
  • The users felt comfortable explaining their ideas and propose solutions
  • I could easily create/scrap features and create interactions on-the-fly
The paper prototype and me testing it with Lauren

Testing Results

It became clear how the user flow could be improved to be more simple and intuitive.

Design Changes

  • Inviting friends was prioritized over adding activities.
  • The “X” button to go back was misinterpreted as “quit” action and substituted with a back arrow.
  • Pop-ups were introduced to explain key functions at first use
The wireflow as it appeared after the round of testing with the paper prototype

Wireframes

I then moved it to mid-fidelity wireframes. I continued testing with a digital prototype in InVision.

Gen testing the mid-fidelity prototype in InVision

Testing Results

I went through three different iterations of wireframes. Observing the users and allowing them to describe their decision-making process was fundamental. I was able to polish the navigation towards a more common interface pattern.

Design Changes

  • The voting system (to prioritize activities in a shared trip) was made easier to understand and clearly visible on screen.
  • The main navigation was moved at the bottom of the screen, with clear labels under each icon.
  • Buttons were positioned according to their hierarchy.
  • A more consistent interface was developed, for a smooth transition into the high-fidelity version.
Wireframes: 3rd iteration created in Sketch

№4: Design Execution

Finally, I took the mid-fidelity wireframes and moved them into a high-fidelity mockup in Sketch.

Iterations Example 1 — Trip Plan Screen

The goal is to Prioritise Friends Engagement.

  • The navigation was moved to the bottom.
  • The option to add friends to the trip is at the top, before the planning.
  • The votes are clearly visible on the trip plan.
  • Notifications allow the user to know when friends interact with the plan.
Iterations from the paper prototype to the high-fidelity mockup

Iterations Example 2 — Found Activities Screen

The goal is to Reduce Cognitive Load by limiting the choices on the interface and create a single flow of action.

  • The “add to trip” button was removed, leaving just “read more”.
  • The visual part was made more prominent and appealing.
  • The tone of voice is kept light and happy, to engage the user.
Iterations from the paper prototype to the high-fidelity mockup

Mood Board

The mood board inspired the tone of voice of the app. It also allowed me to explored different colours combinations.

Moodboard

Styleguide

Styleguide

Prototype

Prototype workflow created with InVision


Prototype gif created with Gif Brewery

№5: Achievements

  • The user is happy and not stressed
  • Easy engagement of her friends
  • Travel planning got much easier!

Happiness > Engagement > Relax

Next Steps

Further add-ons could be developed and integrated within the app.

  • Log-in with social networks
  • Create personalized activities and share them with the community
  • Add personal notes and pictures to the activities
  • An internal chat for the trip plan
  • Download the content for offline access
  • Localization of the activities on a map

Conclusion

This was a fun and challenging two-weeks sprint. I learnt a lot during all phases of research and development. It was fantastic to be able to understand the real needs of a user, doing testing and receiving feedback.


About the Author

I am a graduate from General Assembly, London, User Experience Design Immersive (UXDI) programme. I am currently actively seeking for a job — and happy to meet for a coffee or a quick chat.
My design works can be viewed in my portfolio
Contact me by
ux@davidetremolada.com

Also, please leave your feedback to help me improve.