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.
UX Designer: Davide Tremolada
User: Genevieve Smith
Testers: Sim, Bill, Lola, Lauren, Dal, Xenia, Joy
User research, UX, Sketch, usability testings, InVision
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.
- 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.
- 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
- It can be very stressful to research activities for a holiday trip.
- It’s difficult to engage friends in activity planning.
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
- 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.
Creating a visual storyboard helped me to frame the function of the app into the broader structure of the 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.
Here are the four steps I decided to develop:
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.
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
It became clear how the user flow could be improved to be more simple and intuitive.
- 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
I then moved it to mid-fidelity wireframes. I continued testing with a digital prototype in InVision.
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.
- 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.
№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 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.
The mood board inspired the tone of voice of the app. It also allowed me to explored different colours combinations.
Prototype workflow created with InVision
- The user is happy and not stressed
- Easy engagement of her friends
- Travel planning got much easier!
Happiness > Engagement > Relax
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
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 email@example.com
Also, please leave your feedback to help me improve.