Odyssey

Role

UX/UI Designer

Timeline

3 months

Tools

Figma | Figjam | Miro

Project Type

Mobile Responsive

Odyssey is a travel website that helps you plan your trip from beginning to end. Traveling is always an experience whether it's traveling with friends, a partner, or solo. Finally arriving to your destination is always a relief but planning before that can be complicated. From trying to budget every aspect of the trip, too communicating with others, or trying to find what activities to do. As a planner you have a lot to coordinate and Odyssey is here to help.

Overview

Background

Design Process

Discover

The goal is to identify what the user finds most useful and less useful when planning a trip, in order to make the trip process as stress-free as possible. To achieve this goal, we will need to research information about the user's preferences, priorities, and pain points when it comes to trip planning.

Research Goal

Competitive Analysis

In selecting apps for competitive analysis, I focused on popular ones with useful tools and appealing interfaces. Wanderlog offers customizable itineraries, TripIt organizes travel information from confirmation emails, and Inspirock suggests personalized itineraries. However, Wanderlog can be overwhelming , TripIt may struggle with getting information from emails, and Inspirock's suggestions may not suit everyone's preferences.

  • All of interviews mentioned budgeting. It’s not easy to find good prices and having to use multiple websites to find them.

  • Another mention was coordinating with friends is always a stressful situation.

  • Transportation is the least of everyones concerns

Participants: 5 Age Range: 22-28 Location: Los Angeles, Pittsburgh

Interviews

Research of Travelers

8%

Research has revealed the amount of people traveling in 2023 vs 2022.

Travel less in 2023 vs. 2022

Travel more in 2023 vs. 2022

49%

Travel about the same in 2023 vs. 2022

38%

Source: Research conducted by Forbes

Define

Affinity Mapping

  • Food is the main activity that people plan for

  • Location is very important but also hard to find what’s a good and safe area if you’ve never been 

  • People use many different websites to plan their travels 

  • Most people take notes while planning

  • Texting is a main source of communicating information 

  • Transportation is the least concerning step 

Persona

HMW

HMW #1

How might we make it easier to calculate a budget?

  • Add a budget feature that can keep track of each item purchased

  • Calculator

Solution

HMW #2

How might we simplify the collaboration with others?

  • Chat feature

  • Add people to group chats

Solution

Ideate

I wanted to specifically know how users would approach creating a trip, using the explore page, and using the chat page. These insights will help us identify what the user finds most effective when planning a trip.

Task Flows

Wireframes

Next, I created frames of key screens to support the task flows. To achieve a cleaner and more organized outcome, I opted to create the lo-fi frames digitally.

Low Fidelity Wireframe

After receiving feedback from design critique, I made corrections to my midfi wireframe designs. I then took the next step and brought my task flows to life in order to see how they would function properly. I used a prototyping tool to create interactive mockups to test the usability of my designs. This helped me identify areas that needed improvement and refine the user experience. In addition to that, I gathered feedback from users to make sure that the designs were meeting their needs and preferences.

Mid Fidelity Wireframe

Design

I aimed for the website to have a calming feel with earth tones. Planning a trip can be stressful, so I want to make the process as easy and relaxing as possible. To achieve this, I incorporated soothing colors and a user-friendly interface.

Mood Board & UI Kit

After careful attention to detail, I was able to bring my high-fidelity wireframes to life. By incorporating visual elements, typography, and colors that reflect the brand's identity and messaging, designers can create an engaging and immersive experience for users.

High Fidelity Wireframe

Itinerary

Explore

Collections

Chat

Budget

Test

Number of Participants: 5

Age Range: 22-28

Location: In Person & Facetime

Usability Testing

  • Overall I anticipated for it to be more complicated for the testers (just because I get in my head) but for the most part it went pretty good.

  • The explore page seemed to be the most complicated because the collections section was combined with the explore page, so I will be iterating that and making the collections it’s own page.

  • Most testers were intrigued by the budget page and chat page

  • For the chat, testers thought it was a useful idea to be able to have all messages through the app because it's really helpful to use while planning a trip.

  • For the budget page, testers thought that was helpful especially being able to split with others from the group and having something to keep record

  • Some testers noticed that you could add other users to part of the trip but I feel like I could make that a little more obvious.

  • Each task was completed

  • Overall every user really liked the design, most thought it was aesthetically pleasing

Usability Testing Feedback

Iterations

Before

After

Iteration #1: Explore Page

A lot of the users didn’t completely understand the explore page because of the collections page. I then changed the explore page to its own page and moved the collections section in the updated version.

Iteration #2: Share Button

The add a member button wasn’t obvious enough for users to see. I then decided in the updated version to put a circle around it to have it stand out more.

Iteration #3: Collections Page

The collection section was on the explore page but that confused users. In the updated version I created the collections section to its own page.

Reflection

Understanding users opinions has been enlightening. Through user research and engaging conversations, I quickly realized that my initial assumptions weren't always accurate. For example, I thought transportation was more of a concern, but users prioritized finding good food and safe locations. Listening to feedback helped reshape the mobile website to better meet their needs and enhance their travel planning.