TripWand

Experience Design UI Design Brand Identity Graphic & Digital Design

Timeline

3 months

Roles

UX Designer UI Designer Visual Designer Brand Designer

Deliverables

Information Architecture Wireframes Style Guide Interactive Prototypes Interface Design User Testing

Overview

I set out to design an app where users can coordinate, customize, and manage their trips or travel plans. Users can share their trip will fellow travelers and use the app to organize all the trip details in one place.

Process

User Research

I wanted to learn more about the steps and considerations users make when planning a trip for themselves or a group, and about any pain points that stem from coordinating a trip.

I then conducted 4 interviews with mobile users between the ages of 25-50 who coordinate trips for work, themselves, or family. I synthesized the information gained using common UX deliverables such as affinity mapping, persona development, and journey mapping.

User Interview & Affinty Mapping Findings

People plan their vacations based on how much time they have available. After knowing how long they're taking off, they then choose a destination. People will plan and choose activities based on the type of trip and group they are traveling with. They search the web for things to do before traveling.

People tend to feel overwhelmed when planning a trip because of all of the things they have to do to prepare and what they need to keep track of. People choose transportation options by area and time of the trip. The users I interviewed were more likely to fly than drive to save time over money.

Competitor Research

I conducted competitor research on similar trip management products to learn more about their solutions and treatment of trip planning.

Results

Short setup process to get the user into the product as soon as possible.

Make anything not unnecessary optional.

Leveraging interests and group types to suggest activities.

Ideation

Wireframes and User Flow

Once I felt I had a good grasp on the pain points and goals of potential users, I took to wireframing some solutions using UI patterns and started to develop ideas that would help inspire features.

The primary task of the app would be to create a trip to customize and share. The first wire flow of the app would be the trip creation process so we can start to build and gather the foundation of a trip: destination, time frame, travelers, group type, and activities/interests of the travelers. By defining this first we're able to expand and suggest tasks to help users plan and coordinate.

Prototype and Initial Usability Testing

I used my wireframes to create a low-fidelity prototype and started gathering feedback through usability testing. See the image below for my inital concepts for the task of creating a trip.

During usability testing I found users were interested in sharing and collaborating on trip planning with others, and suggesting tasks based on location or interests.

Branding & Design

Thoughts on the Logo

I wanted a clean logo that would look good while small in the banner at the top of the page. I incorporated the wand to dress up the wordmark and add a little personality.

Style Guide

I created a style guide using the text treatment, colors, and components from my prototypes. I referenced best practices in UI design to choose my color palette.

High Fidelity Prototype

Considerations and changes made between the low and high-fidelity phases through user testing or feedback:

Bottom Navigation becoming trip specific and creating a fly-out menu.

Side-scrolling navigation from the trip screen to get to the feature sections.

Testing with Maze

After putting together the high-fidelity prototype, I wanted to test the app's design again. I used Maze to test the trip creation flow. The most important insights came from these 3 screens:

Landing Screen

Too many users went to “View All” Notifications instead of creating a trip from the landing screen after log in.

Users were jumping into the trip that was already created on this screen instead of creating a new trip.

Trip Dashboard

The dashboard page interaction was quite scattered, but I noticed that there were touches at the edges of the scrolling nav on the page and the activity menu in the upper right corner. The navigation on this page seems to be intuitive.

There were multiple touches on the Add Activities suggested task which was the preferred flow.

Activity Screen

Users were drawn to the tabs to explore the additional details which was great insight for the local navigation.

The “Add to Schedule” button is too big and hogs the attention from the smaller favorite button. I predict that favoriting and adding to the schedule will both be common, therefore I would like to treat the size similarly and test once additional features have been defined. Adding a label to the favorite button could help too.