The Brief
The goal of this project was to, in a small group, design an app concept that aims to solve a local, culturally relevant issue in fitness, health, the environment, politics, the economy, or sustainability. Once the concept was researched, agreed upon, and sketched up, each designer would visually assemble their own unique app prototype in Adobe XD.
My app concept is TrailGuide. This is an app that would function as a one-stop shop for planning, recording, and sharing hikes for hikers of any experience level. Users could record, publish, and view their activities, connect with friends, challenge other users to fitness goals, and plan their trips with crowd-sourced data.
Deliverables included a mini brand identity, video walkthrough of the app, and functional Adobe XD prototype.
Designers on this project: Andrew Welsh, Brandon Stephenson, Aidan Korbich
Process
We started with our research. Notable existing competitors to this idea included Strava and AllTrails. We took note of Strava's social and fitness features, and AllTrails' planning features. With these in mind, we sought to create an app concept that combined all of these aspects into one place.
Next were the wireframes. Most of our concepts revolved around a bottom navigation bar, much like other fitness and social media apps. The main screens we decided on were a home feed, a plan/search function, a record hike function, the social/challenge function, and the user's profile.
Page Ideation
Page Flow Ideation
Page Visual Ideation
Up next was the visual identity of the app. Initially I had decided on a dark grey and light green color scheme, but pivoted away from this, as it was too similar to AllTrails. Wanting to evoke a natural palette and differentiate TrailGuide from competitors, I eventually chose a cream off-white and blue color palette.
As for the mini brand identity, I wanted the app to be bold and adventurous. After sketching out some ideas, I decided on a simplified mountain as the logo and a pattern of topographic lines as a background and pattern element.
Initial Logo Sketches
Page Flow, First Revision and Iteration
Page Flow, Second Revision
Signature Mark
Pictorial Mark, with Color and Texture
The app layout went through a few more color and proportion adjustments before settling on the final design.
The System
