jennifer odonnell


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


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.


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.”


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”…


… 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!)


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




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