Re-Designing Delhi Metro App — A UI/UX Case Study
In this case study, I have explained the step-by-step approach of my design process and detailed the design decisions I made during the process.
Project Overview
About
DMRC is the official mobile application for Delhi Metro. This app consists of all the information regarding the Delhi Metro. The UI design of the current version of the app seemed outdated to me and I thought about giving it a redesign. In my conceptual design, I have enhanced and added two new features namely Emergency, Card Recharge along the App UI Redesign. This case study was done mainly to solve the problems faced when users wanted to know their respective card balance and how the new minimalist design caters to a smooth app experience for all the users.
My Process
1. Map
Understand the Challenge, Map It Out, and Find Inspiration.
GOAL — Uncover the Design Problem, Pain Points w.r.t. Users.
This section is about making a plan and getting focused. The first day’s activities help you define critical questions, your goal and pick an area of focus. The aim is to understand the context and the challenge better and get clear about the goal-setting strategy.
Here the following things were to be kept in mind to get started:
- Who are the users?
After a bit of research, I found out that The Delhi Metro Rail Corporation makes 2,700 trips per day carrying 1.5 million passengers, who on an average travel a distance of 17 kilometers each. Delhi Metro is the travel lifeline for most passengers. Passengers (like students, office goers, teachers, high school students, IT professionals, tourists and the list goes on) depending upon their purpose and time, travel in the metro to and fro from one station to another and vice versa. Keeping in mind the huge customer base and 5 million-plus DMRC app downloads on the play store, the goal was to build the app minimalist and less bulky. - What are their needs?
The needs for the passengers were simple, the main functionalities of the app would be to tell the route from station A to B, a list of all the stations, metro card recharge, and some more info like a metro map with an indication of all metro lines. Now, these are all the basic features an app like this should pertain to. Now the brainstorming sessions were started and I then reached out to my friends and family members to know their perspective and their needs. After a lot of brainstorming and user needs gathering, I came with the two main pain points which are listed below:
1. When a user needs to check his balance when he/she is not near the metro station. As this feature was only available at the metro stations. So if someone using a card after some days wants to confirm whether his/her card has enough balance it is simply not possible.
2. The emergency section in the app was missing.
No emergency contact section was available in the app. In case of any medical, threat, theft, or other security Incident there has to be an emergency contact section available in the app. I was clear with these features that were to be implemented in the redesigned app. - Formulate Strategy
Now as the user needs were sort of getting clear. It was time for setting up goals and form a strategy. Goal setting is an important part of the Map Process. A clear goal-setting will lead to a better understanding of the scenario, keeps focused on the target to be achieved, and keeps the motivation on to get the best out of the study. Strategizing the whole process in little chunks gets the job done easily and keeps the motivation high for goal achievement. I broke down the strategy into small goals that are SMART. Defining objectives using SMART Goal Setting Strategy helped me a lot in formulating the strategy for this case study and making it easier and achievable.
At this stage, as my users were identified, their needs were sorted along with the basic and much-needed features that were to be implemented in the app were identified, and the goal-setting strategy was formed. It was time to move on to the next section sketch.
2. Sketch
Generate Ideas and Sketch solutions.
Goal- Create solutions around the target problem with help of sketches.
If day 1 of a Design Sprint is getting laser-focused on the problem or issue you face, the second day is when you begin to think about how you might solve your problem. After a full day of understanding the problem and choosing a target for your sprint, you get to focus on solutions. The day starts with inspiration: a review of existing ideas to remix and improve. This stage requires a lot of creativity. Here you gather a lot of inspiration to carve out the sketches that are pointing out the solutions to your pain points. As you already have a specific objective you want to accomplish, it would rather become a straightforward process to map out the finest solution.
I also drew a lot of sketches and every time I kept the pain points in my mind in order to get through the process in a smooth manner. Along with this, I kept in mind the user’s needs that were mapped out in the brainstorming sessions. As there is a huge customer base who rely on the DMRC app in their daily life in order to travel without getting lost. I decided that every app user (passenger) must have a smooth experience while using the app. To do so the app should be less on the chunkier side, should not be cluttered, should be lag-free, and be more on the minimalist side. So I designed sketches that could fit in all the above-listed points using the below process:
❏ The 4 step Sketch Process helps in creating the solutions in an effective manner.
Step 1- 20 minutes Note-taking Activity.
Lookup any references needed and note down everything you find important while keeping in mind your goals.
Step 2- 20 minutes Ideas Activity.
Draw the most promising solutions from the observations from Step 1.
Step 3- 8 minutes Crazy 8 Activity.
Each member is given a piece of paper and they are required to fold it to form 8 sections. If you are only one member of the team don’t worry you can get it done alone.
You are given 8 minutes to sketch 8 ideas into 8 sections. This rigorous activity gets your creative muscles run fast and make you go crazy; hence the word “Crazy 8”. Sketch 5/6/7 idea variations of the strongest solution drawn by you.
Step 4- 30 to 90 minutes Solution sketching.
Select your best idea and storyboard the concept by drawing a detailed end-to-end solution. The sketch should be self-explanatory so include words that communicate. Aesthetics aren’t important here, but words are!
Key Ideas
- Remix and improve. Every great invention is built on existing ideas. So keep improving to get perfection.
- Anyone can sketch. Most solution sketches are just rectangles and words. Anyone can draw his/her ideas, as it's a sketching phase remember aesthetics aren’t important.
- Concrete beats abstract. Use sketches to turn abstract ideas into concrete solutions that can be assessed by others. Remember the end goal is to get the best solution out from the sketches.
- Work alone together. If group brainstorms don’t work, give each person time to develop solutions on his or her own instead. It might bring more creativity to the project and the path to sketch the solution will become clearer.
At this stage, I was ready with all the sketches that depicted a clear solution to user needs and the pain points listed in the map stage and I was ready to go to the next phase that is the decision stage.
3. Decide
Choose the best Idea and storyboard it.
Goal — Decide the solution that will be developed into a Prototype
Now as I was ready with the stack of solutions based on all the sketches from the sketch phase of the design sprint. So, it was time to decide the best sketch idea but there was a problem. Yes, there was a problem and that was kind of overwhelming. As there were a lot of sketches, I can’t prototype and test them all. So I needed one solid plan as it was time to choose the best design and work on making a storyboard.
Generally, if you are working in a team you follow the below process in order to find the best idea:
- Sticky decision. Follow these five steps to choose the strongest solutions:
- Art museum. Tape the solution sketches to the wall in one long row.
- Heat map. Have each person review the sketches silently and put one to three small dot stickers beside every part he or she likes.
- Speed critique. Three minutes per sketch. As a group, discuss the highlights of each solution. Capture standout ideas and important objections. In the end, ask the sketcher if the group missed anything.
- Straw poll. Each person silently chooses a favorite idea. All at once, each person places one large dot sticker to register his or her (nonbinding) vote.
- Supervote. Give the Decider three large dot stickers and write her initials on the sticker. Explain that you’ll prototype and test the solutions the Decider chooses.
Having said that, rate the Solution under the category of NUF
N- New/original
U- Useful
F- Feasible Technical
TIP: Sometimes team can’t decide on one, so it's ok to pick the best 2 solutions and move ahead with building prototypes. Let the end-user decide!
- Make a storyboard. Use a storyboard to plan your prototype.
- Draw a grid. About fifteen squares on a whiteboard
(like that of Tic-Tac-Toe).
- Choose an opening scene. Think of how customers normally encounter your product or service. Keep your opening scene simple: web search, magazine article, store shelf, etc.
- Fill out the storyboard. Move existing sketches to the storyboard when you can. Draw when you can’t, but don’t write together. Include just enough detail to help the team prototype in the next phase. When in doubt, take risks. The finished story should be five to fifteen steps.
As I was alone and did not have a team with whom I would have followed the above process. I still tried to go on the above path in order to get the best solution/idea out of all the sketches I drew.
At this stage, you have an exact idea/solution sketch out of all the designed sketches or you would have a storyboard that would be helping you in the next phase that is prototyping. Again having the best solution/idea in this phase is important as the next phase requires you to make a low-fidelity design of your best solution/idea. So at this stage, you should probably select the idea that suited best to you and move on to the next milestone.
4. Prototype
Creating the Prototype
Goal- Build a Realistic Prototype to test with Users
Wait! Before going forward, let’s revise what we have accomplished till now.
We have all the identified users, their sorted needs, your goal-setting strategy, your final best solution sketches - does not matter whether they are in the form of the best solution sketch or in the form of a storyboard.
Great isn’t it. Did you feel good? Yes, you should feel good about it.
You are halfway through the design sprint. You should always be motivated and have high spirits to reach your end goal. So, let’s go and create creative and inspirational prototypes.
❏ What is a prototype?
A prototype is a primitive representation or version of a product that a design team or front-end-development team typically creates during the design process.
> So it’s time to turn the storyboards/best design solution into a realistic-looking and working prototype. Prototyping can be done within a single day. All you want is the right mindset, strategy, and tools that make it possible to build a realistic façade.
In this phase, the focus is to show the usability of the application rather than making it beautiful to get the best out of the storyboard/solution sketch.
In my case, the prototype which I created clearly depicted the usability of the basic features and the newly introduced features that were identified in the map phase.
I tried to keep the UI as minimal as possible and choose light colors and not some flashy colors because I wanted the user experience to be soothing, intuitive, and to the point.
I used Adobe Xd as my primary tool for the wireframing & prototyping process.
Do check out my presentation on Behance.
Below is an explanation of the prototypes that I made.
Home Screen
I wanted the home screen to contain all the features along with both of my newly introduced features that were the Current Balance Info and Emergency Section. This lead me to design the home screen in a way that a user should not be finding the features in the app. The features should be self-appealing and should not be hidden.
Station Routes
Station Route is surely one of the main sections of the app. Almost all the users who used the app surely use this feature to find their respective routes which they want to travel upon. I kept the following things in my mind:
- I wanted this section to be user-friendly and less cluttered.
- The three sub-sections in the station routes are highlighted individually.
- To find route, from source and destination station the search box is highlighted so that the user can easily understand where he/she should search for the route.
- All stations listed in the route info section have a bold font and are clearly separated in order to maintain consistency.
- The metro map should clearly depict all the lines of the metro.
(Blue line, Yellow line, Pink line, etc) - Also, users can directly go from one section in the app to another.
Station Info
Station Info would be the second most important section of the app. All the users who used the app surely use this feature to find out all the information related to a particular metro station. This feature can also be accessed from the home screen of the app. Users can simply tap the Station Info button, select the station and find the particular station information from the section.
As I wanted the process to be simple, I kept the below points in mind:
- Three steps to reach the particular station info.
1. Tap on Station Info from the home screen.
2. Select the Station and tap on the arrow or enter in the search box and tap the search icon.
3. Select the type of info the user wishes to see.
(The lesser the steps to reach a functionality the better is the user experience.) - I have used a color-specific route icon to depict which color metro line is the station is on.
For instance: The yellow color route icon means it's the Yellow Metro Line. - The mention of the first and last stations the particular metro line will travel to.
- Highlighted the icons so that users can co-relate with the particular functionalities easily.
- Also, users can directly go from one section in the app to another.
Now I will introduce the two features I had introduced as the pain points in this case study.
Metro Card Recharge Section
This section was already present in the app but has some limitations such as cluttered UI and a bad UX. So I thought of giving this section a UI Re-design as well.
I have revamped the online recharge section with a seamless experience and clutter-free design along with the pain point converted to a new feature of the app i.e. “ Current Balance ”. What's the use of an online recharge feature if the app can’t display the current balance. Yes, this feature was really needed and many of my friends gave me suggestions to include this feature in the re-designed app.
I kept the below points in mind to re-design and include a new feature:
- Three steps to make a card recharge.
1. Tap on the Recharge Metro Card option on the home screen.
2. Select/Enter amount
3. Select the particular payment mode and proceed. - Skeuomorphic design of all the buttons to de-clutter the design.
- To display the user’s info, card number, current balance & the last date on which the user made a recharge to his/her particular card.
- Select Amount text that would clearly depict the user to select the amount in this area/region of the screen.
- Different amounts are displayed in order to directly select the amount and make the process quicker.
- Introduced the different payment options on a single screen within the app.
Bonus feature: Low balance reminder feature introduced in the app settings.
Emergency Section
This is a much-needed section that would redefine the way users used the DMRC app. This was the second and also the most crucial pain point converted to a feature in the re-designed app. The emergency section is much needed as a user traveling inside a metro might not know when he/she would face a medical emergency, face theft or threat, and would require assistance. Mostly the passengers traveling in the metro are strangers and no one knows which passenger has what intention.
So keeping in my all the aspects like the safety of passengers, medical emergency, theft, and threat incident I have designed this section.
Below are the UI aspects of this section that I kept in my mind:
- Two steps to report an incident.
1. Tap on the emergency button present on the home screen.
2. Select the category and proceed. - Simple, minimal UI design of the section for quick & hassle-free user experience.
- Categorized different options w.r.t. the different scenarios, so the user can quickly select the particular option he/she needs to.
- Introduction of the Need Assistance feature where a user can do a live chat with a representative in order to report an incident.
- I have also included the Contact Police option in the section so the user could be able to talk to local police in case of an extreme emergency.
These were some of the prototypes of the main features of the application.
5. Test
Usability Testing
GOAL — Validate the solutions
For usability testing, I conducted remote, moderated Think Aloud testing over Zoom/Google Meet. I asked different users and my friends, to share what they were doing, thinking, and feeling while interacting with the prototype and trying to complete the tasks given to them. I tested around the key tasks I identified earlier in the process, asking the user to browse and have a common idea of the workflow of the features and whether they complied correctly with all the functionalities or not.
Overview
- Method: Remote, moderated usability testing (Think Aloud)
- Participants: 7
- Age range: Millennials
- Average Time: 5 minutes
- Task Completion Rate: 95%
- Error-Free Rate: 99.4%
Overall, the testing showed positive results. The feedback I received was mostly positive & the users liked the new flow and the app’s new design. I just made few adjustments and I am ready to conclude the design sprint process.
The Outcome of the Design Sprint week
- Validated idea & user flow.
- Validated design direction.
- A clear understanding of the users’ problems and how to solve them — an easier way.
- Design Sprints facilitates Collaborative Ideation with Key Stakeholders and works wonders when designing new concepts.
Final Thoughts
This being my first case study, I never thought I would be able to complete this by myself. I have learned a lot by undergoing this case study. One should always be motivated and pertain high spirits in order to learn as learning is a lifelong process and it should never stop.
If you had made this far by reading this I really appreciate it!
Thank You for reading my case study.
Do share this with your friends and peers.
Feedback
Also do tell me if this article was useful, if I made any mistakes, how I can improve it. Your feedback will be highly appreciated.
