WanderPlan

A collaborative space to create the reality of where users wish to wander

PROJECT OVERVIEW

Integration icon

Duration

4 weeks
Integration icon

Tools

Figma
Whimsical
Miro
Excel
Integration icon

Type

Mobile Application
Integration icon

Focus

Lifestyle, Travel
Integration icon

Role

UI/UX Designer
Project Background

Trip Planning

Planning a trip for oneself or a family/group takes into account of many different factors. These factors are the type of trip, activities, transportation, and costs. All of which relate back to whether the budget allows for the desired experience. There are various logistics in planning a trip but being aware of the amount of financial liberty a traveler has, helps to alleviate a big part of the trip planning stress.

Problem

Planning a trip, of any type, can be difficult financially when trying to constantly be mindful of staying within budget.

Goal

We want to know what has priority on a trip so that we can help people stay within budget to bring the desired trip into reality.

Objectives
  • Determine what goal can by accomplished by having a budget
  • Understand how sticking to an itinerary fits into daily life
  • Uncover pain points when planning a trip

SCOPE OF WORK AND RESPONSIBILITY

Research

I conducted competitive analysis and user surveys to understand features to consider and created personas to target user problems.

Ideate

After gathering information, I ideated solutions and produced interaction designs to visualize the flow.

UI Design

I incorporated icons and visuals that are pertinent in expressing the brand in a cohesive design.

Test

The prototypes are created to showcase the solution followed by usability study to refine and strengthen the prototype.

Research

Market Research

Travel Expenditures

Let's take a look at what goes into the budget when traveling. Below are the average costs traveling in 2022.

In the times of soaring inflation, the average cost of trips or vacations can be expensive. As shown above, the costs may be more or less depending on what activities travelers partake in and the type of trip they want to have, whether it be a relaxed or luxurious one. In most cases, housing and transportation take a big chunk out of vacation savings.

The average cost for a 1-week vacation for one person is $1,578.
User Research

Understanding the Problem

Participants consist of people who have planned or traveled for a trip within the last 6 months and have set a budget before. Planning can be financially difficult and we want to assess how people approach planning with a budget.

Duration

~25 minutes

Type

Survey

Participants

7

Research Question Topics

  • Setting a budget
  • Travel frequency
  • How likely users stick to a budget generally
  • How likely to increase spending with more people
Participants Interview

Results

The results were surprising given that 71.4% of participants do not set a budget when traveling. Of that percentage, they could also possibly fall within the category of traveling once every 3-6 months. Although not everyone places budget of high importance, to the remainder of the participants, it still plays a key factor in trip planning.

Additional Observations

  • Participants took into consideration of occasion, destination, deals, and group preferences equally or more than the budget.

  • With more people, the budget is larger for group activities compared to a solo trip. 100% of participants support the idea of increasing their budget within a group

Competitive Analysis

What is on the market?

Before diving into creating the elements and functionalities of the application, I conducted a competitive analysis of what the market is offering. Below are 4 different applications that are travel agencies in the service of trip planning. Upon completing the research of options available, there are characteristics that I envisioned as opportunities for my application.

Highlights & Opportunities

  • Display current and past itineraries
  • Offer collaboration feature with other users
  • Include budget adjustment to assist with planning
POVs and HMWs

Empathizing with the user

Travelers ages 20-35 with financial constraints want to spend knowledgeably because they are mindful about their spending budgets.
How might we raise mindfulness about a traveler's spending habits?
Travelers ages 20-35 want to request responsiveness among the group because they are concerned about the planning when consensus is difficult to reach.
How might we encourage responsiveness in a group conversation?
Travelers ages 20-35, especially with financial constraints, want to maximize the activities and spending for a trip because they are concerned about optimizing their experience at the destination.
How might we optimize a traveler’s experience at a destination?

Goal:

Design a trip planning app that allows for collaboration

Ideate

Feature Roadmap

Navigating the Path

Relevant features were identified through competitor analysis and secondary research. Aside from the typical pages, the similar pages as competitors are produced to create a familiar sense as a user is browsing and comparing their options.

Sitemap

There are multiple navigational sections when mapping out the trajectory of the app. The main categories were obtained through a card sort to identify where the navigation is most suitable on the page.

This is the initial stage of what the sitemap entails, which led to the main path being focused on the steps to plan a trip through collaboration.

User Flow

