DESIGN ROLES
-
UX/UI Design
-
Visual Design
DESIGN DELIVERABLES
-
User Research
-
User Personas
-
Wireframes
-
User stories and flow
-
Prototype
-
UI Sketches
TOOLS
-
Figma
-
Google Forms
Overview
What is BusMap?
BusMap is a real-time transportation app that provides useful information to bus riders such as routes, bus arrival times, and directions.
The Problem
The problem that I’m trying to solve through this project is that due to expansion of the transit system in a midsize midwestern metropolitan area, there are too many buses at one bus stop, namely the Washington & State bus stop. As a result, riders don’t know which bus is arriving and when their particular bus is arriving--they can’t just run to the bus that’s at the stop anymore because it might not be their bus and they’ll end up on the other side of town which causes them to be late.
The Solution
The solution was to create an app that showed important information, most especially for the Washington & State bus stop which includes:
-
How many bus routes come to this stop
-
How far away a bus is coming, in minutes
-
Bus frequency
Research and Discovery
User Survey
In order to understand the needs, frustrations, and motivations of users, I conducted a user survey. I asked questions such as:
-
Which app do you use to navigate your commute?
-
How often do you take the bus?
-
What do you enjoy about using your preferred navigation app?
-
What would you change about your preferred navigation app?
-
What features on an app would you like to see based on your experience(s) riding the bus?
In this survey in which 20 people responded, I felt that one of the most important questions I asked was "What do you enjoy about using your preferred navigation app?” The top answers to this question were “ease of use” and “accuracy” which then helped me inform my decision of what should be some of the most important things to come out of BusMap. I also gave them questions for what they don’t like about their currently preferred navigation app as well as what they’d like to see, just so I can gauge what to avoid putting in BusMap and also later on, in future iterations, what features I should add.
Competitive Analysis
One of my biggest takeaways from the user survey was the responses to the questions "What would you change, if anything, about your preferred app?" and "What features on an app would you like to see based on your experience(s) riding the bus?" The answers to these questions indicated to me that users weren't 100% happy with their preferred app and provided insight as to what I can add to BusMap to make it a competitor. From there, I took a look at other transportation apps to find out how BusMap could enter the market.
Google Maps is used for navigation by way of car, public transit, walking, biking, or air. It shows how long routes will take to travel and will sometimes notify of delays ahead and provide alternate routes. Personally, I’ve used Google Maps for public transportation in Tokyo and New York City and its use was very helpful. However, my one complaint is that it can appear bloated with all the features it has, such as showing nearby events, restaurants (it has a yelp-like feature), and can be overwhelming especially for first time users.
Another app I looked at was Transit, which is useful for navigating public transit systems in major cities. Transit works similarly to Google Maps, where it opens up on a map. There is also a search bar for the user to input an address, which will give the user a route to the closest stop to the address. The app gives an actual timeline of the user's journey and shows how long the user would have to walk to a certain stop, where to transfer if any, and how long the user would have to walk from the final stop to their final destination. Different timeline options are also provided. Transit also shows alerts for different lines, especially since there are restrictions due to COVID. Transit's "home" page also offers common locations such as the nearby mall, Downtown LA, the transit hub, etc. I assume these are listed because these are common among other users in my general area. The downside is that it seems confusing to use, and I don’t recall there being any onboarding.
User Personas
In order to adopt a user-centered approach to designing, I have crafted two personas, which will help determine the needs and aspirations of BusMap’s potential users, maintain focus on user goals, identify features and functionalities that are absolutely necessary at this stage of development (which is creating the MVP), identify user needs, and can be a predictive tool for user behavior and possible user reactions.
Information Architecture
User Stories
One of the first things I did was create user stories so I could get a feel of what the app needs to be at its simplest and purest form, and to connect business concerns with user research. Creating user stories was very helpful in helping me create user flows. Here, I started with the very first thing someone needs to do in order to use an app for the very first time, then I went on to create two different scenarios--one as a student who needs to get to class on time, and another as a tourist who wants to use public transit to go to the museum.
User Flows
Creating user stories really helped in creating user flows. Here are my very first, very rough sketches of my user flows.
From there, I brought my user flows to Figma. This is a user flow for anyone riding the bus. No specific goal in mind, just a general needing to ride the bus.
Whereas this is a user flow I imagined for a college student who needs to take the bus to get to class but would prefer to have the bus drop them off at a stop closest to where their class is on campus. This I take from personal experience--my college campus had a good amount of bus stops around campus and each bus stop was adjacent to each department’s buildings.
Sitemap
With all the user stories and user flows in mind, I went ahead and created my first draft of my sitemap, which really reflects what I thought would have been important, but I ended up refining it later on through my prototype.
Sketches and Wireframing
Wireframe Sketch
This was my very first wireframe sketch. From sign in, the user would be brought to the main map page. There was an option for settings, and there was also an option to see nearby events, but I took those out due to them being outside of scope. I kept what would eventually become the routes page.
This is that wireframe sketch brought to Figma. I have the sign in page, and I also added options to sign in using social media, but those were later removed due to being out of scope. On the home map, I wanted to have something similar to Transit, where it shows common destinations close to the user’s location. When the user selected one “common destination” it would then show when the buses were arriving and then it would show the route. I also had a settings page, also taken out due to being out of scope.
Here is my wireframe cleaned up a little, after some feedback. I took out that settings page (outside of scope). I added an “enable location” page, and just simplified it to meet MVP. The problem was a little bigger in my head--I was thinking I had to add all these different things, all these out-of-scope features to make it look cool, but then I remembered just meeting MVP was enough.
When the user clicked on the search bar after enabling location, the three closest stations to the user would appear. After selecting “Washington - State”, it shows the amount of time it would take for the user to walk to the stop from their current location. The seven buses would appear, and would show the buses’ major destinations, followed by the amount of time it would take for the bus to arrive at the bus stop. From there, I only have one route to show.
Branding and Identity
Here is where I decided to go with my color palette, my fonts, and my logo. For my colors, I chose black to maybe eventually develop a “night mode” for BusMap. Green is the color of the line in the logo as well as the menu bar. For me, green means go, and it means health and tranquility. I wanted to evoke a calm from the stress that could come from not being able to know when the bus is coming. I wanted the user to be free from that uncertainty. Gray to me is neutral, so I wanted to add that in there. I have a yellow orange in there as well to signify joy and success because I want the user to feel happy in the success they feel when they KNOW when their bus is coming. Lastly, I have a white, but not a striking F6 white.
For my fonts, I really wanted to go for nice, clean sans serif fonts because they’re easier to read and therefore more accessible.
For my brand name and logo I really just wanted to shoot for something super simple, so I came up with “Bus Map”. My logo, which I think is pretty cool, has two circles under a long rectangle and honestly, if I tried to draw a bus for the sake of a simple sketch, this is what it would look like, but it also calls to how each point, or bus stop when a user sees their bus route, is connected.
Conclusion
UI Design Final Solution
Lessons and Takeaways
-
Creating an MVP in a short amount of time is so challenging
-
Resisting the urge to go out of scope and just stick to creating the MVP was difficult