IOS App
Help commuters better optimize their travel
1 Product Designer
2.5 Months
Figma
Commuting is an unavoidable occurrence in life that we all deal with on a regular basis. For most it takes a few hours out of our day on average, but when these hours are added up over the years they can amount to a huge portion of an individuals life. This time spent stressfully waiting in traffic or a bus delay could be better used for my important things in a commuter's lives.
Commuter have trouble navigating and anticipating the countless stressors that come with commuting. As well as figuring the most optimized routes to get where they need to go on time.
Create a personalized commuter ecosystem and navigation app tailored to each commuters own routes. This will help them better optimize their daily commutes and give them real time alerts and route recommendations so they can better anticipate the many stressors of commuting.
To help everyday commuters, research would need to be conducted to better understand as well as identify the varying sects of commuters. There would also be a need to explore and account for all the various nuanced issues a specific commuter could potentially face. For example a person who commutes to work via a car could have completely different needs and expectations than someone who takes the same subway train everyday.
These following research techniques would be used to help identify and better understand all the multi-faceted problems commuters face everyday.
Establishing assumptions ahead of time helps give overall context as well as a direction to a study.
Assumptions established were as follows:
To get a broader understanding on the topic of commuting secondary research was conducted. Information was collected about the multifaceted problems in the space of commuting. This information was collected from a multitude of different articles, periodicals and studies to provide a solid base for research.
Here are key highlights:
The secondary research helped establish a solid base of information about all the multifaceted issues in commuting. Now with a greater understanding of the topic it was time to validate secondary research and assumptions by collecting qualitative information from talking with real commuters. This would help document and chart the different rational and micro-thoughts of commuters and their routes. Also during the interviews the pre-synthesization process could begin. This would entail documenting and categorizing all the interview data collected such as quotes, insights, and pain points and beginning to note commonalities and differences in the date.
The actual interviews themselves began with a recruiting phase, where different groups of the population were sent screener surveys asking them very general questions about their everyday commutes. The screener surveys served two purposes. One, all the answers collected could be added as qualitative data and two the screener that would help filter for potential interview participants. After filtering and reaching out to different candidates, I was able to set up and conduct 5 interviews. The interviewee pool was chosen to represent a diverse base of commuters that accurately represented the different segments of actual commuters.
Different Highlights from the interviews:
Then began the synthesization process where all the all the information collected from the interviews such as all the observations, quotes, pain points, and attributes. This diverse range of information was then cataloged on digital sticky cards to make make it easier to compare and reorganize different information into groups of common threads. Once completed and sorted the 4 different categories below arose. Having all this information categorized also made it easier to compare and contrast all the different experiences and attributes of commuters as well as provide a space to start brainstorming different solutions.
Two distinct empathy maps were created from the synthesization process where two potential users for the commuter app arose. These two empathy maps reflected real attributes, quotes, and feedback from the participants that were interviewed. Empathy maps create a good bridge to building personas as well gives an accurate depiction of the thinking and feelings of the user base.
This information was then refined to create two hypothetical users, "New Navigator Nate" and "Busy City Coretta". Both personas represent the two varying groups that desperately needed better optimization in their commutes.
The first persona, "New Navigator Nate", is new to public transportation and is experimenting with different routes to get around the city. He is also trying to figure out the quickest route to his job since he often over sleeps and has to leave in a rush. The second persona was "Busy City Coretta" a busy career woman who lives in New York City and in her own words says she has been working at her job "far for too long". She is different than Nate since she already knows and uses the same subway route to get to her work. Her problem stems from being too dependent on that same route and when there is issue with the route her entire day is thrown off. She is also in need of a more advanced notice when leaving her home so she can better anticipate subway issues and take a cab to work instead.
Establishing the different problems each of these hypothetical users faced provided a good jumping off point for brainstorming different solutions for better optimization. A goal was to find a solution that was general enough for any commuter to use but specific enough for these two users to be able to personalize around their specific commutes.
After research and personas were established the concepting phase was started. Which involved brainstorming different end to end solutions for each personas distinct problems. The first thought was that the information structure and presentation would need to be similar to other navigation apps but this experience would be specifically catered to the nuances of each user's commutes. Features needed to be created and arranged in a way that was easy for busy commuters to navigate in a stressful or busy situations like having to find a new bus route. During brainstorming the decision was to have the focal point of the app be centered around each users specific commutes which would be called the "landing screen". This main screen would help user's anticipate their specific commuting issues with an advanced alert/suggestion system as well as provide a way to get real time feedback from other commuters on the same route.
Once the core features were established they were then organized using a site map. This would help establish and finalize the information architecture ahead of time which is a UX best practice before starting the wireframing and UI proccess.
.jpg)
Goals for the site map were to follow core principles of information architecture to help decide what information would need to be most present and in what order. The key screen and anchor point of the app would be the "Landing Page" which would display the status of the users commute, alerts, and alternative routes. Other features such as personal commute settings and a communication forum would be able be switched interchangeably from the navigation tab.
The overall structure was organized similar to other navigation apps but with the user's commute as the base for navigation and route information. The application was also structured this way to stay congruent with user's past mental models of navigation apps. Reinventing the wheel with how a navigation app is ordered would only increase the amount of time spent onboarding as well as the overall mental load of a stressed out busy commuter.
Once the basic flow of information was in place it was then time to begin brainstorming the visuals and placement of different features. To begin this process these rough sketches were created to quickly visualize key features and screens that would make it easy to compare and contrast different visual ideas without investing too much time. These included screens such as the landing/home, personal setting, communication, and a navigation page. One consideration when it came to the UX was including all the nuanced information a user might need to make decisions on their commutes, but also to layout this detailed information so it's not too overwhelming. The key was to establish a balance between structure, placement, and sizing off all the commuting details and features.
These sketches were turned into rough prototypes testing layouts and features to help weed out instances of inconsistency in layout design and visual structure. After testing, some key features had to be rearranged and resized for the actual wireframes.
Using the rough sketches as guides, wireframes were created showing the basic foundations and structure of the commuter app. Here are the three key scenarios shown below that display the essential features of the app.
The three scenarios are as follows
Scenario 1: Showcases the communicate feature of the application where users receive and contribute to real time comments and information with others on the same route as them. This feature would be key say to finding an advanced notice of a subway delay that has not yet been reported.
Scenario 2: A spontaneous navigation function that is also seen in other navigation apps and would be key if the user wanted to travel to another destination aside from their set commute routes.
Scenario 3: This 5 page story show the flow that a user would go through to modify the leave time of a commute to work. This showcases the personalization of the user commute setting tab where users can adjust their specific commute information and preferences.
Once the designs for the initial wireframes were finished then began process of developing a UI that would add an aesthetic structure to the wireframes. The general theme for the UI colors and typography was to invoke associations of fun, consistency, and calmness. When we put ourselves in the mind's of our user base they could be opening this app in the midst of something stressful like waking up late for work so it was best to avoid colors and fonts that would be deemed too "stimulating" to some.
The main driving colors for the commuter app are calming teal blues and complimentary grays. Their secondary color is a mustard yellow that provides contrast and highlights certain elements when needed.
The two font choices are two google based fonts Poppings and Lato. These two san serif fonts compliment each other nicely with the Poppins being the primary headline font and the Lato the secondary description font.
Moderated usability tests were conducted with 5 different participants. In them each participant was tasked to perform various actions in the three established scenarios. Also during the tests they were asked to give feedback about things such as the process, context of where they were, and the rational behind each decision they made. Overall each tester went through all three scenarios smoothly but there were a few issues noted that needed to be tweaked within the next iteration of the application.
Noted issues to fix from testing:
Final UI and UX are reflected above with incorporation from feedback from usability testing. Highlights of changes are as follows:
Confirmed Assumptions: During the interviews a majority of the participants communicated a lack of alerts and advanced notice from their navigation apps they usually used. Also during testing participants responded very positively to the advanced alert system and "commuter tag" feature which validates the assumption about user needing a more in depth and anticipatory route alert system. Also during testing user's communicated that a navigation app catered more towards their commutes would help them easily see which route to go on when leaving in a rush and would reduce overall commuting stress
Challenged Assumptions: Both in the prototype testing and interviews the participants actually wanted and responded positively to areas with more intricate details about their routes so this challenged the assumptions about a potential detail overload with commuters.
Lessons Learned: One big lesson learned was how ingrained user's past mental models are, and sometimes it's better to do slight tweaks than completely reinvent a new mental model that users would have to relearn. Some more personal lessons learned when starting this project was a better understanding of UX Design as a "process" and immediate solutions would not become apparent until further and further iteration. Next time around I would also not put as much pressure to force perfect solutions out at initial phases and to be more patient with the overall process.
Next Steps: For next steps I would like to add more features to the "Interact" section of the app such as an open forum where commuters can upvote and downvote different tags and comments created by users. As well as I would maybe explore adding a rewards system to incentivize users for actively communicating accurate and valuable commuting information.
