We used bright colors, rounded edges, and plenty of negative space throughout the UI to bring a sense of calm energy to the typically frustrating task of transportation planning.
For the logo, we used a rounded sans-serif typeface with lines that interplay and extend beyond the letterform to convey movement and energy.
As riders of public transportation, the concept for Ride was born out of personal frustration with the shortcomings of the current transportation apps, and we knew we weren’t the only ones who felt this way.
Using Seattle as our case study, we started out by reviewing King County Metro’s 2015 Rider / Non-Rider Survey Executive Summary to help us gather initial information about our users. We then created and conducted a survey to help us determine user pain points as well as information about their public transportation use.
Takeaways | Public Transit Usage
Takeaways | Trip Planning
Personas & Scenarios
The information gathered from our research aligned and supported our original concept. Using that information we created three personas that represent our users. We wrote scenarios for our personas to help us better understand what our users will look for when trying to complete tasks.
Selecting the app’s key features
Using our research findings and personas as a guide, we determined the key features for our app.
We conducted a competitive feature analysis to verify the opportunity. We analyzed the features of Trip Planner, OneBusAway, Transit, and Google Maps because they were the most popular apps for transit planning based on feedback gathered from user research and app store popularity.
UI Design Process
We kickstarted our design with a design studio for two of our main features. From this we created a paper prototype and brought it into Invision so that we could test our concept upfront.
Our initial testing was successful and participants were receptive of our concept but we noticed that users found the bottom nav to be confusing and unclear in functionality. Next, we built a higher fidelity prototype with more features and thought of new ways to implement the nav bar; we held a whiteboard session to brainstorm our solutions.
Having gained validation of concept from both research and the positive response received in initial user testing, we were confident in our solution.
Our focus moved to figuring out how to execute our solution in a way that creates an experience that is quick, effective and simple. In order to meet these goals, it was important to test and iterate as much as possible. We brought our paper wireframes into Sketch and created a prototype to test with users. Overall, users were able to complete tasks given, but we saw room for improvement.
Key feedback / takeaways from testing
We fixed the issues discovered in our usability testing and moved on to build our third prototype. In this prototype, we added the ability to see a street view of stops for those users concerned with safety.
In all, we did three rounds of prototypes and conducted usability tests on each. Working with our potential users, we were able to pinpoint shortcomings, eradicate confusion and act on any missed opportunities that arose.
For the final design, we fixed usability errors and added a crowdsourcing feature to help with sourcing up-to-date transit times, delays and any other issues to improve information accuracy.
Since working on this project, OneBusAway and Google Maps have both validated our concept with recent updates that added many of the features we used in our design.