Overview
Audience
The target audience was public transportation users of Chicago, specifically people who needed to ride the bus.
My Role
My roles for this project included UX Design, branding, user interface, user research, wireframing, prototyping and user testing. I worked independently with insight from a mentor.
Scope
As this was a course project, there was no budget allowance. It had a strict timeline of one month, and was completed late April of 2022.
Problem
Chicago transit officials have under covered a major issue. Since their expansion, numerous bus routes have been added, and some of them are at the same bus stop as other routes. Commuters used to be able to know that the next bus approaching was the right bus since it was the only one. Now, specifically at the Washington & State stop which is served with seven different routes, commuters need to easily be able to figure out which bus is approaching, how long until their specific bus is coming, and how much time they need to get to their bus stop.
Solution
Ryder is a mobile app that was created to provide ease of use when using Chicago's many bus routes. Transit officials asked me to create an app for the department of transportation.
Process
Initial Research
I started the process by creating a simple survey of 18 questions regarding public transportation and shared it on my social media. 27 people participated. Living in the Greater Phoenix area, I never really used our public transportation as everything is pretty easy to get to with a car. Luckily I have a few friends that live in Chicago and Manhattan and they were happy to participate.
Survey Findings
​
​
78% said they only use public transportation sometimes- only when they have to
93% of participants had used an app for public transportation in the past
76% said ease of use made for a good app
64% said that that not requiring a subscription made for a good app.
63% said they used the app for finding fastest routes and viewing arrival/departure times
User Persona
Competitive Analysis
Next I did a competitive analysis between two apps that I had never used before. I chose City Mapper and Moovit. Both of these apps had an overwhelming amount of information and features and it took me a minute to navigate each site. I used the SWOT model to compare the two before I had created Ryder. I saw some features in both of the apps that I wanted to put in my design, but I was very limited with what I could include. The biggest difference between the two apps was that City Mapper had a paid subscription option. You must purchase the subscription in order to filter routes by fastest, cheapest, or fewest transfers. Filtering by the fastest route was the feature that the participants of my survey used the most. There were some cool features that came with the subscription however, such as being able to track your CO2 saved, calories exerted from walking, and money saved over a year. Both apps are designed well, but Moovit was noticeably harder to navigate than City Mapper. The site navigation was not intuitive, I kept trying to get back to the ‘main page’, but I was already on it.
Strengths
-has lots of options without having to type in a destination
-site navigation is intuitive, though more complex
more of a home page feel
Weaknesses
-at first it said that my location was out of scope, however it should work in all major cities. After refreshing it seemed to work.
Opportunities
-can join CLUB for extra money to get exclusive features: app icons, extra routing powers, emoji dot, rain alert, price info
-can track co2 saved, calories exerted and money saved.
Threats
-must purchase subscription in order to filter routes by fastest, cheapest, or fewest transfers.
Strengths
-new ‘improve your city’ feature
-can save home and work locations as favorites
Weaknesses
-design does not showcase all options on home page,
have to search for a place to go rather than see options.
-site navigation is not intuitive, feels like i can’t get back to the ‘main page’
-Can request an Uber ride from the app.
-Can sync your calendar
-Can find bike stations and electric scooters after searching
Opportunities
Threats
-Can’t see bus stops on a map without searching for a location
-It takes longer to find what you are looking for
Business Requirements
Ensure that any rider can tell when each of the buses arrives at the Washington & State bus stop.
Ensure that all riders can tell how much time they have to get to the Washington & State bus stop before the bus they need arrives at that stop.
Allow riders to select one of seven bus lines to see a list of its future arrival times at the Washington & State bus stop.
Information Architecture
User Stories
1. As a bus rider, I want to know when my bus is arriving at the Washington & State bus stop, so I can calculate how much time I have to reach the bus stop.
2. As a bus rider, I want to know the next bus arriving at the Washington & State bus stop, so that I don’t rush to the bus stop if it is not my bus.
3. As a bus rider, I want the ability to view future arrival times for any of the seven bus lines (serving Washington & State), so that I know when my bus arrives.
User Flow
Wireframe Sketches
I based my screens off of a simple user flow that took the user from entering in their origin and destination, to selecting their route, navigating to the bus stop, and finally receiving a notification when the bus arrives.
Digital Wireframes
Brand Development
Style Tile and Typography
For the Style Tile, I ended up choosing one of the images to represent the theme for the screens, and built around it. The image represents the hustle and bustle of a crowd, but is still shown with calming colors. I liked how the peachy orange complimented the blue buildings, so I used those colors right from the picture. These colors, plus black, off black and off white blue were my color choices. These bright colors provide a nice contrast to the black that promotes usability and accessibility for users with colorblindness or vision impairment. I chose a sans serif called Merriweather as the font, and made a logo using text and an icon.
Prototyping
Low-Fidelity Prototype
I quickly realized that there were severe limitations for what I could do in Figma when it comes to tracking a user's location. I ended up taking out the screens where the app helped the user navigate to the bus stop, as I could not figure out how to simulate the experience. I ended up creating more screens than I had originally anticipated, because some ideas were harder to conceptualize than others, and needed additional animations.
​
I created components and I added some simple animations to recreate a smooth user flow.
High-Fidelity Prototype
For the high fidelity prototype, I used the UpSplash photo for the intro page, and incorporated the peachy orange and blue for the main colors. I used the black as a background, as well as the dark grey for container backgrounds.
User Testing
Next I tested the apps functionality with five different users. The prompts I used for the testing were modeled after my User Persona, Chris.
​
​
"Imagine you are a realtor, and you need to get to a house showing across town. The area that you are going has very little parking, so you decide to take the bus."
Tasks:
1. Enter in your route (current location to 1129 N 11th st) and find which bus will get you there the fastest.
2. Check the upcoming times for all approaching buses that are coming to Washington & State bus stop.
3. Select Bus A that is arriving at 10:15 am.
4. Set a notification to remind you when your bus is approaching.
5. There is another bus approaching soon. Figure out which bus is arriving next.
6. Dismiss your 3 minute alarm.
7. When your bus has arrived you can dismiss he notification as well.
Results
Overall Success Rate
83%
.png)
Initial Iteration
After the first user test, the participant said the search bars get lost in the map. I needed to put them in a different spot with a dark background so that the user can focus their eyes where they are supposed to.
.png)
.png)
.png)
.png)
Problem #1:
The Success rate for task 1 was 0%. Although each person was eventually able to do the task, they were each very confused and did not know how to enter the location without help.
​
The reason why the users were confused was because of the limitations of the prototype. I had it set up to automatically populate when they pressed any key on the keyboard. The users click on the GPS tracking icon to get the app to track their location.
Proposed Solution:
I needed to take away the GPS symbol, as the prototype itself cannot use the users GPS. It is confusing and not necessary. Instead I replaced this with an IOS screen asking the user to allow the app to track their location. After the user accepts this feature, I made the map zoom in on a location, to recreate the effect of finding their current location.
​
I also added an icon for the destination, and labeled both on the map to show the path the bus would take.
​
The maps felt cluttered with all of the icons on it, so I found other map images with no icons. This made the screen feel much more clean and easy to see exactly what the users were supposed to focus on.
.png)
Problem #2:
Task 2 had an 80% success rate for finding arrival times for all buses. There is a toggle to switch views, one user wanted to click on the text underneath to activate the toggle.
Proposed Solution:
I put the text directly in the toggle to avoid any confusion on where to click.
​
I also added some new screens to show the app was calculating the route. Processing time gave it a little more of a real feeling.
.png)
.png)
After several iterations the app was ready to be tested again. I went back to the same five people that I had originally tested, and everyone was able to accomplish all of the tasks perfectly! SUCCESS!
Iterated App Prototype
Conclusion
After the final iterations were made, I went back to the business requirements to ensure they had been met; I had created an app that allowed the bus commuters to ensure that any rider can tell when each of the buses arrives at the Washington & State bus stop. I had ensured that all riders can tell how much time they have to get to the Washington & State bus stop before the bus they need arrives at that stop. I had allowed riders to select one of seven bus lines to see a list of its future arrival times at the Washington & State bus stop.
​
​