Project Overview
RideWise is a mobile app that simplifies managing commute expenses. Users can set a monthly budget, track expenses in real-time, and pay for transportation directly through the app.
With features like weather updates, optimized routes, and fare comparisons, RideWise ensures users stay within their budget while navigating their daily commute efficiently.
My Role :
UI/UX designer
Duration :
3 months
Platform :
Android
Problem Statement
A working professional living in a metropolitan area needs a simpler, more predictive way to manage monthly commute expenses because they struggle with budgeting due to fluctuating costs across different transportation methods (e.g., metro, bus, ride-sharing).
Possible Solution
All-in-one commute expense management app for working professionals, simplifying budgeting through expense tracking with integrated payment options.
Target Audience
- Working Professionals in Metropolitan Areas
- Budget-Conscious Commuters
- Age range: 25-45 years.
- Tech-savvy, and familiar with apps for navigation, payments, and budgeting.
Design Process
I chose the Double Diamond method for this project because it provides a structured approach to problem-solving, which is crucial for creating an effective solution.
Discover
(3 weeks)
- User Research
- User Interview
- Competitive Analysis
- SWOT Analysis
- Affinity Mapping
Define
(2 weeks)
- User Persona
- Empathy Mapping
- User Journey Map
- Storyboarding
Develop
(4 weeks)
- HMW Questions
- Brainstorming
- User flow Diagram
- Information Architecture
- Wireframes
Deliver
(3 weeks)
- Prototyping
- Usability Testing
- Mood Boarding
- Design System
Discover Phase
Objective: Identify and understand the key challenges users face in managing commute expenses.
I began the project with extensive user research to understand user needs, preferences, and pain points related to managing commute expenses. I conducted surveys and interviews with a diverse group of potential users, asking about their daily commuting habits, budgeting challenges, and what kind of solutions they want.
This research showed that many users struggled with unpredictable commute costs and needed a single tool to manage these expenses.
The apps I am using currently don’t have a budgeting option and I have to switch to different apps for searching the route, paying for the ticket, and budgeting.
Commute Budgeting is important for me to have an accurate prediction for my monthly expenses because I have a limited amount of money to spend on my travel.
One of the biggest challenges was, finding the best route and right fare with minimum time frame, and sometimes applications were too slow and complex to go.
I’d say the needed feature is the in-app wallet so we can add the money only once and pay for the ticket. One more feature is to find the best route for the destination.
Qualitative Research
For in-depth insights, I conducted one-on-one user interviews. These conversations focused on understanding users’ daily commuting routines, budgeting methods, and frustrations with existing solutions.
From these interviews, I learned that users wanted a tool that could integrate various transportation methods and provide real-time updates. This feedback helped design features like integrated payment options and real-time route suggestions.
Interview Questions
Ques-1: Can you walk me through your daily commuting routine? Which modes of transportation do you use?
Ques-2: What are the biggest challenges you face when it comes to budgeting for transportation?
Ques-3: How important is it for you to have an accurate prediction of your monthly transportation expenses?
Quantitative Research
%
60% of users prioritize budgeting
%
55% Use Multiple Transportation Modes
%
40% of users sometimes exceed their monthly commuting budget
%
50% of users prefer apps offer integrated payment options
%
30% of users check their commuting expenses daily.
%
45% of users find current budgeting tools inadequate.
Competitive Analysis
In my competitive analysis, I identified key competitors in the market to understand their strengths and weaknesses relative to RideWise.
This analysis helped pinpoint gaps that RideWise could fill, ensuring it offered unique value to users.
Feature | Google Maps | Delhi Metro | Paytm App | Expense Manager |
Best Routes | Yes | Yes | No | No |
Fare and Timing Information | Yes | Yes | No | No |
Budget Alerts | No | No | No | Yes |
Integrated Payment Options | No | No | Yes | No |
Multiple Transportation Modes | Yes | No | No | No |
User-Friendly Interface | No | Yes | Yes | Yes |
Real-Time Updates | Yes | No | No | No |
Define Phase
Objective: Develop user personas to represent the target audience and create empathy maps to better understand user emotions and behaviors.
User Persona
Based on user research data, I created a detailed user persona to keep the design process focused. This persona highlighted key demographics, goals, and pain points, providing a clear picture of our users. I empathized with the personas and ensured that RideWise effectively addressed their specific challenges.
Age: 24
Location: Delhi
Education: Bachelor’s Degree
Job: Graphic Designer
Family: Lives with parents
Himanshu
A Graphic Designer commuting daily from Rajouri Garden to Noida Film City, using metro, e-rickshaw, and occasionally his personal vehicle or cab. Diligent about managing expenses, but struggles to track them effectively across different transport modes.
Attributes
- Cost-conscious
- Tech-savvy
- Efficiency-focused
Goals
- Streamline his daily commute by minimizing the need to switch between different apps for single purpose.
- Accurately track his travel expenses without the hassle of manual entry.
- Maintain a predictable and budget-friendly commute despite occasional vehicle breakdowns.
Pain Points
- Difficulty in managing multiple apps for single purpose.
- Unexpected cab rides significantly affect the monthly budget.
- Unpredictable Monthly budgets.
- Managing multiple transportation modes is a hassle.
Empathy Mapping
I also created empathy mapping, which helps understand users’ feelings, thoughts, and behaviors and also helps to create more user-centered designs.
SAYS
Develop Phase
Objective: Generate ideas and develop potential solutions.
By conducting brainstorming sessions guided by “How Might We” (HMW) questions, I was able to focus on user needs while thinking creatively about solutions. These HMW questions provided a framework that led to a diverse set of ideas and ensured that the brainstorming sessions generated a wide range of innovative solutions to explore.
User Flow
To create the user flow, I began by identifying the key tasks and decisions Himanshu makes during his daily commute and expense tracking process. I mapped out the sequence of actions he takes, such as checking his e-wallet balance, choosing his transportation mode, scanning & paying, and tracking his expenses.
By breaking down these tasks step by step, I was able to visualize how Himanshu interacts with different tools and services, from the moment he leaves his home to when he completes his commute.
Information Architecture
To create the information architecture, I started by organizing the content and features that would be most relevant to Himanshu’s needs, focusing on his commute and expense management. I considered the tasks he frequently performs, like checking the routes, tracking expenses, and managing transportation modes, and structured them into a clear, intuitive hierarchy.
This involved grouping related features and content into categories that made sense from the user’s perspective, ensuring that the most critical functions were easily accessible.
Low-Fidelity Wireframes
I created the low-fidelity wireframe by sketching out the core layout and functionality of the project using simple shapes and annotations to visualize the user interface. Through this process, I learned the importance of iterative design and how early feedback can shape more effective user experiences.
Mid-Fidelity Wireframes
By refining the initial layout from the low-fidelity stage, I developed medium-fidelity wireframes. This involved adding more detailed elements such as improved navigation, well-defined content areas, and basic interactive components. Focusing on user flow, I ensured the wireframes provided a more realistic and functional representation of the app.
Deliver Phase
Usability Testing
To validate the design, I conducted usability testing using Maze, which allowed real users to interact with the wireframes. The insights from this testing were invaluable, revealing areas where users faced difficulties or confusion. I recorded the outcomes and implemented necessary changes in Figma, refining the design to enhance usability.
Design System
After Working on feedback I got from usability testing from Maze, I worked on the design style guide. I created grids, iconography, and typography style.
Iconography
Color Palette
Typography
Grid System
- 4 Columns
- Margin: 16px
- Gutter Width: 16px
Detailed Research Process documentation is on Notion Platform
Final Designs
Lessons Learned
1. Clear communication and collaboration with stakeholders from the beginning help align expectations and objectives.
2. Early and frequent usability testing can save time and resources by identifying issues before they become major problems.
3. The value of continuous learning and adaptation in response to user feedback is crucial for creating successful products.
In future projects, I will experiment with more innovative design approaches during the brainstorming phase to push creative boundaries.
Interactive Prototype
Experience the app’s functionality through this interactive prototype, sharing with you a hands-on preview of the final design.