Introducing

Trip'd

Group trips more organized. More organization means more fun!

Project Type: Concept

My Role

UX Research

Information Architecture

Brand & Identity

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

Traveling with a group of people can be messy. Especially when you are the one planning it.

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. 

Trip'd Mockup

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.

Challenges Discovered

  • Travelers were frustrated with lack of organization and itinerary when going on group trips.
  • Communication among travelers within a group is difficult.
  • No central place of information for trip information, booking flights, etc.
  • Travelers were not able to customize aspects of their trip for their own interests.

Upon post qualitative analysis of the survey, I discovered that there is a desire for a group travel app, but user’s want one that’s organization and itinerary heavy. Potential users do not want a travel app that is feature heavy, but expressed a desire to connect and communicate with each other before and during the trip.

Competitive Analysis

tripit

Tripit is an app that allows users to organize their travel plans no matter where they book. Travelers can simply forward their flight, accommodation and other trip related confirmation emails and Tripit will create a master itinerary for you.

Potential Frustration:   

Users can share their itinerary but not share access to a group and no communication features are available at this time.

Travefy_Logo_Horizontal_(PNG)

Travefy is an app that helps users create itineraries for groups and allows for communication with travelers. Planners can configure their own travel plans to share with a click of a button.

Potential Frustration:

The app is geared toward professional travel agents and requires a paid subscription.

unnamed

Mobili is an app for group travelers that allows users to create a travel group. With this app, users can compare and view others travel details potentially making it easier to coordinate in a group.

Potential Frustration:

Many users commented that the app prone to stop working randomly.

Information Architecture

User Stories

Trip'd User Stories

Utilizing the information and trends I saw with my results from the user survey, I curated a list of 11 user stories, then prioritized the most essential ones that address the problem and users’ needs (e.g. creating a trip itinerary to better organize travel plans, communicating with other travelers etc.). 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 in future iterations.

User Personas

In order to keep the users’ needs in mind, it’s important to humanize the research thus far. Three distinct personas were created to reflect the data we collected this far as broadly and accurately as possible. 

User Flows

My user flows integrated high priority user stories and show how a user would accomplish each of the tasks imperative for testing the general functionality of the app. I made sure to keep the flow simplistic within the constraints the problem at hand and user needs from data we collected. 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

So now that we know how the app should work, what should it look like? Before we dive into this, here is where I learned a big lesson on shortcuts and finding your individual design processes.

And that's where things went left...

Can you spot which wireframe was created first? 

If you guess the sketches you are incorrect. Everyone has their own process when designing. Some people sketch with pen and paper and others use digital software instead. Because of the time constraints on this project, I decided to use Balsamiq for rough wire framing rather than pen and paper sketching first.

Results: Scope Creep & Loss of Focus

As you can see in Balsamiq rough wireframe, I got off track and went beyond what was needed as the dashboard for a trip location. Instead of a creating a basic layout, I spent too much time on details. I went back to look at my data, started from scratch and sketched with pen and paper.  This allowed me to focus on the basic visual structure rather than loads of text not needed at this point. 

It wasn’t all bad…

Using Balsamiq first, wasn’t an entire waste however, I still used some of those elements that along with my sketches to create mid fidelity wireframes. 

Mid-Fidelity Wireframes

MidwireframeTripd

Visual Design

Branding & Visual Design

While crafting user flows, I thought of possible brand names and settled on Trip’d. Group trips are fun, yet complicated and a little messy and I wanted to show how organization can be your friend when planning a trip with others. I went through quite a few iterations of a logo, but none of them seemed quite right. I wanted something that was simple, to the point and showcased what the app is about, so I chose to use the brand name only. Settling on using the brand name rather than a symbol for a logo, allowed me to show my targeted audience what the app is about, without any confusion.

TripdColors

Colors

I chose blue tones for the majority of the app because I wanted to convey a sense of calmness, stability and reliability. As I said before, traveling can be hectic, plus highly dependent on information, so I wanted the color scheme to be unobtrusive and distracting. The shades of grey for text, menus and buttons give a sense of balance and readability. Bright colors such as green and red are used to be notified (trip payment, new messages) or give notification (tell car service of arrival, checking into a hotel). 

Typography

Typography

Because this app has the potential to be used by a large breadth of users, I wanted to keep the type simple and easy to read. Also since the first iteration of the design used IOS design elements, I used SF Pro Display for all of the text in the application. The logo, technically the name of the brand, I used Poppins because of the geometric aspect and balance it shows. 

High Fidelity Mockup

Group Photo

Now let’s see what this looks like with some color! I took my branding guide, applied it to my wireframes to create the first iteration of Trip’d. I tested a mobile prototype for feedback. Overall, users enjoyed the look and feel of the app. 

Prototyping & Testing

Usability Testing

I used Maze to test three main tasks: creating a trip, booking a flight and sending a message. I was able to secure 4 testers for these tasks and facilitated this testing remotely using Maze and Zoom because of COVID-19. Maze allowed me to work around the tester’s schedules and allow them to complete the tasks on their own time. Using Maze also allowed me to easily separate tasks and ask relevant questions for each of them.

Each of the participants were asked to complete a few tasks which were creating a trip, booking a flight, responding to a message and navigating back to the itinerary dashboard. Out of those 4 tasks, 1 was rated as easiest to complete and had a completion rate of 6.5 seconds. While the other 3 tasks took participants a lot longer and were commented to be much more difficult to complete. Those 3 were: Booking a flight; Navigating back to your itinerary dashboard; Creating a trip.

As you can see, most of the clicks were in the middle of the area, not the chevron off to the right. This leads to the assumption that the user may think the entire area is clickable rather than just the chevron icon. 

These findings along with others, led to the latest iteration of Trip’d.

Reflections

Designing for a large yet niche subset was a bit tricky. It’s easy to get caught up in focusing on cool features and losing focus on user needs. In hindsight, designing for group traveling made sense because it is a sub-sect that isn’t thought about very closely unless it’s dealing with a travel agent. Very little attention is paid to those groups who are a family planning a trip on their own or a group of friends planning a vacation. Not everyone uses a travel agent for these kinds of trips. 

What I would change…

There is plenty of room for improvement and expansion to include other user stories and important elements to this project. If I had more time, I would focus a little more on usability testing to see what the limits are for user’s going through a step by step process. I’d also add alerts and entry and exit information so that travelers can be aware of important information that they need to know such as a flight getting cancelled or having to have a particular vaccine to enter a different country. As it stands now, Trip’d accomplished it’s goal of helping group travelers and planners get organized and connected with each other offering a simple, reliable way creating adventurous memories for the future.

What I learned…

While working on this project, I learned more about my design process. From making the mistake of creating digital wireframes first before sketching on pen and paper to seeing the feedback from usability testing, I now know how easily it is to lose focus on project but learned how to get it back on track for a successful product. As I continue to learn more and grow in design, there are going to be bumps along the road, the most important part to gather what you can learn from it and how to overcome it.

"Have no fear of perfection -- you’ll never reach it." -- Salvador Dali​