Victory Bus App
Due to expansion, numerous bus routes have been recently added. Many of those routes stop at the same bus stop. Riders want to know when the next bus will arrive at each stop. They also want to know how much time they have to get to the bus stop.
Victory Bus app can help users plan the best way to commute using the city's rails and bus system. It shows live estimates for all buses and rail stations, the fastest route to take to get from point A to point B, walking or biking it, and lets you save your bus/rail itinerary for future reference while.
Research and Discovery
HOW DO COMMUTERS PLAN THEIR BUS TRIPS?
I learned during my research that most commuters planned their trip in less than an hour.
Before launching the MVP, I gathered feedback from existing transport.
What were the most important app features to them?
Users wanted their app to help make their commute experience easier when navigating a city.
They also wanted a more user-friendly and efficient app that provides real-time arrival times for upcoming buses.
The key finding from this type of persona was that users want convenience and speed when navigating the city. The app should have favorites and arrival times so users can reach their destinations in a timely manner.
The most important goals from the user journey were the wait time and locating the bus. Users often feel frustrated and impatient when they are on the go.
A key takeaway from the user journey was that people wait for the bus for a long time without knowing where the bus actually is.
The user journey mapping helped me to design a better product by eliminating those pain points.
The first app I analyzed was the Moovit app. I found the interface of this app intuitive and I was able to easily find what I was looking for all on one page. I also enjoyed the friendly logo design.
The second app was the Transit app. I thought it had several useful and clearly identifiable icons to find what you’re looking for, but I also found the interface to be overcrowded and overwhelming. There was too much going on the one page, especially if I’m in a rush to find a bus stop and arrival times, it’s easy to get distracted by the other options on the screen.
Using pencil and paper to draw out my ideas before moving onto low-fidelity wireframes. Sketching gives me a more visual effect of what the design will look like during the development phase.
Low Fi Wireframes
At the beginning of the design process, low-fidelity wireframes were created in Figma for testing purposes.
Before launching the product, I did a testing round in order to reveal possible usability problems. Once usability mistakes were tested, designing the final Material Design screens in Figma began.
As you can see, my initial high-fidelity mockups were not easily accessible for most users.
The Progression on the right has toned down colors that are more accessible with the arrival times clearly stated.
User Story & Site Map
The top 3 most important features for the app:
Easily search for the bus in the app
See the current location of the bus
See where the bus is now
While this was my first project creating a mobile app, I knew I had to approach it with an open mind. I wanted to be sure that I included all the critical information based on my persona and testing results.
After revising my sketches, I moved forward, creating low fidelity and high-fidelity interactive wireframes that provided Tonya with an app that solves all the issues found during my observation. She can now find bus routes in her area and view all scheduled arrival and departure times. Tonya can select as many routes as needed and have the option of saving her itinerary. Tonya will get notifications of all delays that would delay her travel plans.
I enjoyed working with some of the tools and creating the app within the UX design guidelines. Working on this project taught me that the best designs are consistent, and it also makes a good user experience, not necessarily the flashiest features of an app.