Transit Concept - Bolt
This challenge involved building an app for busy commuters planning their daily commutes across multiple forms of transportation. For every mode of transportation the user is also able to plot out a desired route. During this project I functioned as a UI/UX Designer.
Persona
Busy commuters requiring the flexibility to travel by car, bus, bicycle, and even through car-sharing programs.
Problem Statement
As such frequent commuters, users want to know all of their options and also look to save the routes they take the most often. How might we represent these options geographically without creating a product that causes an information overload?
Research Practices
Interviewing people who use different modes of transportation year round was the first step in understanding the product task flow. Interviewees often had favoured routes but wanted a single element to contain any information they might find necessary.
Walkthroughs of favoured routes allowed a glimpse of how users process their commute time and each step involved.
Design Challenge - Emphasis and Visibility
Material Design practices and conventions assisted in providing clarity and emphasis throughout the UI, from icons to tabs and drawers at varying instances. In rare cases I strayed from these practices.
Small components had to be considered compositionally so that it was simple to process combined pieces of information. For example, variations of transit options needed to offer all information in a compact molecule as opposed to an unclear, segmented graphic.
Standard drawer (left) UI did not explain the favourites functionality
Atomic Design System
Armed with this knowledge, I was able to begin design at an atomic level and explore iterations of elements, including colour palettes and typography. Every item from atoms to the organisms that made up the main components were founded in a style guide with an emphasis on forming a trustworthy and energetic relationship. This process allowed me to a create consistent navigation tab bars, ribbons, and basic drawers.
A large portion of iteration involved including clarity on the map display. It was important to provide all the available options while not overwhelming the user with all of them on a single screen.
For example, the use of a ribbon overlaid on the map indicates a selected mode of transportation. Additionally, users highlighted the need to contrast route modals against a greyscale map.