Overview

The Bootcamp Prompt: Build a modern-day mobile app that helps people plan their next trip, post-pandemic

The Problem: Campers traveling in groups often have a difficult time remembering the right equipment to pack in order to be prepared for the unknowns associated with traveling to new destinations. Forgetting crucial camping equipment can cause groups of campers to be under-prepared for their camping trips, putting them in dangerous situations.

The Solution: TrailBlazer offers an easier way coordinate by automatically generating a packing list based on location, timeframe, and activities. Users can add, remove, and assign packing list items to group members to ensure they are not forgotten.

Research & Definition

In order to understand how our users plan their camping trips, I conducted a survey as well as 6 user interviews.

I had 3 major objectives for this research:

1. Understand the current process that our users go through when planning camping/backpacking trips.

2. Understand which factors are most important to our users when planning camping/backpacking trips.

3. Understand how our users feel when planning camping/backpacking trips

User Survey

Tools: Google Forms

Participant Requirements: Participants must have been on and planned for a camping trip before

Sample Size: 25

Results and Findings:

18/25 Survey participants stated that Scenery was the most important factor when selecting a destination
24/25 of participants stated that they go camping in a group
13/25 of participants stated that they use a digital packing-list when planning a camping trip
When asked “what scares you about going camping?” the most common response by far was “not being prepared”
19/25 responses mentioned packing as the most important thing to get right when planning for a camping trip

After reviewing these findings, I hypothesized that our potential users usually go camping in groups, they want to feel prepared for their camping trips especially if they are traveling to a novel destination, and packing lists are an important tool for our users to optimally pack for their camping trips.

Now that I had gained an understanding of the what our users go through, how they feel, and which factors are most important to them when planning a camping trip, I needed to better understand how this process could be improved, and what our users’ current pain-points are.

User Interviews

Tools: Google Forms

Participant Requirements: Participants must have been on and planned for a camping trip before

Format: Remote and In-person | Semi Structured | Generative

Sample Size: 6

Average Interview Length: ~20 mins

I synthesized the insights recorded in the user interviews using an affinity diagram to group common responses and identify greater themes among the 6 interviewees.

Before:

An Affinity diagram showing 6 different categories of sticky notes sorted by color. The color aligns with each interviewee and their feedback.

After:

An affinity diagram with sticky notes sorted into categories which represent the major themes outlined by user insights.

Insights and Direct Quotes:

In order to visualize the user who embodies the insights I gathered from both the user survey and the 6 user interviews, I created the following user persona.

User Persona:

The Problem:

Campers traveling in groups often have a difficult time remembering the right equipment to pack in order to be prepared for the unknowns associated with traveling to new destinations. Forgetting crucial camping equipment can cause groups of campers to be under-prepared for their camping trips, putting them in dangerous situations.

How might we help campers to better coordinate with their groups in order to remember all of the crucial equipment they need so that they feel safe and prepared during their camping trips?

Competitive Analysis:

Prototyping

Based off of the user journey outlined above, I created the following user flow diagram in order to map out how our users will be interacting with the final solution.

Onboarding Flow:

A user flow diagram describing how the sigh up and onboarding process will work for the TrailBlazer App

Smart Packing List Flow:

A user flow diagram describing how the user will interact with the "Smart Packing List Feature"

Using the user flows above I then made some initial sketches...

Sketches:

I then created a low fidelity prototype within figma in order to test the initial user flow and UI design.

Low-fi Prototype:

Three lofi prototype mockups made in figma showing the trips page, the packing list page, and the assign item modal within the packing list page.

Testing & Iterating

Usability Testing

My main objective for performing user testing on the Low-fi prototype was to address any issues that our users had while interacting with the app solution before I put time into creating high fidelity design.

Tools: Zoom, Figma

Participants: 4

Tasks:

1. Sign up and continue through onboarding, end on the main page 100% Success Rate

2. Create a trip and navigate to the packing list feature 100% Success Rate

