Challenge: As parents of young children, we’re always wanting our kids to put down their electronic devices and enjoy the great outdoors. I remember riding my bike around the neighborhood after school and not returning until it was dinner time.
Whether you’re hiking or biking, being outside and enjoying the thousands of trails that southern California has to offer can be overwhelming. It takes a little bit of planning to venture out, especially with young children.
Solution: This app will give parents opportunities to find trails near them, whether they’re looking for a 30 minute hike or a nice scenic bike trail, within their neighborhood, or even to a certain further destination. Keeping in mind that with young children, we can’t just get up and go. This app will address some of the amenities that parents seek when venturing outdoors; for example, restrooms, rest areas, water fountains, as well as the difficulty and length of the trails.
Screener Survey: The screener survey was implemented to find out which users like outdoor activities. It was sent out to about 30 people. Highlighted below were those users that said they enjoy outdoor activities. Then I took the respondents who enjoyed hiking and biking and conducted interviews.
The top 4 amenities that were important to parents were convenient parking, restrooms, rest stops, and water fountains.
I conducted interviews with those respondents that liked to go hiking and biking and tried to understand how they were searching for trails. Where they started searching and what kinds of information they wanted to have before venturing out. All the parents that I interviewed started with a google search. It was the quickest and accessible place to start. They didn’t have time to research for a long period of time so they all looked for a quick and easy site to find trails near them. They also turned to yelp, for the reviews, and alltrails and even facebook. Yelp and Alltrails were chosen because of the feedback and ratings that were provided by others. And facebook was utilized for recommendations.
Competitive Analysis:
For my competitive analysis I researched three apps that were most similar to the app that I wanted to create.
I evaluated these three competitors by focusing on 4 of the 10 Nielsen Norman Group’s Usability Heuristics for User Interface Design:
· Visibility of system status
· Match between system and the real world
· Consistency and standards
· Aesthetic and minimalist design
Empathy Mapping & Personas:
To get an understanding of the user, I created 2 personas based on the surveys and the interviews.
Oakley is the mom that likes to take it easy, doesn’t usually plan a huge excursion, is not always posting on social media and kind of plans as she goes. She wants to search easily for a trail near her that can be a quick outing for just her and her immediate family.
Tatum is a mom that likes to plan big excursions, especially with other families. She and her husband were avid hikers before kids, so they enjoy being in the outdoors. Searching for a trail thats scenic as well as short enough for the kids to do and enjoy is important to her.
MVP & User Stories:
Based on the research and insights gained about the users and competitor apps, the next step was to dive into the user stories to develop a Minimum Viable Product (MVP) with just the required key features.
User Stories were created around:
· User Registration/Creating a profile
· Recording a trail and saving it and/or sending it to a friend/social media
· Rating the trail
So how can I create a simple, easy to use app to find a hiking or biking trail with the amenities that parents are looking for?
Content Strategy:
Card Sort
After the basic features of the app were determined, the next step was to create a flow that the user could understand and navigate. In a card sorting activity, using OptimalSort, potential users were asked to organize the user tasks into categories which made the most sense to them.
I had 8 respondents complete the card sort.
First off, the profile information, recording, saving a trail, sharing a trail, checklist all seemed to have similar categories. The biggest differences were in how people were categorizing the searches and details of the trails itself.
A lot of the trail searches and trail information seemed to get grouped into categories such as search, trail details, amenities, trail traits, hike details, trail searching, and trail specifics.
A couple respondents categorized anything to do with trails as a search filter or ‘trail searching’ which made me realize that the filter and sorting feature would make sense and was easy for parents to find what they were looking for.
One respondent actually categorized the checklist as ‘not sure how to classify’ so I decided the checklist feature was not necessary at all.
The analysis I came up with is shown below, following my sketch of the sitemap and the sitemap created using draw.io.
From here, the sitemap was created utilizing the card sorting process
User Flows:
I created 3 scenarios below that my personas would likely be doing on the mobile app. I started with paper and pencil and after a couple iterations I created the flows in UX pin.
1. Finding a hiking or biking trek
2. Recording a trek
3. Saving a trek for a later time
Sketching and Wireframing:
By sketching out my ideas freehand with low-fidelity drawings, I was able to get a rough idea of how the user would navigate through the app. By sketching, I can quickly see potential screen layouts, navigation, dashboard and overall structure. It also allowed me to get quick feedback and validation.
User 1- Search for a moderate biking trail
User 2- Utilize the featured trek and record
User 3- Access a trek to send to a friend
Prototyping and Usability testing:
I created a clickable interactive prototype for user testing using UXpin from my user flows that my personas would most likely be doing in the app, I wanted users to:
1. Search for a moderate biking trail in Fullerton, CA
2. Record a trek
3. Utilize a featured trek or search a trek and then save it for a later time
The overall experience of sketching, wireframing and then creating a prototyping tool allowed me to check and adjust. Its funny how as a designer, I just want to get in and start doing things on the computer, but this unit really made me reflect on how important processes can be. Sketching and wire-framing really opened up my eyes to the user and how they would go about the app. It was such a great way to experience what they would experience, and the pitfalls that they may have.
Findings: I think overall, all the users were able to navigate through the tasks without confusion. Doing this research allowed me to apply better user functions to the app. The process of searching can vary person to person, but it made sense to all of them. Task 2 (Record a trek) was the most seamless. Task 3 (Utilize a featured trek or search a trek and then save it for a later time) was almost seamless, except for the favorites icon confusion which was a subjective visual. All in all, I felt that the insights really validated the ease of use of the app. The functions of the app were seamless to each of the users. One of the users mentioned a feature in the filter where the results would be displayed with the list of the features applied right above the search results. I thought it was a great addition to the functionality of the filter.
Check out the prototypes here:
https://preview.uxpin.com/b7cd543144b5cac0d4942a470c3cabdb8beae516
https://preview.uxpin.com/f6f895368c4ba60cd816a4f5c77b0f0206a37583
https://preview.uxpin.com/dab3fe304988be6059dbfad047709abe53597012
Visual Design:
The direction of juniortrek is modern, fun and clean.
The color palette is based on earthy greens with white and a touch of the orange to compliment. It radiates nature and the great outdoors.
I chose the font OpenSans because the typography looks clean and simple and has many variations to play with. Its also easy to read at a small size.
Below is the style guide as a foundation for design consistency:
Conclusion:
Throughout my user-centered design process journey, I learned so much about gaining empathy for the user and understanding their motivations, goals and desires. Having a deep level of understanding of the human emotion and behaviors and finding out why these things are so important to them has helped me advance my knowledge even as a graphic designer.
I really enjoyed the visual design process and learning to use UXPin to build wireframes and create a low fidelity prototype for user testing. I believe that human centered design has the power to improve lives. Sometimes, being a designer isn’t just about making things look nice, but its about going out there and doing the research and analysis to find the solution. Thats what makes a UX designer.
Juniortrek is a UX/UI design project for the Springboard UX Design Course. The assignment was to utilize all the design skills and tools we learned to design a mobile app. I chose to create a family friendly hiking and biking app based on my experience as a mother and an avid mountain biker. My role was the Researcher, UX Designer and UI Designer.
Thank you for taking the time to read about my user-centered design process!
