A high-fidelity micro-app to allow users to view bus schedules and bus schedules and routes, as well as directions from their location to a stop.
Fuss Free Bus is a micro-app designed as part of the Thinkful bootcamp and my first experience progressing through the entire design process.
I was tasked with creating an app for commuters in a hypothetical midwestern city that would allow them to discover:
A high-fidelity prototype of a micro-app that allows users to view bus schedules and routes, as well as directions from their location to a stop.
I began by conducting a competitive analysis of similar apps to determine what worked well and what could be refined with my app.
Once I'd taken a good look at the current solutions, I conducted a survey of bus riders in major midwestern cities-Indianapolis, Chicago, St. Louis, and Detroit-to identify their pain points and priorities.
Over half of users fell into this age group
Based on survey data, it was clear that what mattered most to users was reliable bus tracking information that was quickly visually available.
I conducted user interviews with select survey respondents to glean more information, and they revealed a number of unexpected pain points. One user emphasized the need for trustworthiness:
"I hit Google Maps first to get a general idea, and then the city’s website to get accurate times. I feel like Google Maps isn’t 100% accurate"
Another user was primarily concerned with safety at stops:
"If I'm using a new stop, I'll go into Google Streetview to check out the stop and see if it has sidewalks and streetlights."
Based on my research, I created two distinct user personas for commuters, Bee and Alex.
Bee doesn't have a car, and uses the bus to commute to and from school and their friends' houses.
Navigating the transit system feels so complicated-why isn't it as easy as taking an Uber?
Alex doesn't have a car, and uses the bus to commute to and from work and to run errands.
Many bus apps aren't safe enough for Alex and their child-it would be great to have a quick way to check if there are sidewalks and streetlights at a stop in advance.
I decided to focus on Bee because their needs would apply to larger quantities of bus commuters, whereas many of Alex’s concerns and pain points revolved around their status as a mother.
With Bee in mind as my primary user, I developed empathy and journey maps for them to explore their needs as a user more deeply.
From there, I developed two user flows. Since Bee is a practiced commuter, I wanted to give them the option to search for buses either by route number or by the stop.
Now came the fun part-putting pen to paper! I sketched out my initial concept for the app first to avoid too much pixel pushing.
Then I digitized my designs.
Once I got a good look at all of my screens together, however, my flow suddenly felt...clunky. Bee would have to push too many buttons to get to the screens that mattered the most to them. I decided to scrap a large chunk of the app and re-ideate.
Round 2 proved to be much more fruitful for ideas (although you can see I got a little spicy when editing myself).
Once I made the edits to my digital wireframes, I was able to pull back and look at the big picture of my flow once again. This time was far more efficient. It was time to start branding.
Based on my research, I knew that users valued a transit experience that felt:
I wanted my app to instill this feeling in users, to take some of the stress off of their plates.
To ideate for my visual design, I developed a mood board that pulled familiar visuals in with playful minimalist designs to really hammer my brand goals home.
Pulling from the visuals on my mood board, I selected a color palette and typography choices that would further along my brand goals-evoking a sense of simplicity, trustworthiness, and familiarity.
It took a while to get to just the right logo, as you can see from my many sketches.
But once I got digitizing and shifting shapes and views around, I finally hit on a logo that felt simple, trustworthy, and familiar enough.
The final logo
With a brand and styles firmly in place, it was time to apply the UI to my wireframes.
I conducted moderated usability tests over zoom, and asked users to identify:
Overall, the “See more lines” text and caret confused users, as it deterred them from swiping modalities up and instead kept them focused on clicking.
Each view of your product will give you a different perspective on what can be improved. Focusing too much on details will get you lost in the weeds, but focusing too much on big picture will leave you with sloppy work.
After my user interviews, I came back to the drawing board full of ideas from integrating a transit meditation feature to warning notifications if a stop was missing a sidewalk, With limited time and resources, however, I quickly learned that I would have to reign it in to make sure I was getting the core components of the app right, and truly meeting the brief.
How could I make it quick and easy for members of a co-working roasting space to book sessions and reserve seats in events?
How could I quickly and accurately provide users recommendations for local podcasts they would enjoy through a smart speaker?
What were the key usability issues of wono.io, a Russian e-commerce business expanding to include the U.S. market?
Interested in hearing more about my process? Want to hear about what I'm working on now?