UX RESEARCH • VISUAL DESIGN • PROTOTYPE

Oakey-Logo-2

Discovering new hiking adventures through full transparency of reviews and photos of existing popular destinations by real hikers.

CLIENT: Oakey

ROLE: UX Designer, Visual Designer, UX Researcher

TOOLS USED: Adobe XD, Miro, Whimiscal

TIMELINE: 3 weeks

Oakey-Mocks-2
unsplash-image

PROBLEMS

Hikers have difficulty finding an appropriate trail route to explore. Most hikers often visit multiple platforms, such as Facebook, Yelp, Google just to find a new spot. Visiting multiple platforms is not efficient and doesn't save time. In addition, hikers want to see actual reviews of places from real people who have been there before before making a final decision on a place to visit.

Oakey-Mock

MY SOLUTION

A mobile application to show all nearby trail routes by popular categories and showcasing reviews by verified people who have visited the place. This mobile application offers photos by real users of the platform to ensure that the trail route is appropriate for users to travel to. With transparent information about the trail route, hikers can turn to this application as their one-stop application to discover new routes. 

01 - Research & Discovery

USER SURVEYS & INTERVIEWS

To better understand the behaviors of avid hikers, I sent a survey out to multiple groups of people who are in various hiker clubs, including the Los Angeles Hiker Club. Out of the 20 participants, I received some very interesting insights to help me paint the picture of common problems and issues that they were having while discovering new hiking trails. 

Group-8
Group-7
Group-10

IDENTIFYING PAIN POINTS & NEEDS

From my surveys, I was able to recruit 3 people to participate in user research interviews. Through these virtual interviews, I asked specific questions regarding their traveling behaviors, particularly when it comes to hiking.

After the interviews, I was able to narrow down some pain points and needs that this mobile application should do: 

  • Provide one meaningful way to look for hiking resources, rather than shopping various platforms. Many go to Yelp, Facebook, then Google Maps which can be very tiring.

  • Photos play an important factor when making a final decision whether or not someone chooses that route or not.

  • Clear information should be presented before a user embarks on their hiking adventure. Users find it confusing when trails are misled or inaccurate with estimated time information.
Cindy
Katie
Patrick

COMPETITIVE ANALYSIS

Looking at two main competititors, Yelp and Gaia GPS provides users options to choose hiking routes based on overall reviews, photos and maps of the trails. These applications were given to me by interviewers in this project. Often times, they have to go through several applications to discover and/or decide on a final hiking route.

However, there are some drawbacks to both mobile applications. Overall, both applications provides no starting point for a trail route and displays unnecessary information on the trail page that can easily distract the users. Although Yelp has a more simplified user flow when compared to Gaia GPS, it isn't tailored to just hikers and encompasses a wider audience.  

Yelp
Gaia-GPS


 

02 - Define 

USER PERSONAS

Based on my interviews, I created two personas: Wendy and Sam. Wendy is an all-around fun woman who loves adventure and enjoys sharing her experiences with her friend. Sam is a more relaxed family man who enjoys spending time with his family and friends and likes to discover new adventures that is best suited for his family. After creating these personas, they helped me figure out some key features that my mobile application had to have: simplified for the average hiker and engaging for the adventure-seeking individual. 

Wendy-Harper
Persona-Template-–-2

 How might we help the user discover new hiking routes that have been tried and true by real people?

INFORMATION ARCHITECTURE

To create an intuitive interface, I created three user flows specifically that aligns with my common user stories. These user flows help portray a possible pattern that makes it easy for me to assess the efficiency of the mobile application. After gathering my data from interviews, these user flows helped me figure out what components are necessary for the application and how a user's experience might be enhanced.

 

User-Flows

03 - Ideate

INITIAL SKETCHES

I started my ideation phase by sketching out a few screens of what the mobile application could look like. I labeled some important parts of the onboarding process as well as taking a closer look at what is important when users look at a hiking route.

After sketching these initial screens, I provided these to a few family and friends to ask them to complete a few tasks: 

  • What would they expect the hiking route information to look like?
  • At what point in this mobile application do they feel is still confusing? 

