08/20 - 05/21
Google Maps API
A platform for discovering, saving, and navigating trails for cycling, running, and swimming
Trailshare features a flexible, fluid UI and pattern library. In addition to designing the UX, I engineered a full-stack prototype which integrates a variety of frameworks and APIs.
Balancing utility and simplicity
Following competitive analysis and user research, I identified a need to create a UX with a rich information architecture, but simplistic interface to tailor to first-time users and power users alike. This philosophy is what informs the TrailShare UI design system, which incorporates flexible components that function across desktop and mobile native contexts. It applies the principles of atomic design and prioritizes readability and usability.
Different paths, same destination
With this service being built from the ground up, I created a range of user flows that accommodate for target users, specific use-cases, and edge cases. These user flows are what inform both the information architecture of the interface, and the flow between pages and tabs.
Sharing a trail
How do we communicate in the language of geography? TrailShare accommodates for a range of ways to describe your trail to the public including importing from an activity tracking app like Strava, or drawing out your own trail onto a map, with intelligent route correction.
This user flow was simplified for a mock stakeholder presentation to communicate the same information to a new audience.
Saving a trail
How might users be nudged into saving trails into organized categories? This chart examines the flow of users between pages to save trails into trip categories.
During user testing, it was identified that there was a redundancy in this flow that slowed down users wanting to save multiple trails to a trip
As a result, the flow was simplified. This increased clickthrough rate during the next round of user testing and reduced overall complexity.
Streamlining the experience
With the app's feature set determined, I created a mobile native mockup in Figma that demonstrates each of the user flows. These flows imagine that one specific user persona was leveraging the service to share and save trails in their locality.
Start by entering your destination or geolocating in order to choose a radius of areas to search for trails
After signing into your account, use the save+ icon to save a trail into an upcoming trip or location to build out complete itineraries
Modify your trail parameters by increasing or decreasing difficulty, then see turn-by-turn directions with integrated audio media controls
Choose between importing a route from an activity tracking app and creating your own trail from scratch. Draw in trail corrections on the map, and mark points of interest like water stops or restrooms.
Translating ideas into reality
With user flows and a UI prototype constructed, I created an in-browser MVP which demonstrates account creation, integration with a Strava account, commenting, and sharing trails
The frontend is handled by React, which is used to create a set of flexible components and containers, all of which receive and display data dynamically from the Node server.
The backend is handled by a Node server, which retrieves data from multiple endpoints, and a custom API which I created to interface with the frontend.
The Strava REST API is used for connecting a user's TrailShare account with recorded activities, so they can share trails they've run or ridden in the past. The Strava OAuth flow is used.
Firebase is used to store and secure user accounts and post data in the Cloud Firestore, enabling recorded users to share and comment across the site.
Log in to your TrailShare account, which is handled by The Firebase Authentication SDK
Explore a range of cycling trails based on the browser-acquired geolocation. Users can set a geographic radius to search in. Trail data is dynamically retrieved from the Cloud Firestore and polylines are visualized using the Google Maps API
To share a trail using Strava, select an activity from your history to import the map data into TrailShare. GET and POST requests are leveraged to extract data from Strava endpoints, and store them in Firebase, using the Node server as the middleman.
With map data imported from Strava, users can customize the name and description of their trail before sharing them with their locality.
User profiles include shared trails and usage statistics like the number of posts, total distance of trails shared, and total number of likes awarded by other users.
From the ground up
The most valuable learning experience in this project was being able to iterate from concept, to plan, to wireframe, to UX prototype, to web prototype. Work spanned over a year, but resulted in a product that is a solid enough foundation for a full-scale service to be built upon.
By working on TrailShare, I've considered the product from the ground up. On one hand, I worked on the bigger picture by developing user flows, a design system, and conducting user tests. In addition to this, I used this as an opportunity to bolster my full stack development skills by combining frameworks and libraries to build out a robust, comprehensive MVP.
I enriched my research skills and methodology
I made strategic design decisions based on usability research and product objectives
I conducted a mock stakeholder presentation to justify my design decisions
I architected a tech stack that strategically integrates various platforms into one experience