Desti: A Commute Alarm App for Commuters — A UX Case Study Project
This UX Case Study was inspired by a whiteboard design challenge that my friend and I practiced in order for us to hone our UX Design skills. We then saw its potential to become an actual case study project. We wanted to design a digital product that solves a prevalent issue, particularly about what causes Filipino commuters to miss their stop.
The Whiteboard Design Challenge
“Have you ever tried to take a short nap on your commute ride only to wake up and find yourself at the end of the line? How can you help passengers wake up just before they reach their stop?”
This statement traces back to a time when a friend of ours told us his experience in nearly missing his destination when he took a short nap on a bus ride. This inspired us to validate this experience by confirming with our friends and colleagues, that it is indeed a prevalent issue in the country’s public transport system due to a lot of factors.
Want to read this story later? Save it in Journal.
My Role
My role was to lead the research process that included conducting desk research, screener surveys, competitor analysis, user interviews, card sorting, usability testing, and as well as the visual branding design of our digital product.
Project Goals
- To create a mobile application that helps commuters not miss their stop
- To create a simpler means of searching for commute destinations
- To increase commuters’ alertness of their surroundings when they commute
Design Process
We followed a design process that allowed us to understand how each phase is connected to one another and how it should be carried out in an iterative practice. Through this design process, we wanted to ensure that our work and design decisions are strongly backed up by research and the understanding of our users’ needs, goals, and pain points.
Research Overview
Desk Research
To further deepen our understanding of the problem space, we conducted desk research based on secondary research. We focused on the current state of the public transport system in the country, the common types of public transportation in the country, and how commute trips contribute to commuters’ lack of sleep.
How is the state of the current public transport system in the Philippines?
There has always been a plea to improve the mass transport system in the Philippines. Anyone who faces the daily commute in Metro Manila and any other city in the country is no stranger to long hours of traffic and unpredictability, whether or not commuters will arrive at their destination in time. Cities like Metro Manila experience major traffic congestion because of high economic and population growth in the last decade. More investment in highways, skyways, MRT, and bus systems, financed by a simpler, more equitable, and efficient way of handling tax policy reforms could be a significant step in solving this issue.
How does the current public transport system affect commuters’ sleeping conditions?
We learned that commuters become sleepy because they need to wake up early and are often sleep-deprived. They need to prepare for work and for bedtime to get adequate sleep, yet traffic congestion makes it impossible to allow commuters to arrive on time to their desired destinations.
- Commuters face the daily struggle of having to commute from one destination to another as they sacrifice their sleep and energy just to wait in line for the next train or jeepney.
- Lack of sleep results in fatigue which makes a commuter prone to headaches, dizziness, and weakened muscles. People may also be too tired to be physically active after a long working day and commute.
- Sleep deprivation can lead to productivity loss because one cannot focus on his or her tasks.
- Commuters who experience a sense of time pressure have daily risks of being late for work or for an important meeting which causes stress.
- Since public transportation and urban infrastructure are limited, it affects the daily lives of Filipino commuters who spend their days commuting.
Competitor Analysis
After doing desk research on the state of public transportation and how it has affected commuters in the Philippines, we conducted a benchmark analysis / competitive analysis to begin looking at different companies, apps, and services that try to solve the problem space — Grab, Angkas, Sakay.PH, ikotMNL, Waze and Google Maps. We also classified each company as to whether they could be a direct or an indirect competitor. Direct competitors are those within the problem space, while indirect competitors are not directly related but could still partially contribute. Then, we identified the core features of the popular transportation and navigation apps that commuters use such as booking a ride, viewing calculated fares and estimated time of arrivals, predicting traffic conditions, and many more. Moreover, conducting our competitor analysis gave us an overview of what has already been done and what we can still do in solving the problem space.
Screener Surveys
To better understand Filipino commuters’ experience in the country’s public transport system, we conducted screener surveys through Google Forms. The survey was a mix of both qualitative and quantitative questions that allowed us to get our participants’ insights ranging from their demographics, preferred apps or platforms, and overall commute experience in the country’s current public transport system. This is to ensure that our research study is built on insights from high-value participants through criteria.
Quotes from commuters on why they commute
“I commute because it’s convenient and not too expensive (to save expenses)”
“I commute to get to school early and go home”
“I commute to run personal errands or to hang out with friends”
“I commute to get to the office and get in time for meetings”
“I commute as it’s more practical in terms of effort and monetary”
Quotes from commuters on why they miss their stops
“Yes, because my mom and I both fell asleep”
“Yes many times, because of falling asleep while on my way to my destination”
“Yes. Whenever I fall asleep or when I don’t know the exact address of where I’m going to.”
“Sometimes I miss my stop when I’m too busy using my phone.”
“Yes, I wasn’t paying attention, I was using my phone or worst case, I fell asleep.”
“I have because I passed out.”
“Yes, I was focused on my phone, a friend I’m commuting with (that doesn’t share the same stop with me), or a nap that went too deep.”
“Yes, because of the right loading and unloading.”
“Yes, because I fall asleep or am not familiar with the place.”
“Yes, during my college years. I’m so sleepy and tired after my ROTC service.”
“Yes sometimes, I was occupied to some things”
“Yes, I fell asleep”
These quotes allowed us to understand and identify the reasons why of the users when they miss their stop during their commute trips.
User Interviews
After identifying our high-value participants and gathering data from our screener surveys, we invited them for user interview sessions to further understand their needs and pain points with regards to their commute experiences. We made sure to introduce ourselves and the project briefly to focus on building momentum through asking demographic questions while slowly transitioning to more topic-specific questions.
Data Analysis and Synthesis
After conducting our surveys and interviews with our participants, we then analyzed and synthesized our findings to better formulate our problem statement.
Affinity Map
To formulate our problem statement, we created an Affinity Diagram to collectively analyze our users’ needs, goals, motivations, and pain points. In our diagram, we organized our data by setting a color code for each participant in our case study. We made sure to segregate and categorize our data into more comprehensive themes that enabled us to understand our findings even more.
How Might We’s
Based on our Affinity Diagram, we listed down the possible HMW questions that resonate with our users’ problems. We found common pain points, frustrations, motivations, and needs. These findings helped us in developing our HMW questions to better identify ways in solving our users’ problems.
For example, one key frustration that we were able to find from our users is that they missed their stop because they didn’t know where to drop off specifically. This led us to formulate possible HMW Questions that can potentially solve this problem. We came up with a question asking, “How might we help users to easily distinguish their drop-off points?”. From this question, we came up with a solution that helps users easily view the nearest landmarks or valid drop-off points upon traveling to their destination. In this way, commuters can identify where they should drop off.
User Personas
We were able to create two personas based on the Affinity Diagram we created after synthesizing our findings. This method allowed us to create two user groups consisting of students and working professionals. We listed down each user personas’ user goals, needs, pain points, the importance of commute factors, and their preferred commute or navigation apps. This helped us in forming valuable insights and building empathy with our users that will drive better design decisions.
Customer Journey Map
We then created a customer journey map based on one user persona that would best represent the target user of our case study. We were able to determine the different stages of the customer journey: aware, explore, commute, feeling frustrated, transfer and arrival. We also listed down the user goals, touchpoints, channels, processes, and experiences among these different stages. The purpose of the customer journey map is to give us a visual guide on the journey and experience of a commuter.
Ideation and Brainstorming
Future Ideas
In the brainstorming phase, we combined the cards above which are based on our Affinity Diagram and we grouped them by their specific categories. This method allowed us to gather possible features for this product.
Impact-Effort Matrix
After sorting out the cards in the brainstorming phase, we created an impact-effort matrix which is a decision-making tool that helped us in assessing the features based on their level of impact and effort required. The impact-effort matrix is divided into four quadrants representing four categories: high impact/low effort, high effort/high impact, low impact/low effort, and high effort/low impact. Through this, we were able to identify which features would benefit the users the most.
Card Sorting
We conducted a card sorting session with one of our users to help evaluate the structure of the features. This session was done through Miro, an online visual collaboration tool that lets us collaborate with our user as he sorts the given cards. We prepared four categories: maps, commute planner, user profile, and saved locations. The user was tasked to sort out the pink cards on the right and place them in the categories that he thinks would fit best.
This approach gave us a better understanding of how the ideas should be sorted and labeled according to the needs and preferences of the user.
Site Map Creation
In order to define our site map, we needed to define, organize and break down our content at first. Through ideation on the key screens of our app, brainstorming on future ideas, using an impact-effort matrix, and conducting card sorting sessions with our users, we then created a site map. This gave us a high-level picture of our content in a clear and concise way.
Sketches
Before creating our wireframes, we decided to sketch our ideas on paper to concentrate on the functionality and features of the application before moving on to the design. The ideation sketches are the initial ideas containing the main features of the application which we will be using as a guide as we create the wireframes.
Wireframes
After completing the sketches, we created our low-fidelity wireframes for the layout and design of the application. The wireframes contain the main screens to portray the flow of the features. We used Figma’s wireframing tools in building the layout and structure of our application. This saved us a lot of time in conceptualizing what our application will look like.
Branding and Visual Design
Mockups
For the final design, we have a complete layout of the application with colors, icons, text, and images. The mockups show the main features of the application which are login, sign up, map, history, saved locations, notifications, and scheduled commutes. We decided to use vibrant colors and icons that are easy to understand for the users to easily navigate through the application.
Branding
We named our application, “Desti”, which is a shortened version of the word “destination”. We believe that with this name, it would be easy for users to identify the purpose of our application.
For the branding of the design, we studied how colors could impact our users’ experience in using the app. With this, we came up with strong colors like bright pink and purple that make users feel more energetic, creative, and alert. Then we added a complementary color — orange and as well as muted colors — black and white to balance our color system.
To apply a minimal icon design, we used a geotag icon with sound signals on both sides that represent the notification feature once the user reaches his or her destination.
To give our users an easier reading experience, we used the typeface Aeonik as it gives a minimal and modern look that is easy for users to read.
User Testing
To further improve the experience of our users in using our application, we conducted user testing to test the flow and process of the screens. We invited one of our users to use Figma as we go through the scenarios and tasks that we prepared. Through this, we were able to get feedback and comments on what we can further improve on our product design. We were also able to identify the notable features that the user liked about the design.
So.. What’s Next?
- To create an interactive prototype so our users can test it out in the field when they commute, but due to the COVID pandemic we are currently facing, we decided to delay further user testing. Ideally, this would help us to determine more accurate findings through our users’ journey when they accomplish a certain task in the application.
- To continue refining and iterating the design of our product based on user feedback. It is essential that the product we design should always be user-centered as user testing plays an important role in the UX process.
Conclusion
Overall, we are satisfied with how our first group case study worked out. Working on this case study further improved our collaboration and communication skills as we tackled new tasks and challenges. This case study was initially a design challenge made to be done in one hour but we saw its potential which eventually led to a full case study project that allowed us to apply our learnings and hone our skills. Despite the limited interaction brought to us by the pandemic, we still managed to accomplish most of the goals we set beforehand. Personally, it was a great learning experience and we applied all the principles we learned into our first group case study. It was also a fruitful experience using Figma as our primary design tool along with Miro that helped us organize our research findings. Ultimately, we’re happy with how our final designs turned out and how we’re able to fulfill our users’ needs.
What went well?
The case study was an overall success as we were able to accomplish the goals we initially set all throughout our own design process.
- The research went well because we were able to conduct our research methods, organize and synthesize our findings, and turn those findings into valuable insights while putting our users at the center of our problem space.
- User interviews went well as we were able to gather significant ideas and feedback from the users as they were being cooperative and engaging during the interviews.
- Lastly, we were able to set up remote user testing with our users to test our prototype despite the current situation of the pandemic.
What did we learn?
- Research is key and can be done at any time in the case study process. Through this, we learned that we needed to be specific and flexible with our problem space since the scope could change as we go deeper in the project. Research methods such as screener surveys and remote user interview sessions enabled us to understand that there are a lot of aspects to a certain problem.
- Even though we conducted desk research that gave us a big picture of the problem space we were solving, conducting screener surveys taught us that we can get high-value participants that will fit the criteria we initially set for our case study. We often remind ourselves that we are not our users so we may not really know what our users want and need. Interviews allowed us to see the problems we thought that they didn’t have and broaden our perspective as well.
- Personas are important because they help build empathy towards our users since we needed to understand their needs and frustrations. Building our personas often reminded us that we are not our users and they help our users become real.
- Wireframing is important and is considered one of the overlooked phases in the design process. This made our design ideation phases much easier and gave us more insights into how we can conceptualize our designs.
- Understanding that UX should be seen not only as a process but more of a set of principles that we can apply to any situation or project like a toolkit! In terms of the process, we learned that our UX process should be iterative in nature since we can step back from one phase to another or vice-versa as long as we apply the principles.
- Focusing on the problem is important before brainstorming on ideal solutions. As researchers, it was easy for us to get caught up in finding a solution rather than defining the problem first. We learned that before jumping into solutions, we must first have a complete understanding of the problem that we are trying to solve. To ensure that we had a proper understanding of the problem, we created an affinity diagram to have a clear visual representation of the problem and the needs of the users.
- Understanding that the user is always at the center of the product. At the end of the day, we are designing for the users and not ourselves. We realized the importance of putting ourselves in the users’ shoes so that we can better understand the users’ perspective and build greater empathy for their problems.
- There is no such thing as a bad idea. During our case study, it was important for us to have an open and collaborative environment that encouraged us to suggest ideas, thoughts, and comments. This helped us to improve and expand the different ideas that we had so that we could learn from one another and apply the ideas to our design.
Caveat!
While commuting in the Philippines is still a hassle for most Filipinos, we only focused on a prevalent issue that causes commuters to miss their stop. We learned that the daily struggles for most Filipino commuters come from a variety of factors, which one concept product cannot solve alone.
As cost plays a big role on commuters, we could have added a budgeting feature that will showcase the different fares per the mode of transportation. This feature could help users plan and budget their commute in advance or as they travel. However, with our limited scope, we only focused on providing features that will help users save time and be alert during their commute.
One of the most common ways to get to a place is to walk. Adding a walking option in the mode of transportation would increase accessibility and flexibility in our application as some users would opt to walk rather than riding a vehicle, especially when the destination is a walking distance away.
Thank You!
Thank you for taking the time to read through our case study. For any questions, suggestions, or inquiries, feel free to reach me through my LinkedIn. 😊
Special thanks to Brian Dys Sahagun for his endless and amazing guidance throughout this case study. ✌🏻📚
📝 Save this story in Journal.
