Personalized Travelling Experience — TRIPS —Case Study — UX/UI Design
A UX/UI design and research project with my colleague Elena.
Role- UX Researcher & UX Designer
Scope- Travelling application
Timeline- Two weeks
Tools- Figma, FigJam
Overview
If you use any traveling application before, you ought to come to the point that somehow these applications are well designed but a bit complex to use such as Discord, Every application has its drawback I found this in my research and mostly focused on global networks instead real local networks.
The aim of the project is ready-to-use hi-fi wireframes for a nice MVP (Minimum viable product) following the latest new trends to attract new users!
Project background
Trips is a mobile app helping travelers to find the best travel itinerary to visit a city or a country depending on their budget, duration, and expectations.
Project stages
1. Discover
To understand the problem statement and get a better perspective on the solution we deep dive into the topic and see all the different aspects as much as possible so that we can properly conduct our primary and secondary research. For creating a solid foundation — for the different processes, we framed the 5W’s & 1H- Who, What, When, Where, Why, and How. These 5w’s guided me to streamline our research. This stage establishes what needs to be researched.
1.2 Secondary Research
The foundation of the project started with understanding the current scenario of the market and users, so we started with desk research to gather some statistical data and information on the internet. This process helped us form some statistical and behavioral insights about the users and what problems they have been facing & Secondary research also allowed us to frame appropriate questions for my primary research.
Booking Holdings remained the top online travel agency company in terms of revenue in 2021. The big three all experienced over 60% revenue growth last year
There were slightly over one billion travel app users in 2019, with approximately 1.5 billion people taking trips worldwide and more than 65% using a smartphone or website to book.
Booking.com was the most used travel app worldwide in 2021, with almost 35% market share. Expedia took a step back in market share, while Hopper and Vrbo climbed up the rankings
1.3 Primary Research
Primary research is significant to cross-check your idea and solution with real users, It provides us the real data that gives unbiased information. It allowed us to understand the users properly about their pain points, triggers, etc. we talked to 9 people to get a deeper understanding of the problem and understand what is the expectation from the business. We had a virtual meeting during this research, and I asked many questions that shed some light on solutions.
Before preparing for the interview we select some result-oriented questions that helped us to get more insights to understand the user deeply and avoid technical words so the user gets comfortable to give honest feedback on questions.
1.4 User Insights
1- What makes you struggle while you are preparing for your trip?
2- What are the main problems that you are facing when you are in a new city?
3- Have you ever traveled without preparing for a trip?
2. Define
When the research reached the end, It was time to analyze the data and structure all the insights for more clarity about the problem we got from primary and secondary research. This step helped us to create some common groups of users based on their behavior and the answer they shared.
2.1 Affinity Diagram
After analyzing the data we gathered from users and understand them clearly. W document all their insights got from user interviews and after doing this we have better clarity about what each user sets say, thinks, does, and feels. This step helped us to create some common groups of users based on their behavior and the answers they gave.
2.2 User persona
We created a user persona to assign a hypothetical identity — more like an avatar that represents our target users. It helped us to understand their needs, pain points, and motivations. A user persona is a semi-fictional character based on your current (or ideal) customer.
2.3 User Journey Map
2.4 Defining the problem Ideate
The user journey helped us to define our problem statement:
Using a Moscow map we defined an MVP that would include all the basic features to address this problem statement:
3. Ideate
3.1 Brainstorm: Crazy 8s
We created concept sketches independently and then combined our best ideas in low fidelity. We did testing to iron out any initial UX issues.
3.2 User Flow
After redesigning the paper wireframe it gave us some idea of an application flow that shows user progress from start to finish to discover all the functionalities in the application successfully.
3.3 Low-fi & Mid-fi Sketches
After getting a clear picture of the User Flow, we started designing the wireframe. When we began designing wireframes, we were inspired by an application that had similar features and then modified the process.
After the Low-fi prototype was finished, we carried out concept testing. We did a test with 5 users and based on the tests we made some changes and add those changes to our mid-fi prototypes
1. We changed the arrow selections with click selection and made them more visible
2. We added more options to the profile pages such as My Favorites and My Carbon Footprint
3. We deleted the share button and made the add friends button more visible
4. Design
The next process was refining the Mid-fi mockup to become a Hi-fi mockup.
4.1 Visual competitor analysis
A visual competitor analysis gave us insight into design and functionality.
4.2 Brand Attributes — Moodboard
To kick off the visual design process we brainstormed brand attributes and created a mood board. Product reaction tests confirmed that we were accurately communicating our brand personality.
4.3 Colors — Typography — Style Tile
This style tile summarises and consolidates our brand identity.
Poppins is the typeface chosen. It is an accessible typeface that works well when set large and in uppercase and is legible when set small.
The simple color palette is essential but also understated so as not to compete with the visual content. It is androgynous for an app that feels accessible to anyone who wants to organize their travel.
4.4 Atomic design
We were creating a system of pieces that could come together to create elements and templates we could reuse repeatedly.
Functional components are designed using the atomic design system. They are created for multi states in a way that feels seamless and aligns with the visual identity.
We got positive feedback from the desirability testing with most users describing it as minimal, pleasant, and easy to use.
4.5 Final Results
We start with the very first screen of the application which is the Splash Screen and Login Screen. We designed the whole to make it look minimal and user-friendly.
- It started with the logo so we designed that logo intentionally simple so people can easily remember it.
- The purpose of the application is to provide a community-building system with less complexity or in a minimal way.
- We decided to go with some animations and illustrations on the splash screen to give them the vibe and also follow minimalism in the entire application.
- We have followed the universal mobile design pattern on the Signup page.
- After signing up the very first thing that users need to do is to click the next button to reach pages which Trips gives them a personalized experience.
After asking for the detail now it’s time to know more about users.
6. Users need to do is to select their interests and based on that they will get relevant Trips recommendations and their budgets.
7. On the homepage we designed the whole to make it look more user-friendly and added a hamburger bar and search bar and we kept our navbar simple and easy to use.
8. On the plan a Trip page, we put options like single or multiple cities depending on the user's choice they can add a new stop for their plan, and Tripmates.
9. Trips create a recommendation page based on the information it gets from users, we created 3 different overviews daily, weekly, and monthly and a map icon that users can see recommendation places from the beginning until the end on the map page.
10. We decided to create an explore page, with this page we gave users the freedom that can add their travel plans to the places that they liked.
11. On the expenses page, we added a budget screen and add and share expense options.
12. On the product profile page, we add 3 options like;
- My trips: shows your Current plan and Trip history.
- My Favorites: easy to access the places that you add your favorites.
- My Carbon Footprint: displays a measure of the amount of carbon dioxide released into the atmosphere as a result of the current trip.
4.6 Hi-fi Prototype
The prototype is a final design of a product with interactions in it, so the features in the application are clickable and interactive. In this project, we made a prototype using Figma. Please click link below to try the prototype.
Hi-fi Prototype
Closing
This is the second challenge at Ironhack Bootcamp. In this challenge, I learned a lot about the UI/UX process, starting from doing research to usability testing of prototype results and also task management. Special thanks to my teammate who have worked hard in completing this challenge and my facilitator which gave a lot of insight. In this challenge I still have a lot of flaws, I hope for a new insight that can help me in working on future projects and hope you gain something from this case study. I really enjoyed the process of making this with my team. Thank you so much for reading!!
Ali Kemal Dogan| UI/UX Design and Research | Ironhack Bootcamp
E-mail: alikemaldogan88@gmail.com
LinkedIn: in/alikemaldogan/
