top of page

Digistyle

Figma, FigJam, Slack, Jira, Sketch, Zeplin, Assembla

Google Analytics, Hotjar, Baymard

Responsibilities

  • Research and Design

  • Lead DS design team

  • Create UI kit and documents

  • Communicate with Software Engineers and Product Managers directly

DIGISTYLE is Iran’s leading fashion e-commerce platform – under a venture of Digikala company. Being very editorial driven with a great digital shopping experience that offers newness, it offers one of the widest assortments of brands across the spectrum ranging from mass market fast fashion to bridge brands, working directly with principals offering a wide enough offer so that anyone can invent their own style!

DS.png

Problem

The design of Digistyle has expired, as the last design was about four years before. While users' activities were neither tracked for more than two years nor collected by any usability or A/B tests, the user-friendliness of the product was questioned.

Goals

Creating a new native application and rewriting the web version responsive of the app. Collecting user data by forming GA trackers, developing Hotjar flows, and collaborating nearly with the CRO team.

usability test
design benchmark

Qualitative Usability Test

As stakeholders supposed there were some problems in the users' experience, especially in the mobile version, and we (designers) needed to locate pain points and discover opportunities to improve the design for the new native application, a usability test ran on the old web app to scan the ease of navigation, the functionality of search, the usage of filters and sort, the process of making the decision to buy a product, and the flow of finding a specific brand.

We selected 6 users between 20 and 35 years old, various from expert customers to new users, and monitored them while doing these tasks on Skype:

  1. You have a 5 million Toman Digistyle voucher, which you must spend to buy 3 products

  2. Choose an item of favorite clothing. Like a shirt, pants, or anything else you need (it doesn't matter how long it takes, just make sure you like to buy it and it fits you). After you have made your choice, tell us why and on what basis you chose it.

  3. Add it to your shopping cart

  4. Now we ask you to choose a shoe from one of the prominent foreign brands, such as Adidas, Puma, or any brand you are interested in, and add it to the shopping cart.

  5. Now choose an accessory with the rest of your money and add it to the shopping cart.

  6. Enter your shopping cart and finalize the purchase. When you arrive at the bank, cancel the order.

Frequent Opinions of Participants

PDP-Variant

I can't find other colors of a product, is it unavailable?!

Photos

I want to see more realistic photos of products, in people's body

Checkout

I canceled my order, why the shopping cart is empty? Where is my order?!

Filters-Button

Why the submit button changes before and after of selecting and adding filters?

Filters-Price

The price range filter is hard to touch and scroll 

PDP-Brand

Where is the brand name of product?

Design Benchmark

Studying other online selling stores seemed critical to find users' habits, mainly in the primary flows and innovative features. We focused on the world's top-rated shopping applications in the following elements:

  • Checkout user flow; the process of placing an order

  • Search 

  • Discovery; the journey of finding a desired product

Results:

Prevalent Checkout Flow

Significant Matters in Discovery Journey

Carousels

recommend products on the homepage and product detail page

Etsy
IMG_1013_edited.jpg
Zalando

Popular Search Features

History

showing the user's search history before typing

Product

picture some products to provide direct access to PDP(s)

Suggest

offering related keywords and categories while user is typing

Trends

showing words that constantly explored by users

Pain Points' Journey Map

As a new user, Eli wants to buy a Manto, shoes, and a handbag. She expects to find clothes quickly by using filters and also wishes to offer other products to make a fabulous style easily.

journey map.png
journey map
nav tree
DS wireframe

Navigation Tree

Mobile-Web (before)

Application (after)

Medium Fidelity Wireframe

W Home.png
W Dashboard.png
W PDP.png
W Cart.png
hi-fi design

High Fidelity Design

In a 4-member design team, we tried our best to design more than 300 screens from scratch within about 3 months. We also made the Digistyle UI kit while this process, to make future updates based on the results of UX research easy.

Discovery

The process of finding, comparing, and choosing products to buy.

Important changes:

  • Bottom navigation bar

  • Categories - top of PLP

  • Price input field - filters

  • Focus on images

  • Carousels - homepage

  • Search bar and modal

discovery.png
pdp.png

Product Detail Page

Page of a selected product, which includes all product information.

Important changes:

  • Image gallery

  • Comments modal

  • Brand's subcategory

  • Summer of specifications

  • Related categories

  • Help box

  • Point's details

Checkout

Steps of placing an order, from shopping cart to payment.

Important changes:

  • Details of product

  • Time scope

  • Pickup locations

  • Price details

  • Payment methods

  • Add to wishlist

  • Online support 

checkout.png
user management.png

User Management

User's profile and the account information

Important changes:

  • Vouchers page

  • Recent orders on the dashboard

  • Help box

  • Search orders history

  • Return and cancelation

  • Comments history

  • Progress bar of order states

  • Notification management

ga results

Google Analytics Results

Here are some Google Analytics data after the application publication, comparing the same quarter (Jan-Mar) of this year to last year:

  • The number of users increases from about 3M to more than 5M

  • The number of mobile users increases by 4.82%

  • The homepage sessions increase by 14.2%

  • The checkout sessions increase by 77.3%

  • The number of transactions increases by 56.7%

Screenshot 2023-06-03 at 15.27_edited.jp
hotjar

Hotjar Outcomes

We decided to check Hotjar records in a 3-member team, including 2 UX researchers and me, before redesigning the web version based on the application.

Here are some significant screens of the web version:

bottom of page