Introducing
Trip'd
Group trips more organized. More organization means more fun!
Project Type: Concept
My Role
UX Researcher
Visual Design
Timeline
3 Weeks
Deliverables
Survey
User Stories
User Flow
Low Fidelity Wireframes
Mid Fidelity Wireframes
High Fidelity Mockup
Interactive Prototype
Tools Used
Google Forms
Whimsical
Balsamiq
Figma
Maze.design
Zoom
Going on vacation is fun for almost everyone. Planning the vacation however can be nightmare, especially when planning for a group of people. Differing personalities, interests, and many others can turn a group vacation from relaxing to stressful. Keeping communication amongst a group a people can be difficult as well.
How might we make group vacation planning easier for people?
Most other organizational applications for group travel are geared toward travel professionals such as travel agents. With group vacation becoming more popular, we saw a need to create an organizational application for the average person who likes to travel with others.
Trip’d is an application that allows users to create itineraries, add flight information and alerts as well as message others for each trip. Travel planners can create private groups travelers have access to create a unique experience.
The Problem
Planning a vacation for a group of people can be challenging especially organizing and keeping up with communication. There aren’t a lot of applications that cater toward the average user who may be planning a trip with family or friends that allow them to keep their travel planning organized and everyone in the loop.
Solution
Trip’d focuses on the average person looking to keep their travel planning organized so that everyone had access to the same information. No longer will emails, phone calls and text messages be lost for upcoming trips with friends and family. This application is simple, create the trip you want to plan, invite your friends, plan the itinerary and go. You can even look up flight information and message travelers on the go.
Research and Discovery
User Survey
Who?
For this survey we had 32 respondents who agreed to answer our questions, these respondents were of various backgrounds between the ages of 18-65 years old.
Where?
Due to the COVID-19 pandemic all respondents were gathered online using social media channels such as Facebook, Reddit and Slack.
Why?
We needed to find out what pain points respondents had when planning travel and methods used when planning.
User Stories
Utilizing the information and trends I saw with my results from the user survey, I created user stories highlighting a framework for the app. By dividing by priority, I was able to focus and hone in on the Minimum Viable Product requirements and separate the features that would be nice to have later down the line. Here the main areas of focus for the first version of the prototype would be account creation, communication, creating itineraries and adding flight information. These were the most important features amongst survey takers as well.
User Flows
Having MVP requirements in place, I created a few user flows to show how a user would accomplish each of the tasks for the prototype. I made sure to keep the flow simplistic within the constraints of the minimum requirements. Below are two examples of user flows I created for this project. Feel free to click the button below to see all the user flows for this project.
Wireframes and Sketches
Where did we go wrong here?
Can you spot which wireframe was created first? If you guess the sketches you are incorrect. Interesting thing about learning design, is that sometimes shortcuts do not pan out this is was one of those times. Because of the time constraints on this project, I decided to use use Balsamiq for wire framing rather than sketching first then using Balsamiq. This resulted in scope creep and losing focus of the main objective of this project. As you can see in Balsamiq wireframe, the second frame is entirely too long with too many things going on outside and beyond the MVP reqs and this was supposed to be a dashboard for a trip location. I saw that I was getting out of focus and decided to go back to the basics, sketches first. So I spent some time creating new screens as seen in the example, that seemed more simplistic and less daunting. Sketches allowed me to not get caught up in wording and more focused on layout and positioning.
Mid-Fidelity Wireframes
So after drawing out the screen sketches, I was able to create a wireframe that pretty much shows how I want the final mockup to look like. I made it a point to write in some text for this wireframe so that I can really see what the final product should look like.
High Fidelity Mockup
Here is the high fidelity mockup for this project. Here I added color, photos, icons and etc to show what the final product should look like. This is version I used to create my usability test too see if user’s can complete simple tasks such as booking a flight or creating a trip.