UX Research for Complex Back Navigation in ecommerce apps

Introduction

Problem: There’s a need to simplify the complex backward navigation problem in smartphone applications, especially ecommerce applications. Consider a user flow in a complex app where a user is navigating from one screen to another. It becomes complicated when the user has to click back button several times to go back to a specific page. It takes a lot of time and takes away from delivering a good user experience.

Goal: To simplify the complex backward navigation problem in ecommerce and large/complex applications by proposing an advanced/enhanced version or alternative to back button

Target Audience: Smartphone users, Ecommerce Users.

Exploring the problem

Let’s explore the problem a bit more. We’ll take a look at a user flow to browse products in amazon’s app:

Apparently, to go back to the first product, user has to click back 5 times, and further there’s no way to go forward. By this time, hopefully the problem is pretty clear.

Let’s conduct some user interviews to understand their pain points.

User Interviews

I conducted interviews with 5 users. The goal here is to find Pain Points to understand user needs, desires, limitations, frustrations and also gather user expectations and suggestions.

I asked the users to browse their favorite ecommerce apps and navigate from one product to another several times. I further asked them to go back and forth in the application. Here’s the feedback from 5 different users:

User 1:

“Arg.. I hate these apps when i don’t find my product i browsed just a minute ago. I mean once if i go back and want to check another product i saw after is such headache. I liked a product so much and i was checking out another product and when i went back it was like back back back back back back. I think it should be easy.. Just tap a button or something see previous and click on one you want.”

User 1 suggested to have an in-app tab based functionality. User referred to “Browser-like Tabs”, which would give the user an option to open multiple products in different tabs, just like they can in a desktop browser.

User 2:

“Browsing over various dresses, reached upto 100th. Suddenly it clicked that 50th one was more good but had not wish-listed it. So again have to click back many times or browse from start. Would be good to have a method available to easily navigate back and forth.”

User 3:

“I found my experience for consumer shopping to be mixed; although I was able to search and find different products, I was not able to review products during my initial search without recalling what user flow was taken. I eventually had to utilize the back button more than five times. I found that to be frustrating and cumbersome. ”

User 4:

“My experience while browsing in the amazons mobile application has been semi frustrating. When looking at more than 3-4 products, the next product page will open for each product and pile up on the old ones. The ease of use in the application is lacking, and it can be improved by having a different maneuver to go back to view your previous products.”

User 5:

“I would definitely like to have an alternative solution because most, if not all, e-commerce apps are guilty of not allowing users to go back and forth to products or pages which have been viewed. This creates a lot of complications.”

Key Insights:

After browsing certain no. of products, users had to rely on their memory to navigate to their favorite/selected product.
Users were frustrated to click back button several times to go back to the product they were browsing previously.
Users also felt that it is very time consuming to tap back button each time, instead of having a direct way to navigate to the product already browsed.
Users were frustrated that there’s no way to go forward, once they hit the back button. One user mentioned that “Recently browsed” feature is there at the bottom of the page at many ecommerce, but it takes more time to scroll down and breaks the flow of seamless browsing/shopping in the application.
All the users felt that there’s a need to have an effective way to go back and forward in the application.

Proposed Solutions

Brainstorming Ideas

One way this problem can be solved is by displaying previously browsed pages/products in some form. My initial thought process always start by scribbling for potential ideas on a paper. Here are the some of the ideas or low fidelity mockups:

Low Fidelity

Medium Fidelity

I’ll start with Adobe XD to create wireframes of the proposed solutions I have roughly on paper and in my mind.

So, we have

A List based solution
A Menu based solution called Burgercrumb (Hamburger Menu + Breadcrumbs)
Breadcrumbs based solution
Tabs based solution

To implement these solutions, I also need a small concept of an ecommerce app to demonstrate how well these proposed solutions work. Once, it’s done, we’ll test it with the same users we conducted interviews with prior to this step.

Here is the user flow of a small ecommerce app that we will be working with:

Solution: Advanced List

The Simple List solution is well, very simple. Here’s an advanced version of the list. (These are all Medium Fidelity wireframes, but you’ll see full implementation as you scroll down)

Solution: Tabs

Solution: Burgercrumb Menu

Solution: Breadcrumbs

Working Prototypes

Now, that we have the base covered, and we have medium fidelity wireframes. Let us move on to the next step and see the solutions in its working form.

Here’s how the app looks now that the visual design and UI design part is complete:

Here are the final 4 solutions:

Solution: Simple List

This is the simple most solution to this problem. This can be implemented by a long press on the back button. But this solution is also very basic. It only gives you a list of previously browsed products.