IAN FARRELL
hikefinder-squarespace-front.jpg

UX: SF Hikefinder

SF Hikefinder is an app design I worked on while taking a class through Springboard. During its creation I focused on all aspects of ideation and research, including elements such as personas, empathy mapping, and prototyping. What follows is a visual roadmap of beginning concepts, steps to identify and eliminate problems, and final product. 

The full prototype of SF Hikefinder.

BEGINNING STEPS & DATA

Initial research began with a heuristics analysis and a short screener survey followed by a more in depth interview. My focus in the beginning was to figure out how users chose hikes within the Bay Area in addition to what steps were involved in that process. After the screener survey I found the following data:

percentages2.png

HEURISTICS ANALYSIS

Once I discovered who my base user was, I ran a usability analysis to find out what competitors were doing and to run comparisons. I looked at AllTrails, REI's Hiking Project, and Map My Hike by Under Armour. The purpose was to do research on how a user would undergo task completion along with general navigation. The results of the heuristic analysis can be found here.

After the analysis was complete, I focused on interviewing eligible participants to dig deeper into potential user data. From there I was able to aggregate the information I found into personas and empathy maps to better define my user. 

PERSONA

EMPATHY MAP

SITE MAP & USER FLOW

Site map design was fairly straight forward since the focus was on just a few pages that had heavy content. The site map can be found here. With that said, the user flow required a lot more complexity, so I focused my efforts on mapping out the specific task of finding a hike using search filters. After compiling all of the different filter options, I discovered that there might be the possibility of filtering yourself out of a hiking result. Therefore, an error bubble was added to the flow. This way, the user would be looped back to the filter options page to try filters that yielded a successful result. 

MVP & USER STORIES

For my minimum viable product, it made the most sense to focus on three aspects:
• search filters
• reviews
• traffic/crowd alerts

 After going through user interviews, it became fairly clear that users would use the app almost exclusively as a research tool rather than for social or some other platform. Users agreed that they wanted a generous list of hiking details (search filters), validation for their choices (reviews), and to feel as remote as possible (traffic crowd alerts).   

user-stories.png

WIREFRAMES, PROTOTYPING, & USER TESTING

After getting feedback from user interviews, I went about starting to sketch out what the final pages would encompass. Since the search function was the crux of it all, I decided to draw out pages that went through that specific user flow. 

Splash Page, Home Page, Filters Page, Results Page, and Hike Details Page

Splash Page, Home Page, Filters Page, Results Page, and Hike Details Page

I used my beginning wireframes as paper prototypes as well since I believed it would be quickest to find problems and to immediately solve them with cut outs that I could rearrange. Key findings include:
• Splash page should have Facebook, Google sign in option for expediency
• Splash page needs a "Sign Up" button after email and password inputs
• Filters page should have a search bar in case user knows something specific they want to look for
• Navigation icons need a rework, history (book icon) could fall under profile section and featured (star icon) should be favorites instead
• More map views should be apparent, work into navigation or into hike option boxes
• Hike Details page should have a "Get Directions" button to expedite getting there
• Home page needs rework since regions could fall under filter criteria, should look more like the Results page instead

 

STYLE GUIDE AND FINAL DESIGN

Once the user testing feedback was incorporated into my research, I shifted focus to final steps, including fonts and color palette for end product. Regarding visuals, colors should be reflective of nature, incorporating dark greens, muted blues, and off white variations. White, grey, and black would be used for titles and body copy. Georgina Demo is the title font for the app name while Lato is the main font used since it has easy readability, comes in a multitude of thicknesses, and is mobile friendly. 

hiking-style-guide.png

After the style guide, all work went into the final pages of SF Hikefinder. Tools used were Sketch and Illustrator.

mockups.png