Summary:
For this student project, we were presented with the following problem:
A new bus stop has just opened at Washington & State. It includes seven new bus lines. The city is concerned that with so many buses at the same stop, users will have difficulty determining when their bus is arriving.
Responsibilities:
I was responsible for creating a clickable MVP prototype to address provided user pain points. Tools used included Figma, Notion, and Google Forms.
Audience:
The audience for this project is bus riders utilizing the new bus stop at Washington & State.
Solution:
After conducting user research and surveys, I created a user flow to address account creation, location awareness, and display of the relevant bus arrival information at the stop. Based on my research, I also created an additional flow for users to be able to purchase their bus ticket from within the app. A clickable prototype can be found by clicking the image on the right.
Due to the predetermined nature of this project, my user research focused on features that users were most and least interested in. It was fascinating to discover that they were overwhelmingly NOT interested in destination suggestions based on their route. They also did not have much interest in sharing their estimated arrival time. They WERE interested in keeping their travel private, and nearly two thirds wanted to purchase their bus tickets from the app. This was also reinforced by my user interviews. This information determined that the feature I would add to the app beyond the dictated MVP brief was buying tickets.
Competitive Analysis:
I looked at Google Maps and CityMapper. While they are both far more feature-rich than was required for this project, I was influenced by CityMapper's simpler interface and green color palette. To me, the green supported the environmentally friendly aspect of mass transit, which I incorporated into my design.
User Persona:
Gender - Female / Age - 35 / Occupation - Freelancer / Residence - Midtown
Her Story - She rides the bus regularly because it's the closest option to her apartment. She's a freelance creative with many destinations around the city. She likes the bus because she prefers to be above ground which allows her to easily hop off if there are traffic issues that will delay her trip. She uses the city's transit website for schedule information, but is open to using newer transit apps as long as they have addressed shortcomings that were common in previous versions.
Goals - To save money by using transit and getting to her destination in a timely fashion.
Issues - Lack of accurate schedule information. Doesn't like that there aren't live updates regarding issues that may affect her trip. Wants easier payment options.
User Stories:
These were the user stories supplied with the project brief, along with input from my research, which led to the MVP.
Initial hand-drawn wireframes
Digital wireframes, created in Figma
Brand Characteristics:
Because this project is not intended for production, brand exploration was more focused on applying learned design techniques.
I chose the name MyBus because it connects the riders to both the app and the information they are looking for. In addition, my hand-drawn logo sketch evokes a friendly urban energy, while the arrows in four directions are a metaphor for the individual journey that every rider is on - always heading in different directions as we navigate city life. I also collaborated with an illustrator friend who created a full color version of the logo.
As I mentioned earlier in this case study, I was inspired by the green palette of CityMapper, so my mood board includes examples of possible shades. In addition, I used various versions of the Open Sans typeface for headings and PT Sans for other content.
Below, you will find my hand-drawn logo, the finished logo illustration, and my mood board.
Usability Testing:
Users were asked to click through the prototype to attempt to find the full schedule at the Washington & State stop, and also to explore the purchase of a bus ticket.
Changes made as a result of this testing included clarifying text on the home page to communicate that there are multiples lines at each station, as well as correcting a Back button that didn't return the user to the screen they were expecting to see.
Overall Experience:
This project came together quickly and was instrumental in improving my knowledge of Figma. If this were an app intended for production, next steps would include optimization for iOS and Android as well as adding the ability to be alerted to events that may impact the user's bus trip.
In addition to slight changes made due to usability testing discoveries, a couple of significant modifications emerged organically while building my prototype. First, my hero image became much more readable by swapping out black text for white against the dark green background. Also, to improve overall contrast, I lightened the shade of green used as the persistent background color.
Click the button below to view my clickable prototype.
This was a very educational, if sometimes frustrating, experience. My first real project definitely revealed the gaps in my knowledge, but also drove me to improve my skills and broaden my understanding of core design concepts, tools, and processes. I found that the ability to iterate and pivot were essential to overcoming roadblocks and reaching the finish line. This graphically demonstrated a core tenet of the quintessential design philosophy - The Cult of Done:
Done is the engine of more.
For more information on this or other projects, don't hesitate to get in touch.
Copyright © 2024 AR/Tech - All Rights Reserved.
Powered by GoDaddy