By answering these core questions, I was able to answer questions that I still had from initial research and had a clearer sense of what to create in my wireframes and mockups.

Sketches

WIREFRAMES

Using this interactive wireframe, I made the following changes from my sketches: 

  • Provide in-mobile help and tools to educate the user about the application prior to the home page
  • Adding options for users to create a 'Favorites' or 'Lists' to track previously searched routes or explore new routes
  • Expanding the review page into a separate screen to provide users more visibility and giving the option to add photos
Onboarding-–-1
Onboarding-–-2
Onboarding-–-3
Onboarding
Home
Mount-Wilson-Loop-Info
Mount-Wilson-Loop-Map
Mount-Wilson-Loop-Map-Go
Review-Hike
Review-Hike-–-1
Mount-Wilson-Loop-Mock-–-4-1
Favorite
List-Wireframe
Profile-1

BRANDING

Using my competitor analysis' as a color guide template, I wanted to incorporate some light, but fun colors in this application. I chose two shades of green to portray the nature and hiking feel to the application. I ended up adding a charm pink color in my palette as an accent color to incorporate a fun vibe to the mobile application. Using Avenir as my main font, it is an easily legible font and perfect for mobile. 

As I was thinking of the logo name, I wanted to reassure the user that the application is meant to help them find what they are looking for with ease - a trail route. I decided on a word play on the words "oak and okay" and came up with "Oakey". 

Style-Guide

LOGO DESIGNS

For the logo, I wanted to bring a nature vibe to the application. I utilized the mountains and trees here to provide it with a nice earthy feel. I chose a simple icon here to demonstrate that this is just for anybody - whether you are an avid hiker or a new hiker, the tree with the mountain is a nice combination of truth and happiness. 

Screen-Shot-2020-11-03-at-2.52.27-PM

04 - Final User Flow

ABOUT THE APP TUTORIAL / ONBOARDING SCREENS 

Onboarding-Mock-–-1
Onboarding-Mock-–-2
Onboarding-Mock-–-3
Sign-In

STARTING A TRAIL ROUTE WITH MAP DIRECTIONS

Mount-Wilson-Loop-Info-–-2
Mount-Wilson-Loop-Map-–-1
Mount-Wilson-Loop-Map-–-2

WRITING A REVIEW FOR A TRAIL ROUTE / CONFIRMATION SCREEN

Mount-Wilson-Loop-Mock-–-2
Mount-Wilson-Loop-Mock-–-3

05 - Iterations & Usability Testing

Web-1280-–-1

FEATURED IMAGE CAROUSEL

After I finished drafting the mockups, I ran some usability tests on Maze to see if a user could easily complete these steps:

  • Find a trail route they enjoy and explore more photos
  • Sign up for an account 
  • Complete a trail and write a review about their hiking journey

Users were able to complete all 3 tasks successfully. They provided me with some great feedback and recommendations for next steps. Users expressed concerns over the featured photo on the trail page. Many thought that they should be able to click on the photo to expand and scroll through some "featured" photos on the carousel. I edited my designs to match their mental model. 

CREATE A NEW LIST

When users wanted to create a new list, there wasn't a way to do that. By adding an option to create a new list at the top of the screen, users can now easily save their favorites to create a newly favorited list to share with others or save for themselves. 

Web-1280-–-2

Learning and Next Steps

SYNTHESIZE RESULTS

During the research phase, I learned to be more organized with my findings and summarize my findings. While I did surveys and interviews, I tried to keep tabs on too many things at once that I did not set a structured goal for myself. Learning how to synthesize results is just as important as the actual data.

THINK ABOUT YOUR USERS

To better maximize output for research purposes, I would like to utilize my outside sources to gather more data such as reading articles or existing usability findings. With an ongoing pandemic going on, it was tough to get actual data. I would love to observe actual hikers as they search for a new route.

ACCESSIBLE APPLICATION FOR ALL

If I had more time, I would love to make this app even more accessible by considering users who might be visually impaired or challenged. I would also love to consider users who might suffer from color blindness to better create an accessible product for all.