The flow goes from the home page through the steps of logging in to create an itinerary, through the process of inviting collaborators, and showing the completed itinerary in the upcoming list
.

Task Flows

There are 3 task flows that will get the user through the experience of creating a video time capsule - Entering trip details including adjusting the budget, inputting schedule, and inviting collaboratos.
Ideation

Ink to Screen

Sketches

Dashboard mockup

The homepage captures the ideation from homepage layouts to itineraries list through the schedule. The inspiration is from other itinerary creation apps to enhance readily available features for users when planning for a trip.

Low-Fidelity Wireframes

Next, time to refine, organize, and assemble.

Dashboard mockup

Highlights & Opportunities

  • Display upcoming and draft itineraries
  • Show comparison of budget vs. remaining budget
  • Provide confirmation to users when invites are successfully sent

UI Design

UI Kit

Creating the Brand

The color palette was curated to create the impression of calmness and serenity. Additionally, the typography supplements the app in terms of simplicity and clarity. Components and icons were explored to ensure the relativity towards the brand design. The two "Create" and "Packing list" icons were custom designed to match the aesthetics of the icon set. Lastly, I wanted to capture the essence of travel. The desktop logo has a plane to indicate the path of travel as one goes from place to place.

High-Fidelity Wireframes and Prototype

Compiling Elements Together

Test

Usability Study

Identifying Challenges

A usability study was conducted with participants within LA county who have planned an itinerary before. This includes full-time and part-time workers and students.

Duration

~15 minutes

Type

Unmoderated

Participants

5

Research Objective:

We’re creating a new app to help people invite their friends to create an itinerary together. Before launching, we need to figure out if inviting collaborators and setting a budget is easy for users to do. We’d like to understand what specific challenges or needs users might face in the creating process and how to resolve issues identified.

Research Goal:

Figure out if users can complete the core tasks within the app.

Research Questions:

  • What can we learn from the steps that users take to invite other collaborators?
  • Are there any parts where users are getting stuck?
  • When and where do you think someone would use the app?

Tasks:

  • Input trip details along with adjusting budget
  • Invite collaborators
  • Send invites
Affinity map

Results

There were more updates needed than expected. The areas that require improvement to enhance effective functionality are intuitiveness on CTA button, guidance on form requirements, and visual elements.

Dashboard mockup

P1 Updates:

• Indicate required fields when creating itinerary details
• Allow users to confirm email addresses before sending
• Update military time on home page to digital time font
• Indicate location instead of airport on details screen
• second point of entry for creating itinerary

P2 Updates:

• Darker text on dashboard
• Update temperature accuracy

P3 Updates:

• Offer location change on weather details

1/5

Participant expected a confirmation before sending invites

3/5

Participants clicked on the “create” icon in the navigation bar first

5/5

Participants successfully adjusted the budget
Iterations based on Usability study

Revisions

Dashboard mockup
• Updated military time with digital font
• Made grey font color more prominent
• Mapped the “Create” button in the navigation bar
• Updated temperature
Dashboard mockup
• Set default for Date
• Updated destination to location search instead of airport
• Added required fields with asterisk
• Disabled “next” button until form requirements are met
Dashboard mockup
• Added headers for email and accessibility
• included subscription plan detail on the bottom of screen
Dashboard mockup

• Added invites confirmation screen

High-Fidelity Prototype With Responsive Web Design

Final Prototypes

Finishing Touches

Create itinerary for 3 friends going from LA to Portland on 11/3 - 11/7 on a budget
Enter itinerary schedule details
Invite collaborators

Reflection

In Closing

What I've Learned

Detachment

Being the designer I was able to identify flaws and other small nuances in the design. Perfection is equally attainable and unattainable. I have learned to detach from my project when I have put in the effort to make it as presentable and user-friendly as possible. I have learned to trust the process in allowing research participants provide a different perspective on what areas of improvement the design needs because ultimately it is intended for them.

Identifying Patterns

From one app to another there are many similarity and patterns that can be compared. I revised and focused on existing design patterns to maintain the modern features of the app. This is crucial to keeping up and staying competitive in the market to better cater towards target audiences.

Next Steps

Packing List

Provide a list of packing checklist essentials for national travel and international travels. These can be preset or individually created for their own customization.

Interactive Map

Offer an interactive map for users to view or inspire what location to travel to next.

Travel Guides

As a business goal, members can have access to exclusive travel guides for planning their next trip.

Thank you for your time in reading through this case study!