jennifer odonnell

AllTrails

For my first wire framing challenge, I chose to dissect and create a userflow for the mobile app I use the most: AllTrails. This application finds and suggests local currated hikes- from casual walks throughout the city, to the backcountry of the Appilation trail. As an avid hiker and explorer, this application has been a lifesaver. Far better and more comprehensive than Google Maps or Strava, this application is trail specific, enticing even the most novice explorers to get out and enjoy a bit of nature (without getting lost.)

the flow I chose to recreate

Started with AllTrails closing a hike for me without my having to travel far, and to make sure the hike was appropriate for my skill level. I also wanted to know if I could bring my dog and, most importantly, what my pace, mileage and elevation gain would be by the end of the journey.

the wireframe

the flow

PAGE 1

The welcome page is displayed when you first click into the app. It greets you personally, which I think is great reflection of how UX/UI can work to improve users’ experience- as personalization is key. The user is presented with a number of nearby hikes (based on geolocation) which are identified by photos and percieved effort level based on crowdsourcing data.

PAGE 2

Once a hike is chosen, the user flows to the second page, which presents us with a more detailed account of the activity. The page lists several viewer-friendly attributes of the hike — providing the user with an easy way of knowing what to expect if they have any physical limitations (wheel-chair accessible/stroller friendly)or are looking for a specific genre or thing to enjoy (road biking, animal allowances, views.)

This page also presents the user with 4 helpful buttons — Directions, Navigate, Share and Download, making the hike easy to access and sharable to others’. To start the journey, and continue the flow, the user will choose “Navigate.”

PAGE 3

From here, a simplified map of the area surrounding the hike is identified, with a very descernable red path, demarking the trail. The user is a pulsing blue dot, which moves in real time long the trails. Once a mode of travel is chosen “hiking, cycling or running”…

PAGE 4

… pops up, ready to start tracking the journey, measuring: time, distance and elevation gain. Some very helpful buttons appear on the right-hand side of the screen, the top: navigation, which will always bring the screen back to where the user is located; the middle button, allowing the user to look at the landscape on different types of maps (topographic, etc.) & finally, the last button provides the user with additional help and information.

At the bottom of the screen is the start button- which, once pressed, starts the timer. This button is flanked by two buttons: the left shows where user is based on elevation, and the second calls whomever you have as your emergency contact. (Very smart- and I never knew about this option until now!)

PAGE 5

Is rather self explanatory, as it offers the user the ability to start, stop, and start up again if they need a break throughout their journey.

buttons used

Text Imput Fields

Buttons

Images

Icons

Image carousel

Clickable Images

what did i learn

Prototyping is Queen! Getting the layout down as a functioning system, instead of just looking to create something beautiful, is the check I needed, as I cant even express how many hours I’ve wasted on putting together my website. ;)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store