Prototype - Iteration 1
Challenge
When traveling to a new place, there are many new things to explore, visit, eat and see. Using only multiple resources without a clean way to organize the information can create a jumbled mess, without structure and hard to cross-reference.
Solution
Design a way for users to enjoy travel planning while being able to keep all of their information in one location. Make a collective space for those traveling with groups to share information and opinions.
My Role: UX Research, UX Design, UI Design, and User Tester
Project Duration: 8 Weeks
What I Did: User Interview, User Persona, User Flow, Wireframing, Prototyping, Usability testing
Tools
Figma, Miro, Invison, Photoshop, Lightroom
User Research & Analysis
Problem
When traveling to a new place, there are many new things to explore, visit, eat and see. Using only multiple resources without a clean way to organize the information can create a jumbled mess, without structure and hard to cross-reference. I’d like to help individuals create concise itineraries in one clean space.
Secondary Research
Creating a plan or itinerary is an important part of going on a trip, but it can also be a very time-consuming, meticulous, and challenging task. There are many places to find information and making sure you look up everything you should in advance (health concerns, weather, covid, common airport scams) can be a lot to remember.
By creating a plan, you ensure that you stick to a budget and prioritize what needs to be done during your trip. Research has shown that people who speak and research about travel are more likely to travel, and those who travel are happier than their counterparts who do not.
Screener Survey
After my secondary research, I wanted to recruit interviewees to learn more about how they feel about planning their travels, how they plan now, what challenges come up while planning and while traveling, and what their biggest concerns are when making those plans (budget, place, transportation, etc). I used social media to send out my screener survey and received 15 pieces of valuable feedback.
Interviews
I then interviewed 5 participants. I focused on the good and bad trips they have taken, the challenges they faced while planning, and on the trip, asked them their feelings about planning, and if they ever travel with groups.
Guiding Questions:
What actions do people take when planning a trip?
Does creating an itinerary create or alleviate stress when trip planning?
What are the challenges to creating an itinerary?
How do people choose if they want to create an itinerary or not for a trip?
What emotional response do people have while planning a trip?
What effect does an itinerary have while on a trip?
Affinity Map
I generated the affinity map by organizing the data I received during the conducted interviews. I grouped similar thoughts, quotes, and comments from my interviewees. I finished with 101 sticky notes abstracted from the interviews and found one distinct difference between those I interviewed.
Empathy Maps
I was able to identify two distinct users during my empathy mapping. While they had some overlapping concerns and pain points, the biggest difference between them was how much time was willingly (and enjoyingly) spent on trip planning.
Personas
Based on the data gathered during research, I set up two personas and referred to them throughout the entire product development process.
I included context, bios, pain points, goals, interests, motivations, personality traits, and brands they would regularly use.
Lana
The Researched Traveler. Someone who likes routine and is independent.
Sean
The Budget Convenience Traveler. Gets easily frustrated with multiple options, tries to stick with a budget.
"How Might We" Questions
Using my findings, I was able to see both common pain points and the goals of potential users. By framing these commonalities as opportunities, I rephrased them into "How might we..." questions to begin honing in on the solutions that users wanted.
How might we...
...create a seamless travel planning experience for users?
...support a person's sense of budget management when they are researching for a trip?
...promote a sense of emergency safety before and during a person's trip?
...facilitate positive group interactions when people want to plan a trip together?
...make generating or searching for packing lists quick and straightforward?
Synthesis & Ideation
Ideation
All the research and synthesis provided me with clear insights to start sketching to generate ideas and establishing concepts to tackle users’ problems.
User Stories
User stories allowed me to build a common language and a mental model of what this project is. User stories helped me form a shared understanding with the target groups. Applying the user stories, I then started organizing the MVP (Minimum Viable Product) by sorting the stories from the highest to lowest priority to create essential values for users.
High Priority User Stories
As a travel app user, I want to have a secure profile so that I can keep my travel information private.
As a travel app user, I want to see my travel itinerary, so that I can organize my days well.
As a travel app user, I want to easily communicate with members of my group trip, so that I can understand what accommodations, activities, and restaurants they may or may not be interested in.
As a travel app user, I want my important documents easily accessible so that I can quickly retrieve them when needed.
As a travel app user, I want to create a list of activities I’m interested in so that I can prioritize what's most important to do.
Sitemap
I identified and mapped out how the app should be structured based on user needs, making sure to include content screens, navigation, and functions. This helped to create a foundation I could refer back to when designing screens.
User Flows
Using the sitemap, I created three essential user paths (Red Routes). I chose to show the three paths that a user would most frequently take to achieve their goals easily and quickly.
Create a New Trip
Add an Attraction Listing to Favorites
Create a Vote to Share with Group Members
Sketches
I was now ready to put pen to paper and begin sketching. I wanted to quickly make my ideas tangible and explore creativity while keeping in mind each design should focus on simplicity, ease of use, and be able to display what’s most important to the user: content.
UI Design & Prototyping
Wireframes
Based on my sketches, I started creating low-fidelity wireframes. I was quickly able to see what worked best and, most importantly, what needed to be iterated on to create a design with user needs at the forefront.
Brand Name
Sojourn
This name was chosen to covey the time you spend traveling can include different stops along the way to see new places and experience new adventures.
Brand Mission
Everyone should enjoy planning their trips, staying excited from start to finish. We provide a platform to create your best trip, easily and enjoyably.
This mission/vision can appeal to anyone who has ever planned a trip and felt a negative mindset while doing it. This mission/vision statement wants to evoke positive feelings in those who see it.
Brand Personality
Sojourn wants to empower users to explore new places and delve into new cultures to help them create amazing lifelong memories.
It’s important the brand communicates the power travel can have on creating positive connections everywhere you go.
Brand Attributes
Exciting, effortless, belonging, trustworthy.
You can write here as much as you want, this text will always look nice, whether you write longer paragraphs or just a few words. Click here and try it out.
Moodboard
Curating the mood board was enjoyable and straightforward. I had a solid understanding of how the design of the app should make a user feel, which made finding images and elements connected to that vision smooth.
For my imagery, I wanted to evoke the excitement of a new destination while also including the idea of also seeing the natural world as you travel.
My UI inspiration revolved around clean lines, appropriate use of white space, and an ability to show enough critical information without the design feeling overwhelming.
Design System
A style guide is foundational to any product, brand, or company. It includes all necessary guidelines, principles, and assets that are critical to designers which when used, benefit the user by creating a cohesive and consistent experience.
After some research to create a simple logo that embodied Sojourn, the rest of the style guide came together quickly. Using the logo as inspiration, I was able to bring together fonts, icons, and colors to create a style guide that displays feelings of trusted professionalism, while highlighting an undertone of joy.
High-Fidelity Screens
Throughout designing, I thought about the design principle Tesler’s Law, also known as The Law of Conservation of Complexity. It states that for any system there is a certain amount of complexity that cannot be reduced.
Sojourn is inherently complicated with many necessary elements, so I focused on simplifying enough to take the burden off the user while keeping the tools available robust. Creating content-based functionality without compromising aesthetics was critical to the design of the high fidelity screens. Using the style guide as a touchstone, I was able to put the screens together quickly.
Prototype
Something I felt necessary to ensure a solid prototype were micro-interactions. While the overall app has a professional tone, travel should be fun. These micro-interactions brought a bit of whimsy and fun to a task that can often feel overwhelming.
Keeping this in mind, I was able to create a few instances that added movement and lightness to the overall design. I tested the prototype out many times before testing it out on real users.
Usability Testing
Usability Testing
In the usability tests I facilitated, I was testing the users' overall perception of the UI design, general usability problems, and how easy users find completing tasks. I hypothesized there could be a task-based complexity issue when saving places to favorites and trips.
These tests were moderated remote tests. I reached out to people I had previously interviewed in my discovery phase and also reached out to people in my community. I recruited five people for the tests, one who had taken part in my interviews, and four others from my community.
Objective:
Test the ease-of-use while completing tasks
Uncover usability problems
Users' perception of the overall UI design
Test Questions/Tasks:
Can users create a new trip?
Do users understand how to add items to their itinerary?
Can users favorite an attraction?
Can users create a vote for a group trip?
Issue #1
While all participants liked the colors, layout, and thought the features included in Sojourn were very useful, the main issue during testing was participants not understanding where they could save search results for viewing later, favorites, or specific trips.
Summary:
Participants understood how to start the favoriting process.
When participants saw multiple places to save, they were not sure what to do.
As the prototype had prepopulated data, the participants would sometimes forget the overall scenario, which didn’t help when saving places for later.
Recommendations:
This is a level of complexity I don’t think should be removed from the app but should be taught to new users to make the overall experience better the more they use it.
Creating a “How to” onboarding flow would help users to see how they can use the features to create a better trip planning experience.
Issue #2
The voting question input box was confusing to many participants. They were not aware they could write their own question to create a group vote.
Summary:
Participants would bypass the voting question input box altogether and go straight to the button to send the vote.
As the box only says “Voting Question,” the participants did not think they could edit the voting question to say what they wanted.
Recommendations:
Changing the input box to say “Write your voting question here” would help users know they can write the question themselves
Also, the other editable parts of the Create Vote screen have a pencil icon to show that you can edit, so that might also be helpful to use.
Issue #3
Many participants thought that to create a vote, you would go to the chat tab to start that process.
Summary:
When asked to create a vote for their trip groups, participants first went to the Chat tab in the bottom navigation.
They knew that they would be creating something for a group, so went to the place they could communicate directly with their group.
Recommendations:
I believe having two routes to create a vote would be helpful.
It would be helpful to be able to create a vote from the Saved section in the trip and also in the meatball menu inside your group chat.
Redesign
UI Redesign
Using the findings from user testing, I was able to start the redesign process. A major part of the redesign was adding an onboarding flow to tell users the unique features that are available (multiple save features, group trip creation, and group trip voting.)
I have now included onboarding flow, a second way to create a vote, better named the label of the Group Vote input box, and now have an option to view your trip by date or day number.
Directly below you can click through the redesigned prototype.
Reflection
What I have learned
Through this project, I realized I can create a robust app that includes many features while still making it understandable and simplistic for users. I enjoyed every process forming this project, from discovery and UX research to creating the UI designs and prototyping.
My favorite part was the culmination, to see the research, design principles and my personal creativity come together to create an interactive prototype. User testing was critical as it gave me valuable insight on how a user would interact with the app, helping me to iterate Sojourn into a better user-focused design.
4
Iterations
29
Screens
1
Working Prototype
100
cups of tea