END-TO-END MOBILE WEBSITE
Website designed to help plan a group trip by making decision making and itinerary building seamless and fun!
Project Overview
The aim of this project was to build an end-to-end product with the end goal being a mobile website to help people who want to plan an event or trip.
I decided to focus on helping users who are planning a trip and more specifically group trips.
My Role
Solo UX/UI Designer
My Responsibilities
User Research & Competitive Analysis
Design Strategy
User Personas
User Flows & Task Flows
Visual Design
Wireframing
Prototyping & Usability Testing
Tools
Objectives & Goals
We want to know how our users plan group trips so that we can build a platform that makes the process easy and seamless.
Determine how users currently plan group trips.
Understand the pain points in planning group trips.
Understand the positive aspects of planning a group trip.
Understand how users coordinate in a group when planning.
Understand users post-planning experience
My Process
Discover
Design
Test
Define
Ideate
Deliver
Product Users
Our target audience is millennials who travel in groups
Discover
Competitive Analysis
Click to enlarge
User Interviews
Interviews were conducted with 5 individuals who are part of the millennial age group. These individuals were known to travel somewhat frequently so they were good candidates for the interview process.
Some questions included:
How do you go about planning a group trip? What tools, websites, apps do you use?
How do you communicate planning details and decision-making with your group?
What are your goals when planning a group trip?
What emotions do you feel when planning a group trip?
What are your pain points when planning? What do you enjoy?
What would make the planning process more seamless
Key Takeaways
Full research synthesis can be viewed in FigJam: Affinity Map
Conclusion
After talking with users, it appeared that the process of planning a trip with a group tends to be stressful because of all the moving pieces and having to get sign off on planning details with everyone in the group. There is a definite need for a central tool to assist in the planning for group trips.
Define
POVs & HMWs
I’d like to explore ways to make planning a group trip more collaborative and fun for millennials because they feel stress around decision-making and making sure everyone’s voice is heard in the planning process.
How might we make decision-making fun and collaborative for millennials planning group trips so that all groups members are excited to be involved
User Personas
Ideate
Using my research findings and steps taken to define the problem, I moved on to ideate a potential solution. I came up with an idea, called Roam
Feature Set
With the general concept of Roam outlined, the next step was to go into more detail with what specific features it will have and prioritize those features based on what is most important to the user while also being viable for business goals in the long run.
View Feature Set matrix here
Card Sort
After ideating what Roam will offer, I wanted to check in with users on how they think about the organization and categorization of the information within this product using a Card Sorting exercise.
I created 36 cards for this exercise, conducted with 5 individuals using Optimal Workshop.
My findings from the card sort were as follows:
Participants seemed to have varying ideas of how the information should be categorized outside of familiar categories (i.e. Account/Profile) and seemingly obvious categories (i.e. Explore)
Because this product idea is new and different from what participants are used to, they seem to have confusion on where to place cards centered around the planning process, current trips & itinerary or they were put under a category like Misc
Explore is definitely a category I will include due to its popularity and will think about potential search or filtering options for users to find this info
There may not be a need for Home category in this product or it may be called something else but users did not seem to consider this in their sorting
This exercise yielded useful information from users around the organization of the more familiar content categories. Conversely, I felt the actual planning functionality was too unfamiliar for the users at this time so the results varied a lot across those cards. This leaves an opportunity down the road to do this again once there’s a bit more structure to this product maybe with a demo/mock-up of what it does, as currently it’s so new to users that I don’t believe they fully understood the design when looking at these cards blindly.
Sitemap
With a general outline of what features and pages I’ll have in the product, I put together a sitemap to begin thinking about the loose organization of everything I’ve ideated so far.
Click to enlarge
User Flows & Task Flows
With a general idea of how the pages and content in Roam will be organized, I took to mapping out how users will move through them with various scenarios in User Flows and Task Flows to further solidify the organization of this product.
View User Flow here: User Flow
Click to enlarge
View Task Flow here: Task Flow
Click to enlarge
Design
Wireframing
I sketched a few ideas for Roam and then digitized those into wireframes as seen below or in my Figma file here. The main feature The Group Sync where users can all vote on their activities in their group in a manner similar to a dating app (swipe left, swipe right). Additionally, Roam can take your activities and organize them into an easy to use itinerary!
With a bit of tweaking through the process of creating the screens, I built the main screens for my Hi-Fi seen below:
Deliver
Usability Testing
Test Parameters
I built an interactive prototype in Figma and performed a mix of moderated/unmoderated tests with 5 participants. I asked participants to complete 3 tasks: Creating a Trip, Starting a Group Sync, and Building an Itinerary.
Feedback
After synthesizing results I mind mapped the feedback into categories based on the feedback being positive/critical and focused on design and features or the organization and flow as seen below or here in FigJam
Priority Revisions
Some of the feedback I received from the usability tests was critical but came from the perspective of a user using a product for the first time, so wasn’t immediately a candidate for revisions.
There was some feedback that was good for revisions. One of which being able to quickly jump back into the planning flow from the home page, i.e. the user has created a trip and the next step is to start the group sync, vs. having to go into the trips tab and find the specific trip and then enter the flow. To resolve this I added a box at the top of the Home Page giving notice to the user they can pick up where they left off by clicking this button.
Another revision came from the wording used to add a new trip on the Trips tab, originally the button said “Create New”, but based on feedback this wording didn’t immediately flag to users to use this button to add a trip. So I changed the text on the button to “Add Trip” to better portray the purpose of the button.
The purpose of this project was to provide an MVP so I focused on the immediate revisions above but I believe there are additional improvements that could be made for this product as it relates to flow and organization in the future and with more testing, specifically with users who have used the product more than once.
Learnings
This was my first UX design project so everything was new going through the end-to-end design. I especially felt the importance of utilizing the design process to progress through building a product and keeping information organized. I learned the value of each step within Research, Ideation, Design, and Deliver and have been able to utilize those in various combinations in my later projects.
Next Steps
Add more group features, such as group chat, to make the experience more live and interactive for users while planning their trip. In addition, more planning tools after doing the Group Sync to make the itinerary more customizable.
Explore making the product compatible with outside apps like Google calendar, email to give users flexibility in utilizing their trip plan while they’re traveling.
Next Project:
