Improving the user experience of Flipkart Orders to reduce the session length

Helping people find delivery locations faster on Flipkart

In this article, I describe my experience of redesigning Flipkart's ‘My Orders’ and ‘Order Details’ screen as a part of my UX Kickstarter Design Challenge.

Index:

1. My Final design for the ‘My Orders’ and ’Order Details’ screen for Flipkart App
2. The reason I picked the App and the Flow
3. How I Understood and found areas for improvement in the Existing Design
4. Brainstorming for Ideas to Solve the Problems I Identified
5. How I Started Turning my Idea Into a Prototype (Low-Fidelity)
6. Making my Prototype Behave like a Real App Interface (High-Fidelity Prototype)
7. Validating the working of my solutions through Usability Testing
8. Improving My Redesigned Screens After Usability Testing
9. Key Learnings

👉How I started this Design Challenge?

I recently enrolled for Anudeep Ayyagari’s 2-week UX Design Kickstarter Workshop provided by Growth School. Here we were taught about UI/UX in a non-textbook approach and in the most fun way possible. This workshop helped me grow from understanding the basics of design to writing my first case study, All of that in just 2 weeks!

As a part of this workshop, we were introduced to this challenge wherein we were supposed to do an Evaluative Design exercise in 2 days.
This is how I started the UX Design challenge where I evaluated and improved the My Orders screen of the Flipkart app in 2 days.

👉My Final design for the ‘My Orders’ and ’Order Details’ screen for Flipkart App

Here is the comparison of the original screen and the Redesigned screen. I will be talking about how I got to the solution in the later part of the article.

Fig 1.1: Original Screens

Fig 1.2: Redesigned Screens (Before Usability Testing)

Fig 1.3: Redesigned ‘Order Details’ Screen (After Usability Testing)

👉What is the solution and how does it help the users?

Screen 1 (My Orders)

• In the final solution, I added a new label on top of the ‘delivered on’ label which contains the details of the address where the product was delivered or is being delivered.
• This helped in saving the user’s time as the user will not require to open a new screen to check for the shipping location details.
• This helps reduce the time it takes for the users to find the delivery location details of a particular order and helps reduce the session length in searching.

Screen 2 (Order Details)

• In the final solution, I added the shipping details next to the order status.
• The user won’t have to scroll down every time to see the shipping details, this saves time and effort of the user.
• This helps in reducing the session length of searching the shipping details of a particular order.

Here’s a link to my prototype- https://www.figma.com/proto/BnahIztIvh3pvkWy1F2nP3/Flipkart?page-id=0%3A1&node-id=2%3A275&viewport=375%2C152%2C0.16&scaling=scale-down&starting-point-node-id=2%3A275

👉The reason I picked the App and the Flow:

During the activities in the “Learning From Existing Design” workbook, I looked at various apps and tried to understand their design.

Using the same method I narrowed it down to Flipkart for this activity.
I realized a few issues with the Orders screen.

• Users had the option to place multiple orders for multiple locations but in the ‘My Orders’ screen, there was no option to view the delivery location for individual orders.
• Users need to either recall the locations or view them by scrolling below in the ‘Order Details’ screen under the shipping details section.

Also, I felt it is widely used and has a very huge user base and any impact I will be able to make will impact a lot of people.

During the activities in the “Business Impact of UX Design” workbook, I looked at various apps to understand the Business impact designs are making. The workbook gave me a good understanding of how to impact not only the usability but also the Business.

I have picked the Order flow because improving order flow would make the whole experience of placing and tracking orders very efficient for the users which could have a great impact on the business metrics.

👉How I Understood and found areas for improvement in the Existing Design

During the learnings of the workshop’s “User Center Design” Workbook, I started to list down common sense questions and common sense answers on the Order flow of Flipkart and tried connecting it with the heuristic principles.

Fig 2: Problems Identified

Heuristic principles are a set of rules of thumb that are based on common user behavior. They help to measure the usability of user interfaces.

Here are some of the questions and the answers I came up with:

Q — How will the user find out the delivery address for a particular order in my orders screen?
A — The user had the option to order to multiple addresses but once the order has been placed, there is no option to see for which shipping address has the order been placed.
Heuristic — Visibility of System standards

Q —How will the user edit the delivery location once the order has been placed?
A — There is no option for changing the address once the user has placed the order. The only option is to either cancel the order or return it once received at the wrong address.
Heuristic — Recognise, Diagnose, and Recovery from errors

Q — How will the user find the shipping details in the ‘order details’ screen without scrolling down the screen
A — In case the user wants to see for which location he has placed the order, Either he has to download the invoice and check, check it before placing the order, or check it after the order has been received by the recipient.
Heuristic — Flexibility and Efficiency of Use

👉Brainstorming for Ideas to Solve the Problems I Identified

From the problems defined in the evaluation stage, I came up with a few ideas which are listed in the image (Fig 3: Ideas).

Fig 3: Ideas

I had a discussion with my group to help me narrow down all the ideas.
The suggestions from the group were as follows:

• Idea 1: Add a ‘Delivered to/ Delivering to’ section in my orders screen.
  Suggestion: If this option is added, it will help the users to see the delivery location easily
• Idea 2: Add a ‘delivering to’ label in the order details screen.
  Suggestion: The ‘delivery to’ label might help the user get a brief idea of the delivery location without scrolling down to the shipping details section on the same screen.
• Idea 3: Have a delivery confirmation prompt in the order confirmation screen.
  Suggestions: The delivery confirmation prompt might help the users in confirming the delivery address but the user is likely to forget these details in the future.
• Idea 4: Have the option to change address in the order details screen.
  Suggestions: This can be a good option from the user’s perspective but might lead to a huge loss for the business if the user decides to change the address after the order has been shipped already

Based on the discussion I had with my group, I decided to proceed with
Idea 1: Add a ‘Delivered to/ Delivering to’ section in my orders screen
I chose Idea 1 because adding this new label in the ‘my orders’ screen would help the user get the delivery location details at a glance and he need not have to open any new screen to check that. This will also impact to decrease the session length and drop-off while searching.

Idea 2: Add a ‘delivering to’ label in the order details screen.
I chose Idea 2 because adding this new label in the ‘order details’ screen would help the user get the delivery location details at a glance and he will not have to scroll down to the shipping details section on the same screen. This will also impact to decrease the session length and drop-off while searching.

👉How I Started Turning my Idea Into a Prototype (Low-Fidelity)

Fig 4: Low-Fidelity Wireframes

I felt very excited to draw my idea on paper and make my idea turn into a feature. I drew various screens with respect to the idea and defined the functionality of the various features introduced on the screen.

Fig 5: Low-Fidelity Prototype

It felt even more exciting when making a prototype in the Marvel app. I used my learning from the “Low-Fidelity Prototype” Workbook to create a link and connect the screens.

It felt very unreal when I was able to see my app in action and was able to navigate from one screen to another and also was able to come back with the help of the prototype.

👉Making my Prototype Behave like a Real App Interface (High-Fidelity Prototype)

I used my learning from Anudeep about UI elements, how to replicate screens, and the “High-fidelity prototyping” workbook to create navigation from one screen to another and to use smart animation to make animation in an easy manner.

Fig 6.1: High-Fidelity Screen (My Orders)

Fig 6.2: High-Fidelity Screen (Orders Details)

Then to make my designs look like real app designs I redesigned the basic elements of the Screen completely and placed everything according to the current layout.

After that, I created the ‘Delivered to’ section (My Orders) which contains a brief detail about the location of individual orders. And also added additional information regarding location under the delivered section in the order details screen.

I learned to use Figma’s prototyping tools and created the prototype where in the ‘My Orders’ screen, the user will see the delivery location of the individual orders.
Upon clicking on the individual order, a new screen will open which is ‘Order Details’ where the user will be able to see the shipping details without scrolling down through the screen.

👉Validating the working of my solutions through Usability Testing

Now that I have completed my designs as per the problem identified during the heuristic evaluation. I will be testing the design with the users to make sure they work and improve what does not work.

Since Flipkart is a very known application and almost everyone uses it,
I went to random people at my PG to do the usability testing.

In usability testing, I went to the users and asked them to do the tasks to understand whether my design is understandable by the users and are the users able to use these.

Tasks are given to the user:

• Go to the ‘My orders’ screen
• Can you try to find out and list the basic details regarding the delivery of a particular order?
• Can you Check the tracking status of the order by clicking on the particular order?

Observation points I wanted to look at when the user was performing the tasks.

1. To check whether the users are able to find out the delivery location details from the ‘My orders’ screen
2. To check whether they are able to see the delivery location in the order details screen without further opening the tracker

Insights got from Usability Testing:

1. The user was able to spot the ‘Delivered to’ label in the ‘my orders’ column
2. The user was unable to spot the ‘delivered to’ details in the order details screen because of the small font and grey color
3. In order to check for the complete address they needed to open the order details screen and scroll down to see the shipping details which was a frustrating experience.

👉Improving My Redesigned Screens After Usability Testing

In usability testing, I found out that the user had a hard time spotting the ‘delivered to’ details in the order details because of the small font and grey color. So I removed the delivery location details below the delivered label and rather added the shipping details next to the order status.

Fig 7: No Changes made in the ‘My Orders’ screen

Fig 7: Changes After Usability Testing

📖Key Learnings

I had a lot of learning throughout my 2-week Kickstarter workshop that helped me to complete this challenge in such a short time

Learning from Existing Design:
One of the biggest perspectives Anudeep gave us was to appreciate and understand how things have been designed in a certain way from the user’s point of view.
Keeping this perspective in mind, We did a lot of activities to practically learn about Heuristics and Fundamental UX principles. This non-textbook approach helped me to apply everything in a practical manner for this challenge.

Learning about UI elements:
I was able to create the screens for this challenge using my learning from the 2-week workshop. Anudeep taught us the basics about how screen sizes are decided for designs, what are the common elements that many app screens contain, and how elements are spaced.
We also learned several principles and laws like Jakob’s law, Hicks's law, Law of common region, Aesthetic usability effect, Doherty threshold, Zeigarnik effect, etc.

Learning in Usability testing:
To learn whether my designs are working as I intend and understand what is working and what is not, I went to real users to learn the usability of the new design.

• I learned that the tasks I made should not bias the users.
• Also, the tasks should not lead the user, instead, the user should be able to understand by himself.

Anudeep showed us how the testing can be done and how we can observe the user’s behavior.

How the workshop has changed me:
The learnings that I have doing this 2 weeks workshop has been enormous. I had so many realizations.
Earlier I was following every process in a linear manner, but after doing the workshop I realized that it does not matter whether or not we follow a process, what is more important is that there should be proper reasoning behind following a process and not just going after it blindly.

There was a lot of time when I was stuck while doing the project and other participants of the workshop community helped me in unblocking my thoughts.
Anytime I was stuck with either the heuristics or the business metrics Anudeep was always there to clarify those things and help me in moving forward. And he helped to clear so many more perspectives regarding not just UX but UI, Job selection, and a lot more.
I not only feel more confident with UX concepts but I have also learned to collaborate, manage time, prioritize using reasons that made sense for UX, and make good decisions.