UX/UI Design
Research
Information Architecture
Visual Design
Interactive Prototyping
Testing
User Surveys
Competitive Analysis
User Interviews
User Personas
User Stories
User Flows
Wireframes
Style Guide
User Tests
Hi-fi Mockups
Prototype
Paper and Ink
Google Forms
Google Slides
Unsplash
Adobe Photoshop
Figma
3 Weeks
I was assigned to create a mobile application operated by a local transit system for a mid-sized Midwestern metropolitan city for thousands of commuters using transit tracker technology.
Due to expansion many bus routes have been added and often multiple buses stop at the same bus stop at the same time. Riders were complaining that their bus expected schedule was inaccurate and many times they miss their bus or run to catch a bus that isn’t theirs, specially at the bus stop in Washington & State Ave.
Design an application that allows users to know which specific bus is arriving and when their bus is arriving.
.png)
I started the project by learning more about my users’ experiences with bus commuting. Understanding my users’ behaviors gave me a clearer idea of the features that I needed to include in gOhio. I created a user survey to obtain quantitative data and 31 bus riders of the greater Cleveland, Ohio area took the survey.
.png)
.png)
Watching my bus take off without me
The amount of time I waste waiting
Waiting for it in the cold
How overcrowded it is.
Inconsistent schedule
Making connections to other lines
Congested bus
Lateness
Loud passengers
Not Enough Suburban Routes
How rude some bus drivers are
Having to stand up
Not enough buses on Sunday
Some drivers are rude
Hard to predict when will the bus actually arrive
The crowd
When the bus is late and I miss the next bus. Or when the bus comes ahead of schedule
Waiting if it's cold and rainy
When it is late and I have to be on time to work
Rude passengers and weird smells on the bus.
Late buses
There's no replacement for a broken down bus, you just have to wait for the next one.
The rude bus drivers.
Being handicap and told to move from seat for another handicap person!
Delays, the routes are very long.
People
Waiting for the bus and no seat to sit down 😡Disrespectful people on the bus
Too many people in a small place
Waiting in the cold when it doesn't come because it's late
Too many people are rude and annoying
I then conducted a user interview where the user walked me through his experience using a public transportation application. It gave me a clearer understanding of his frustrations and needs.
The interviewee is a 40 year old from Cleveland, Ohio.
.png)
Tamara, 30
• Key Bank
• Assistant Manager
• Cleveland, Ohio
• Bus Commuter
Tamara is a young professional, lives outside the city and uses the bus to get to Downtown Cleveland for work. She is very social, a multitasker and a hard worker. She is often asked to be at work at different times during the week. She is looking to impress her boss and be well-liked by the higher ups in her office so punctuality is very important to her. She enjoys happy hour after work and the convenience of her cellphone.
• Recognition at work
• To know her bus arrival times
• To be considered reliable by her boss
• Improve her multitasking abilities
• To be responsible for the whole office needs
• Spends too much time outside in the cold weather waiting for her bus to arrive
• Runs to the wrong bus too many times
• Bus routes and schedules in the transit website
• Would like to know how much time she has to get to the bus stop
• Jonathan, 36
• FIT Technologies
• Software Engineer
• Cleveland, Ohio
• Bus Commuter
Jonathan works and lives in Downtown Cleveland and uses the bus to get around the city. He and his wife just had a baby and his wife expects him to be home soon after work. He enjoys a calm bus ride where he can listen to a podcast, unwind and have sometime for himself. He understands technology and believes it should be used to improve quality of life.
• To be a good husband and father
• Nurture his mental health
• To know his bus arrival times
• User centered technology
• Relies on his phone for information and entertainment
• Needs a simple ‘Favorites’ button in all his apps
• Loud and crowded buses
• The current bus schedule on the website is over intricate
• The current bus app times are inaccurate
• Would like to know when to start walking to the bus
Then I created a competitive analysis between Transit, RTA GoMobile, and Google Maps because they were the top rated bus transportation applications on Play Store at the time.
• “Where to?” button is clearly visible
• The words “Where to?” are understandable. Clear command
• The app tells me when to leave, when to arrive at bus stop & when my specific bus should be arriving
• After user inputs destination it’s unclear for first time users who don’t recognize the area what to input next
• It wasn’t intuitive to move the map to know the “Starting” address
• The timeline scroll is too long to drag
• The break between walks is confusing
• The titles that have a higher hierarchy are in grey color and small font therefore become unimportant and overlooked
• The map with bus stations nearby is intuitive and effective for first time users or returning users
• The stop # and bus route is well highlighted and understood
• The user flow is easy to follow
• The user can find the bus arrival times of each bus stop by clicking on each bus stop on the map after defining the bus route
• The user can’t see the next arriving bus at a bus stop only individual bus route schedule
• Too many bus routes to choose from the beginning of the app experience
• The map identifies the closest bus stops near you but the icons are idle
• The destination and current location inputs are easy to use and understand
• The user flow is easy to follow
• Car, walking, bicycle or public transportation options are clearly visible without taking your destination primary focus
• Vehicle map directions are simple and uncomplicated
• The directions for the recommended route on public transportation mode are not easy to follow when they include Uber, bus, train Lyft, and walking together
• There’s a lot of options and it can be distracting or overwhelming
After understanding my users and reviewing my research, I created high and low priority user stories and developed them into user flows.
First Time User
Create an account
High
Returning User
Pay for fare
Look up the next arriving bus at their bus stop
Look up their bus arrival time
Discover which bus they need to take
Know their bus capacity
Scan their bus ticket
Go to favorite destinations
High
The user flows helped me organize the process of each task in the application with the minimum amount of steps and problems a user can encounter.
.png)
I then created a possible site map of the website.
I drew a few quick sketches of how the website should be structured and how the home screen could possibly look like.
The wireframes served a clearer vision of how the users will interact with the application. Then, I conducted quick informal product testing, revised and changed the architecture of the application along the way.
The application original home screen had two buttons options; My Bus and Trip Planner. That screen added an unnecessary step to the user. Therefore the home screen evolved to the Where To? home screen.
gOhio was inspired by the city and people of Cleveland, Ohio who are always on the “Go”. So I merge the words, Go and Ohio together.
gOhio’s logo was inspired by the wheels of Cleveland’s transit authority buses.
The primary colors of the app were abstracted from the city’s new basketball team, the Cleveland Cavaliers because it’s the heart and love of the city. I also double checked the colors and fonts for accessibility compliance.
After the wireframes, the structure of the pages and the branding of the website were completed, I created the first High Fidelity Mockup. Here the user gets a prototype with the major concepts worked out and a clickable experience.
I tested the application on two bus commuters. The participants used a Figma prototype play screen on a laptop and were recorded through Zoom. I gave them three tasks and asked them to perform these tasks on the application and talk out loud what they were doing while they navigated through the application.
The participants gave valuable feedback, compliments and suggestions.
With gOhio, users can now see their bus schedule and decide which bus to take according to their destination and bus capacity.
The next step will be to design the bus fare payment flow. According to my user survey, my participants prefer to pay the bus fare through a bus transit application.
This product was successful because I created an Minimum Viable Product (MVP) public transit application for bus commuters. Due to time constraints, I wasn’t able to include a Login Page and ‘Favorites’ button to allow users to quickly save and find their bus arrival time without having to select a bus route or bus stop. It will save users more time. But the application has enough features to complete all our goals plus bonus features my research lead me to design.
Thank you for stopping by, I hope you enjoyed my work. If you want to chat about UX or have any questions, feel free to
contact me.
.png)