Digikala list & filter page redesign

About the Company :

Digikala is ranked by Alexa as  199  global ranks. It has 1,700,000 unique visitors per day, and 85% of Iran’s e-commerce now takes place on Digikala.

It consisting of Digikala.com(Marketplace), Digistyle.com(Fashion), and Fidibo(Book)

I have so interesting experienced in Digikala for about two years, Digikala platform consists of the Mobile app, Mobile web, and Website and I participate in the design of them, Digikala has a million users with different archetypes and persona, its the reason make the design more challengeable. I tried to design the usable, learnable, findable, memorable and desirable platform with a unique experience for all type of users.

Team: Ala Davoudi(UX designer), Hamed Mayahi(UI designer) + 5 other designer 

My Role: Competitor analysis, User Research, User interview, Survey, Persona Creation, User story, Wireframing, Usability testing, Information architecture, Analyse heat maps and recording sessions, A/B testing 

Tools: Sketch, Pen and paper, InVision, Axure, Crazyegg, Google Analytic, Convert


Overview of challenge

The golden rule of the online marketplace is making the path to checkout as quick and easy as possible. List and filters are essential; this page helps users find the right item quickly. Effective filtering is the fastest way to get users from the homepage to the product detail page.

The goal of a redesign this page are :

Improve usability

The decrease bounce rate of product list & filtering page

Increase product pageview

Improve filters accessibility

Improve findability of products

Add new features to this page for helping the user to understand Digikala become a marketplace, and there are many sellers for each product.

Optimize search experience.

 

 

Discover problems

The most important questions for the redesign :

What are our issues on this page?

What are the new features that can add to this page?

 

Research phase

For finding the answers, I’ve started the research phase. I’ve made meeting with stakeholders for finding new business needs,

I’ve analyzed data of GA like bounce rate, user flow,…

With watching recording sessions, I understood how the Digikala users behavior on this page is? For specific understanding behavior our users I’ve analyzed heatmaps and mouse movement.I’ve run A/B testing on this page for finding what hypothesis is more effective? The competitive analyze helped me to determine how well our competitors were performing?

 

 

Wireframe

Based on the research phase, business needs and requirements I’ve created the wireframe of list & filter page on Sketch.

Check the wireframe

In several meeting with the product manager, product owner, and design team, we analyzed wireframe of this page.

 

 

Delivery to the tech team

The screens were uploaded in Invision so that the tech team could have a better understanding of the user flows. I’ve written user stories and explain the exact flow for the tech team. Specially front-end team.

 

Usability test

The usability test was run in the release test phase, with five users. I found some points for improvement of design.

 

Test and measure

After the implementation of the new design, I’ve measured the improvement of this page comparison of the previous version by GA, heatmaps and recording sessions.

After redesigning this page :

The product pageview increased by 20%

The bounce rate of this page decreased by 10%

It helps users to find the exact product they want; I found it during a usability test.

The search quality improved.

 

View Digikala List & Filter