TS Logo.png

TRAILSHARE

Type

Personal Project

Duration

08/20 - 05/21

Tools

Figma
HTML/CSS/JS
ReactJS
NodeJS
Strava API
Google Firebase
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.

Col-dAubisque_05.jpg
Rectangle.png
Rectangle1.png

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.

Design System.jpg

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

Process flow chart.jpg

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.

Process flow chart-4.jpg

This user flow was simplified for a mock stakeholder presentation to communicate the same information to a new audience.

Saving a trail

Process flow chart-2.jpg

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

Process flow chart-3.jpg

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.

Gif1.gif
Gif2.gif

Discover

Start by entering your destination or geolocating in order to choose a radius of areas to search for trails

Save

After signing into your account, use the save+ icon to save a trail into an upcoming trip or location to build out complete itineraries

Gif4.gif
Gif3.gif

Navigate

Modify your trail parameters by increasing or decreasing difficulty, then see turn-by-turn directions with integrated audio media controls

Share

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

react-js-blog-header.png

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.

Node-js-Logo.png

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.

Strava.png

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.

logo-standard.png

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.

create-account.png

Log in to your TrailShare account, which is handled by The Firebase Authentication SDK

home.png

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

select-activity.png

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.

compose-post.png

With map data imported from Strava, users can customize the name and description of their trail before sharing them with their locality.

user-profile.png

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.

Screen Shot 2021-11-15 at 9.21.01 PM.png
Screen Shot 2021-11-15 at 9.16.52 PM.png
Screen Shot 2021-11-15 at 9.22.26 PM.png
home.png

Lessons learned

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

Further documentation