DILLON KEISTER
Go Tap
Client
Jane Doe
Director of Public Transit
Location
Capital City, USA
Year
2020
Project Length
4 weeks
A minimalist bus schedule app.
A time table reference app for mobile, designed for a mid-sized Midwestern city's new public transit information system. A fictional build built on real rider data.
Tools: Figma, Google Suite, Adobe Photoshop, Zoom
The Challenge
Create a mobile app that communicates the city's new bus route schedules to their thousands of transit users. Riders should be able to select schedules by both bus stop and distinct bus route at each stop. The schedule should display both a time and a countdown of minutes until arrival. One key problem to solve is that we have one very complicated bus stop at Washington & State, where seven different bus lines collide, and users need to be able to tell apart each of the routes’ schedules.
Roles
Lead UX Designer (research, interaction design, visual design). With the guidance of my mentors at Thinkful, I orchestrated the entire project.
Scope
Complete a full design cycle from research to usability testing on a clickable prototype toward an MVP that meets the business & technical requirements. There is a strict focus on delivering scheduling information only, without navigation.
Deliverables
Rider surveys & interviews
Competitive analysis
Personas & proto-personas
Empathy maps
User flows & user stories
Wireframes
Branding & style guide
Logo development
High-fidelity prototypes
Stakeholder presentation
Research & Discovery
I ran a survey online through Google Forms and gathered data from 74 regular public transit riders on their riding habits and how they get their schedule information. Participants were sourced from social media and Survey Swap.
​
Because our app won't provide navigation, I reached out to the most frequent riders, already familiar with their stops. I interviewed four frequent riders who used the reported most-popular transit-specific app, Transit. Ease of use and quick look-up were rider priorities, alongside accurate arrival times.
​
I conducted a competitive analysis on four existing transit apps. I found some to be non-intuitive, bulky, using confusing colors or labels, or formatted as enormous ever-scrolling lists.
Ride the bus several times a week
Travel just 2-6 unique places via public transportation
​
Rarely make a transfer to reach their final destination
Of 72 survey participants through Google Forms
Personas & User Stories
From the usage data and demographics gathered from the survey data and external research largely through the American Public Transit Association, I created our persona Eddie to inspire the design moving forward. The majority of our riders don't need to make a transfer for their daily commute, and don't go cumulatively more than 2-6 places, validating our focus on routine riders who aren't in need of navigation features. Eddie is a weekday commuter who rides the bus to avoid the stress of rush hour traffic and parking.
As a commuter and a new father, Eddie wants to spend more time with his infant son and less time wasted waiting at his bus stop.
Wireframing "A to B"
As a frequent bus rider, I want to get accurate bus times for my usual routes quickly so I don’t waste my time.
We are serving returning users who have a familiar bus route and continue to use the same stops for regular trips, not seeking new routes or destinations. With this, I came up with the idea for "A to B," a navigation structure where a user selects a starting location and destination from a personalized list of their most frequented places to take transit between. Just two taps and the app displays the next departure times on your favorite route between A and B.
The Pivot
A to B was fun, conceptual, and exciting, but I had lost sight of the business requirements along the way. With the structure of A to B, users are not able to select specific stops or routes, because they are only given the most relevant information to a routine route. The research I conducted and the external research I found gave me a great idea for a streamlined transit app, but neglected the initial needs of my client. The detail needed for an MVP for A to B kept growing and growing. Our time constraints didn’t allow for such experimentation and growth, so I needed to pivot. I put A to B in my pocket and went back to user flows and started over.
Wireframing Go-Tap
The functionality for the new idea, Go-Tap, takes a map navigation based on the user's location and lets them choose nearby bus stops to get up-to-date schedule information.
Branding
I created an original color palette, based off a monochromatic palette generated by the Adobe Color Wheel. I wanted a high contrast palette for both accessibility and to incorporate a high-whitespace minimalist feel. Colors were drawn from both an urban-centered mood board and for hues of blue to inspire feelings of peace and calm, rather than the rush of getting to work, as per color psychology. The logo was built in black and white and later adapted with one of our blues, with a flourish to add some movement.
​
The typography was inspired by current design trends in minimalism, coupled with accessible type standards. The main typeface family is Lato, paired with Trebuchet MS.
Later iterations included better spacing and padding, and switching typefaces to ensure distinct 1s for bus route numbers.
Testing the Prototype
I tested a clickable prototype with four potential users through Figma over Zoom. Participants were given three tasks to look up schedules for different bus stops, routes, and times. The main takeaway from these usability tests was that I need to better conform to current market conventions for icon choices and labels, particularly with helping users discover what was clickable onscreen. Users looked for features or options that were not there, or were placed in ways they didn’t expect. There is a big design opportunity here — how might we better use visual design to indicate such a variety of calls to action?
Next Steps
To start iterations for future usability tests, I made changes to some of the immediately identifiable problems, such as new iconography choices and other design changes to encourage clicking.
​
As far as basic functionality is concerned, we have a working MVP to develop, but I would love to do further testing and iterations to continue improving on user understanding. I'd also like to start incorporating more accessibility elements into an updated model, such as ensuring screen reader compatibility, building in voice controls, and adding a dark mode option.
​
Here is a one-minute video demonstration of the updated prototype.
Final Thoughts
As an app that serves just one city, it is possibly more functional than some other single-city competitors, but we need to make further tweaks and conduct more testing to make the interface more attractive to users and better hone in on the minimalist goal of the visual design and the function.
This is a design opportunity to lessen the visual load and busyness, where we can still inject more color into the design in the process of making a more effective minimalist look. Color could be a more fun and engaging way to make distinctions between features or buttons than the heaviness of all of the lines and other highlights I tried to use to emphasize CTAs.
The app completes its goal of delivering bus schedule information, however, so to that effect the MVP is ready for development. If anything, we could streamline the product to be even more minimal for a launch before incorporating improved visual design or additional service features.
Try the Prototype Yourself
