My Role

UX Research

• Surveys
• User Interviews
• User Personas
  
• Usability Testing
  

UX Design

• User Flows
• Information Architecture
• Wireframes
  
• High Fidelity Prototype
  

UI Design

• Visual Design
• Branding
• Logo Design
  

The Process

I began by conducting a competitive analysis of similar apps to determine what worked well and what could be refined with my app.

What Does the Competition Look Like?

Transit Stop (CTA)

Strengths

• Simple UI
• Familiar map (Google)

Weaknesses

• Must already be familiar with CTA
• Bus arrival times not reported accurately

opportunities

• Make sure there’s only one tap between selecting a stop and id-ing how many minutes until a bus arrives/ETA

CityMapper

Strengths

• Robust features
• Bus location tracking readily available

Weaknesses

• Inaccurate time tracking
• Robust features are sometimes overwhelming

opportunities

• Increase user control and freedom by allowing them to search routes by what is most important to them

What do the People Want?

Survey

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.

Based on survey data, it was clear that what mattered most to users was reliable bus tracking information that was quickly visually available.

User Interviews

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:

Another user was primarily concerned with safety at stops:

Stepping into my User's Shoes

Personas

Based on my research, I created two distinct user personas for commuters, Bee and Alex.

Bee G.
Age 30s
Software Developer

Motivations

Bee doesn't have a car, and uses the bus to commute to and from school and their friends' houses.

Frustrations

Navigating the transit system feels so complicated-why isn't it as easy as taking an Uber?

Alex F.
Age 40s
Marketer

Motivations

Alex doesn't have a car, and uses the bus to commute to and from work and to run errands.

Frustrations

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. 

Empathy and Journey Maps

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.

Tracking the Flow of my Bus App

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. 

Building the Foundation

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.

Making it Pop

Brand Goals

• Simple
• Trustworthy
• Familiar

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.

Mood Board, Color Palette, and Typography

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.

Logo

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

High Fidelity Design

With a brand and styles firmly in place, it was time to apply the UI to my wireframes.

Putting it to the Test

I conducted moderated usability tests over zoom, and asked users to identify:

• What the next bus arriving at the Washington & State stop would be
• Which bus they could realistically make at the Washington & State stop from their location

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. 

Action Steps

• Give users a clear indication that they should swipe modalities
• Increase text size for bus time labels on map

The Prototype

So What Did I Learn?

Keep Switching from Big Picture to Details.

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. 

Convergent Thinking: Not Fun, but Very Important.

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.

Interested in hearing more about my process? Want to hear about what I'm working on now?