Bus Application | Passage
Developed an app catering to individuals using an application to find their stop easily. Solely responsible for UX/UI design, employing the double diamond design process and user-centered design principles. Conducted user research and created deliverables using Figma, while utilizing Figma and Illustrator to build a branded, high-fidelity clickable prototype.
What exactly is the problem?
As a designer working with a Midwest metropolitan transit agency, I'm tasked with developing a mobile app to improve commuter experiences. The city’s expanding bus network has led to congestion at stops like Washington and State, which now serve seven different bus lines. Riders want real-time updates on when buses will arrive and how much time they have to get to the stop.
My challenge is to create an app that effectively communicates this information using the city’s data on bus locations, addressing current complaints and enhancing the overall transit experience.
Business requirements and goals.
Client Needs
Ensure riders can see when each bus arrives at Washington & State.
Display time to reach the bus stop before the needed bus arrives.
Allow selection of any of seven bus lines for future arrival times.
Design Challenges
Ensure riders can see when each bus arrives at the Washington & State stop.
Display time to reach the bus stop before the needed bus arrives.
Allow selection of any of seven bus lines for future arrival times.
Research, planning, and more research.
I started off by identifying our target audience. Our primary users are residents of a midwestern city, predominantly aged 18-55, who rely on public transportation for work or school. They are smartphone users familiar with mobile apps and seek a reliable way to navigate the complexities of the expanded bus network. Understanding their need for accurate and accessible transit information is crucial for developing a solution that effectively supports their daily commuting needs.
Once I solidifed the primary user group, I then began creating the user stories and user flow diagram.
I started off with multiple sketches in FigJam.
After several iterations, I finalized the user flow and user stories.
The content strategy focuses on creating an intuitive app navigation to enhance user experience. The site map was meticulously designed to ensure a logical flow between information screens, allowing users to easily access and understand the transit data they need. This structured approach aims to streamline navigation and make the app’s features accessible and user-friendly.
Let’s visualize.
I started with hand-drawn sketches to outline the app's layout and functionality, then translated these into low-fidelity digital wireframes using Figma. These initial wireframes were crucial for gathering and incorporating user feedback, which I used to refine the layout and interactions. This iterative process allowed me to adapt the design based on real user insights, resulting in a more intuitive and effective app.
To create a brand identity and name for the bus application, Passage, I conducted extensive research into metropolitan transportation apps. This insight drove me to develop a brand that stood out with a clean, simplistic, and engaging approach. I aimed to make Passage not only functional but also visually appealing and enjoyable to use, ensuring that the app would offer a refreshing contrast to existing options and enhance the overall user experience.
After finalizing the branding, I developed high-fidelity clickable prototypes that featured detailed mockups incorporating refined branding and usability enhancements. These prototypes served as the foundation for usability testing, allowing me to gather detailed feedback and make final adjustments. This phase was crucial for fine-tuning the app's design, ensuring that it not only looked polished but also provided a seamless user experience before the final launch.
Put it to the test.
During the usability testing, I noticed several inconsistencies in the user interface and navigational hiccups that were hindering the overall experience. After gathering detailed feedback, I made targeted adjustments to address these issues. By refining the design and streamlining navigation, I aimed to enhance the overall user experience and ensure a smoother, more intuitive interaction with the application.
Wrapping up.
In wrapping up the project, I’m thrilled to see that we successfully created a user-friendly app tailored for city transit users. I met our goals by ensuring clear, accurate bus arrival information and intuitive navigation throughout the app. Moving forward, I plan to focus on continuous improvement by incorporating user feedback and staying updated with the latest technology advancements.