Storyboards
With our research and design framework in place, we transitioned into the ideation phase to envision what TrailFlow could look like. Our storyboards illustrated potential user interactions, focusing on specific use cases of runners on the Burke-Gilman Trail. We created three distinct storyboards to explore different user journeys and demonstrate how our product effectively addresses hydration challenges.
Storyboard 1: App
App would allow users to find the nearest water fountain to their location, and they could plan their run and see where the water fountains would be located.
Storyboard 2: Signage
The signage would be posted at the beginning, end, and throughout the trail, about information where water fountains are located. Therefore, runners do not have to rely on a mobile device on their runs.
You are here
Storyboard 3: Winterized Water Fountains With a Pedal
The water fountains would be winterized so they could work all year round, and they have a pedal, therefore individuals who may not be able to use the button can still access water.
After a design review with the industry experts, we agreed that the mobile app was the most promising idea.
Information Architecture
With our final design solution — TrailFlow, a hydration app — decided, we created an information architecture to define the overall structure of our product. This framework helped us map out navigation and user flows, integrating both digital and physical aspects of the experience.
Building on our research findings and storyboards, we translated user needs into a structured blueprint for the app's interface. This information architecture served as a critical reference point during the wireframing stage, ensuring our designs aligned with user expectations.
Open App
Draw Route
Search
Map of Water Fountains
(Home Page)
Settings
Maintenance
About us/trail
Help/
Contact us
Location (on/off)
Nearest water fountain (distance) or select water fountain
Wireframes/User Flows
To bring our information architecture to life, we began experimenting with digital wireframing to develop user flows. Our team created multiple iterations of the product, refining screen layouts and interactions to enhance usability.
These interaction sketches laid the foundation for our wireframes and user flows, which included key features such as route mapping, settings, and locations toggles. This phase was essential in establishing a concrete structure for our prototype, allowing us to iterate through low-, medium-, and high-fidelity designs.
01
01
03
03
04
04
02
02
01
02
02
01
01
03
02
01
03
04
02
Users can turn their location on and off by clicking on the toggle if they want their location to be tracked
By clicking on the plan button the user is navigated to another screen where they can plan their route along the Burke-Gilman Trail
By clicking on any water fountain the user is navigated to another page where they can request maintenance and learn some information about it
By clicking on the settings button the user is navigated to another page where they can see our app’s settings
01
03
04
02
Users can turn their location on and off by clicking on the toggle if they want their location to be tracked
By clicking on the plan button the user is navigated to another screen where they can plan their route along the Burke-Gilman Trail
By clicking on any water fountain the user is navigated to another page where they can request maintenance and learn some information about it
By clicking on the settings button the user is navigated to another page where they can see our app’s settings
01
03
02
Users are able to add a stop, whether it be off the Burke Trail or they want to run to a destination off the trail too. Just like how users can add a stop in Google and Apple Maps
By clicking on the settings button the user is navigated to another page where they can see our app’s settings
Users are able to stop planning their run if they want to, just in case they change their mind, if something suddenly comes up, etc.
01
02
By clicking on the home button the user is navigated back to the home page. The user would do this if they were finished looking at the settings
Users are able to see previous maintenance request and the history of a fountain
01
02
By clicking on home/back, it brings the user back to the home page. The user would do this if they accidentally clicked on a water fountain or if maybe just explored the app
By clicking on the submit button the user’s maintenance request is sent submitted to maintenance
© TrailFlow