TrailMix Case Study

A mobile app with all the essential pieces
of your camp trip packed together

Mobile App UX Design Challenge

Overview

Project Background:
This project was part of the UX/UI Bootcamp at Rice University and the challenge task was for different groups to design a mobile app while applying the full UX design process.
Our team tackled the design of a camping mobile app that encourages the campers to fully engage in outdoor activities as they communicate with fellow campmates for socialization and to solve common pain points of campers.

Team Member:
Akhil S, Helena F, and Maho S

Tools Used:
Adobe XD, Miro Board, Google (Docs, Spreadsheet, Form, Meet), Zoom, InVision

User Research

Proto Persona

Our team created a starter proto persona. We hypothesized our main users to be someone in their late 20s, not making a lot of money, but loves nature and have immensely enjoyed the few camping experiences that they’ve had.

Interview Survey

Then we interviewed 5 people and also conducted an online Google form survey to gather the voices of real campers.

The main takeaways:

Users want to connect with friends and nature, and disconnect from the daily lives while camping.

Users are worried about not being prepared enough, getting lost at the campsite, having a plan B for unexpected weathers, and potentially dangerous wildlife encounters.

Affinity Diagram

Then we generated an affinity diagram using the interview and survey results to better categorize our users’ motivations and pain points. This process really helped us take our first big step to understand and empathize with our users.

Empathy Map

From the affinity diagram, we synthesized the empathy map to further humanize our user. Here, our team wanted to make sure that this collective voices of our users become consistent opinions of a believable user persona. It helped to have three on a team to be each others’ spotter in making sure the generated voice was consistent.

Competitor Analysis

We didn’t forget to do the competitor analysis! For our direct competitors (as in camping apps), we analyzed The Dyrt, Campendium, and Hipcamp. For indirect competitors, we looked at apps that had the same functionality as our app would potentially have, for familiar UIs for our potential users. We studied AllTrails (nature, community enrichment app), Google Docs (collaboration work) and REI (equipment prep for campers)

Definition

User Persona

Meet Chipper Oakmill (26). He is our user persona derived from the research and empathy phase above. He embodies the voices of the users that we heard from, and is a friendly graduate student who loves to hang out with his friends. Our team found him VERY likable and relatable. We root for his happiness, really.

User Insight

TrailMix Team synthesized the user insight based on our analysis of Chipper Oakmill.

Tap card to flip!

When camping, users want to

  1. Spend quality time with their friends
  2. Disconnect from the “real world”
  3. Engage in outdoor activities within the park.

Their main conerns are

  1. Having to hop between (and know about) different apps for planning, prepping, navigating, communicating, and journaling throughout the camping experience.
  2. Worried about getting lost, equipment malfunction, not finding bathrooms, dangerous wildlife encounters.

Tap card to flip!

User Hypothesis

Our team then generated the user hypothesis based on the user insight. The insight and the hypothesis will be the building block for our problem statement.

Tap card to flip!

Campers, when equipped with an app that helps them engage in outdoor activities and spend quality time with loved ones while not having to worry about getting lost with each other, miscommunications, and feeling unprepared, will have a higher satisfaction about the camping trip and will likely be more motivated for the future camping trips.

Tap card to flip!

TrailMix was designed to tackle the needs of campers of all levels. Campers need to disconnect from their busy lives, and enjoy camping experience with friends and family to its fullest potential. We have observed that there are too many different channels of camping related information, overwhelming potential campers. The lack of a single platform addressing all camping needs, from planning, group coordination (before and at the camp), learning about safety procedures, prepping equipments, deciding on what to do upon arrival, is resulting in potential campers to shy away from camping or decrease in overall satisfaction and excitement for camping. With TrailMix, we intend to address these issues , by offering a seamless camping experience from prepping to on-site activity decision making - all within one app - so that users can fully focus on their camping experience.

Problem Statement

Short Version: TrailMix was designed to tackle campers’ need to disconnect from their busy lives, and enjoy camping with friends and family to its fullest potential. Offering a seamless camping experience from prepping to on-site activity decision making with friends, TrailMix addresses user pain points like getting lost, miscommunications among campmates and potential wildlife encounters.

TrailMix - All the essential pieces of your camp trip packed together

(value proposition statement)

Ideation

Brainstorming

We’ve defined the the in-depth user needs and problems, what’s next? Time to brain storm features to address the issues our team has analyzed. We used the I wish, I like, What if brainstorming method and voted on our results.

Feature Prioritization

Team TrailMix had so many brilliant ideas, but we slimmed them down to our top-priorities (so that we could meet our project deadlines - very real life). We used the MoSCoW prioritization matrix here.

After feature prioritization, our team decided to put our
main

focus on the Live Map feature, that would allow
campers to
tag
wildlife, activities and their location for
smooth
communication
and coordination of activities.

Storyboard

Our team then created a storyboard from a user scenario of Chipper effectively using the app while camping.

Prototyping

Task Flow

Here are the task flows our team decided to include in the first round of our TrailMix LiveMap prototype.

The main flows are as follows:

  1. User browses the Live Map to see what is going on around the campsite.
  2. (BONUS) User looks for where his friend is and joins.
  3. User adds a pin on the Live Map for something cool he found or for an activity he's engaged in.

User Flow

We iterated through user flows to make sure all flows were connected seamlessly.

Wireframing

Each of the team members came up with the wireframes for the flows above. We then did user testing among ourselves and friends to understand and consolidate our designs.

Testing & Iterations

Testing

Our team recruited testers online, and conducted user testing with inVision’s prototype sharing and various online meeting tools.
The most popular response we observed was the users having trouble finding the “Add Pin” button when prompted to add something to the map. Another vastly unpopular design was how we categorized our pins. See below for how we improved our designs.

Iteration Highlights

Based on the tester feedback, we iterated our designs.

  1. Menu item position and text
    Main action menu button centered on the map rather than on right side, and add texts to menu buttons for clarity.
  2. Pin categories and coloring
    The wording of “Organics” indicating pins that represent animals, plants and fungi was awkward. We separated it into “Animals” and “Plants & Fungi” instead, and recolored the pins.

Final Prototype Demo

Here are the demo walkthroughs of our final TrailMix app Live Map prototype.

Or, you can play around for yourself.

Conclusion

Challenges

Biggest challenge Team TrailMix faced was the fact we just had too many creative ideas flowing ALL the time. We really had to frequently refer back to our user insight and empathy map to stop ourselves from getting too creative and adding random features. We also wished we had more time to design the full mobile app, and not just the Live Map feature.

Take aways

Creating the task flow really helped in detangling our thoughts for the user flow generation. The whole team will remember this throughout our careers when we need to create user flow diagrams.

Next Steps

As mentioned in the challenges section, we’d love to add more user flows and features to the app. We originally had a huge vision of this app being a planning app as well to get equipments ready for a camping trip, but we had to toss that in the prioritization step. It would be really cool to work on that feature next.

Who wrote this?
author photo

Maho S

Web developer, UX/UI designer with formal training in music therapy and classical piano performance.

View this case study's code
Visit Maho's Portfolio

All Right Reserved, 2020