3. Add an item to the packing list and assign a group member that item by tagging them. 75% Success Rate

Key Take Aways:

3 of 5 participants were confused by the icon used to “tag” or assign items to group members

All 5 participants found the “edit” button for the packing list too small and hard to find

“Shouldn’t group items go to the individual packing list once assigned?”

Final Mockup

Color Palette:

The color palette for the TrailBlazer App was chosen based off of the colors of the tents and equipment that I personally use when camping. I chose these colors specifically in order to connect my app solution with our user’s current mental model for camping trip packing. The colors were also chosen because, after some adjustments, the most heavily use color combinations contrast enough to pass the WCAG AAA standards for accessibility.

Typography:

H1 - Work Sans Bold 25 px

H2 - Work Sans Bold 20 px

H3 - Work Sans Bold 16 px

P1 - Poppins Regular 16 px

P2 - Poppins Regular 12 px

P3 - Poppins Regular 10 px

P1 - Poppins Italic 16 px

P2 - Poppins Italic 12 px

P3 - Poppins Italic 10 px

A screenshot of Adobe Color with an image of two tents in the forest. Adobe color has identified 4 different colors which are now included in the TrailBlazer color palette.

Style Guide & Components:

A collage of many different design components that are included in the final version of the TrailBlazer App.

Final Wireframe:

10 iPhone mockups depicting the final hifi prototype screens of the TrailBlazer App

Before:

A lofi mockup of the trailblazer packing list page

After:

An iPhone mockup showing the hifi version of the TrailBlazer Packing List Page.

The “edit” button in the original prototype was initially too small, so I removed it entirely and added a “swipe” feature to all of the packing list items. This adjustment allows users to more easily remove or assign items from their packing list

Before:

An iPhone mockup of the edit screen within the TrailBlazer Packing List Page.

After:

An iPhone Mockup showing the hifi categorized version of the TrailBlazer Packing LIst Page

In my usability testing, users expected unassigned group items to appear in their individual packing lists once assigned. To accommodate this, I created categories including “unassigned group items” in order to both align the packing list’s functions to user expectations, as well as make the list more digestible to read through.

Final Prototype:

Results

What would I have done differently given more time and resources?

I would have researched the step-by-step "current" user journey in addition to asking about pain points. If I had recorded their current journey, I would have been able to compare the before/after user journey to better showcase the impact of TrailBlazer as a solution.
Because this was a prompt for a Bootcamp project, a mobile app design was the pre-determined solution assigned to me. In the future, I’d like to spend more time in the ideation phase to determine the best-fitting solution whether it’s an app, a physical solution, or a process improvement.
If given more time and resources, I would have liked to build out more app features to make the app feel more complete. Because I had limited time, I focused exclusively on the “shared packing-list” feature.
If given more resources, I would have found a greater number of user survey participants in order to achieve a larger sample size.
If given more time and resources, I would have coded the app and allowed users to test the fully functioning prototype so that I could showcase the benefit that this solution offers for our users.

Key Takeaways:

As my first ever UX design case study, I am proud of how I implemented the double-diamond design method in order to create an app prototype which solves our users’ pain-points.
Throughout the design process, I learned the importance of sketching low fidelity mockups and building out a detailed user flow in order to make the high fidelity design process easier.
Because this was a conceptual project that I completed part-time on top of my full-time job, it was very difficult at first to manage my time. I learned to fight scope-creep and prioritize the essential parts of the case study. I’m happy with both the quantity and quality of the work that I was able to complete during the timeframe I was allotted.

More Case Studies

Cart & Checkout

UX Design | UX Research | Clickable Prototyping

An evaluation of the Best Buy Cart & Checkout redesign in collaboration with Best Buy UX Research

Buy Now

UX Design | UX Research

An evaluation of the Best Buy “Buy Now” checkout redesign in collaboration with Best Buy UX Design/Research

TrailBlazer

More Case Studies

Cart & Checkout

Buy Now

Say Hello