Roles.
- User Research
- UX Design
- Visual Design
- Prototyping
- Usability Testing
Tools.
- Figma
- Google Suite
- Adobe Suite
Team.
- Solo project
Can we make a transit system simple?
The Challenge.
Transit apps are a dime a dozen and most people are already using one. While the goal was to create a app that accomplished the goals set out by the brief and keeping the app within the MVP, the app also needed to create a simple and easy to use interface.
The Brief.
The client wanted a app would focus on solving three main problems:
- ✔︎Riders needed to be able to tell when buses would be arriving at stops.
- ✔︎They needed to know how much time they had to get to the stop
- ✔︎Riders needed to see future times for each route.
Research.
Living in Chicago, I had access to a large group of users that take a bus or train often. Having a week to get as much information as possible I broke down my research into 3 steps.
1 Develop a quick to get high level information about potential users and try to understanding what users current habits are.
2 Interview a number of people with targeted groups to distill motivations and pain points of the travel experience.
3 Analysis and Filter the collective data to develop personas and journey maps the would help focus the design.
Competitive Analysis
I compared three main transit appications on IOS that are frequently used within the city. I created a SWOT analysis of each to determine key insights on feature and functions the worked well and those that should be left alone.
City Mapper
This app gives a lot of information and really calculates your entire trip. The clean and easy UI makes it great to look at but there is a lot of information to distill when you quickly need info.
Transit Stop
This app was close to the direct opposite of citymapper focusing on individual stop and allowing the user search transit times at stops. It was great at getting specific info but hard to navigate.
Ventra
Ventra is the native app in Chicago. Allowing features like paying from the app however finding bus times was confusing and complicated.
User Insights
Transit apps are a dime a dozen and most people are already using one. While the goal was to create a app that accomplished the goals set out by the brief and keeping the app within the MVP, the app also needed to create a simple and easy to use interface.
Most users (85%) use the transit system weekly.
Most people don't need to use the entire transit system. Users need to look up 2-3 routes max.
65% of users use public transit mostly for commuting purposes.
Personas
Design.
After figuring out who the users were and their pain points, I was ready to define the solution. Starting off, I created several user stories to help decide what should be included and what the minimum viable product (MVP) would be. I could then take these and worked out my initial thoughts on user flows and a site map.
User Stories
High Priority User Flows
- ✔︎As a rider I need to find when the next Washington and State bus is coming, so I can get to the stop on time.
- ✔︎As a rider, I need to know what bus is arriving to a specific stop next, so I don't accidently get on the wrong bus.
- ✔︎As a rider, I need to see when the next 3 buses are arriving to the Washington and State stop so I can plan my next hour.
Secondary User Stories
- ✔︎As a frequent rider, I need to save my used rides so I can quickly access them.
- ✔︎As a rider, I need to see the bus route so I know which bus to take.
- ✔︎As a rider, I need to know of any issues that might cause the bus to be late.
- ✘As a commuter, I need to know how busy the bus will be so I don't have to wait at the stop for multiple busses.
User Flows
Wireframes.
Focusing on my user stories and sketches, I then quickly laid the wireframes out in Figma. At this point, I focused on figuring out the critical information while also creating a clean, simple layout. Since my research had shown people mostly only need access to two to three routes, I wanted to make it easy for users to customize the app to see their main bus routes right on the home screen. After getting the screens laid out, I turned it into a quick clickable prototype and got feedback for iterations.
Branding.
After a series of iterations for my wireframes, I felt I had a good base for the design and started looking at the theme and assets. From the start, I was trying to simplify the complex system of a transit system. Searching for inspiration I found the massimo vignelli subway map design. I started to look into Swiss Design. Using this minimalistic and bold style, I figured, would help convey a clean layout, and allow people to ready the information fast while they run to their bus or take a peak during their morning coffee.
Style Tile
clean
bold
to the point
Hi-fidelity Mockups.
After incorporating the branding, the outcome became a little bolder. After which started connecting frames in Figma to create a clickable prototype and get it ready for user testing.
User Testing.
I started User Testing by finding five participants to help with a series of usability tests. Through these tests, I wanted to focus on if the app accomplished good flow throughout, and users thought that this would get them the information they needed fast. For this, I created a series of tasks for users to do in the prototype to see where people would get stuck or where people were having any trouble navigating.
Outcomes
The Positive Results
- The app was intuitive enough as all users were able to make it throught the usability tasks and find the goal without much problem.
- The Home Screen was liked for how simple it was, most users said that they liked that they could easily see the important stops without having to go further into the app.
The Points for Improvement
- One main comment I had was the accessibility of some of my text being too small to read.
- Because I started out on a dark mode option, some were confused and I got "but I mostly take public transit in the day"
- For the UI there was some issues with the notification button causing the times to slide over an not be centered
Intuitive, feel like anyone could pick this up and know where to go.
- Matt, Commuter
"
Oh! This simple, I like that you can save a stop and see it right away.
- Bob, Daytimer
"
Solution.
Quick look.
Since I knew my users only need access to a select few routes and users would use the app to glance that their chosen bus routes quickly. I wanted the Home Screen to be customizable only to hold individuals saved favorites. This layout would give the users the information they needed without making the display complicated to look at.
Find your bus.
The second major flow was the ability for users to find and search through all the bus routes and stops to find the ones they need. Whether users choose to search by list or by the search feature, they should find their needed bus route within 3-4 clicks. Users can simply click the save button to see the favorite on their home screen.
Next Steps.
Some points that would be great to focus on on next steps of the project
- ✔︎Adding connections to wearables to make retrieving favorites even easier.
- ✔︎Add notifications and allow user to customize what information they want to know.
- ✔︎Continue to organize and clean up the UI, This would include focusing on creating a version that isn't in "Dark mode"
Conclusion.
For my first project, this was a good lead way into learning how to focus on the research to make a minimum viable product and not bite off more than you can chew. It kept me focused on the main points the client was trying to solve even though it was tempting to add more. It was also really a first attempt to learn about IOS and Android standards and develop a design to their guidelines.
Better Next Time
You can go into a project thinking you have a good understanding of what might need to focus on a design. However, research is essential and can change that focus very quickly.
For this project, I tried to design for the Dark Mode trend because it confused people. I should have started with a more average representation of the app off the initial start. I was stuck on dark mode because it is new and cool. While knowing the trends is good, forcing a fad for no reason is a bad design decision.