How a fashion
e-commerce application created from scratch

My role

I was a UI/UX designer focused on mobile apps in a team of 3 for designing the new
e-commerce online store.

Project Overview
DIGIKALA has decided to build a new and independent fashion e-commerce app called DIGISTYLE. I should have designed a fashion e-commerce app which people can trust to buy a product from. And also user get to know his/her size in order to reduce the product retention. Create a new branch of digikala.com (the biggest e-commerce company in Iran and  the middle east) which cells the wearable products. Iranian users don't trust to buy clothes online base on our purchasing culture. So building a trust foundation to make a habit of online cloth shopping was crucial.
  1. Benchmarking & Research
  2. Creating Persona and user journey
  3. Wireframing & Design
  4. Test & Measurement
1. Benchmarking & Research

This phase started with a group test of targeted audience which was supposed to help us create persona. With surveys and interviews with a group of users from the wearable categories of DIGIKALA, we had a rough definition of the general user's types and online behaviour. here are some primary informations about things like: genders, age, amount of time which they spend on the internet, their jobs and the experience of purchasing online wearable products.

Key interview questions:
- Can you describe your typical online clothing shopping habits?
- How often do you buy clothes online?
- What are the top three reasons you buy clothes online than in store?
- What are the main platforms you usually buy clothes online?
- What are the pain points when you shop clothes online?
- How often do you make returns and exchanges, and why?
- Any other things you want to add?

Research Findings
I used affinity diagram to analyze all the insights and findings from my user interviews. Overall there are three main pain points users have with online clothing shopping could be categorized into: Desirability, Accessibility and Reliability.

Desirability: What the user had in mind was to be intrigued and feels that this should be my cloths and I'm in my best look when I wear this.

Accessibility: Buying online should be easy because I have hard time asking the price from the seller in the physical shops and I don't feel like I can stay there as long as I want. So the Online shop should give me the freedom of endless browsing and searching until I find what I want.

Reliability: It's important for an online shop to be trusted since I'm going to spend my money on that. The issue of returning the product back when I don't like it is my biggest concern so I need to be sure about that.

2. Creating Persona and User journey

As a first phase of the product design process, we started to search the market and similar apps (Competitors) both local and internationals in order to gather information as much as we can, then we created a mood board full of inspiration and ideas which came out of brainstorming sessions and benchmarks. On the next step we carried out several interviews with buyer segments of the Digikala app and and based on other researches and assumptions, we identified three main types of personas for this e-commerce mobile application.

Maryam
She wants to look different and unique. She thinks the appearance tells a lot about you so you should be always in your best look. She doesn’t spend a huge amount of money on clothes but she picks the best material and quality so they last for a long time.  

Paria
She’s a fashion designer who loves to look innovative and fashionable. As a designer she wants to keep herself updated by searching and browsing about the public taste and also she buys designer items.

Zohreh
She is an artist, she has her own style but doesn’t always know what to wear. She uses internet a lot. Zohreh is a browser and purchase products quite often.


After creating three main persona types from the targeted audience, we went for creating the user journey to check if what we assumed about the user flow is correct. It consists the user needs and the road which user goes through shopping from different flows.

Card Sorting Approach

To understand the users' expectations we used card sorting approach to build the best structure for our product category branches. We used group card sorting technique with 3 facilitators which i was one them.

3. Wireframing & Design

After we had the research results and all the insights from the research phase, we started designing the applications. For this step, the main tools we used were paper wireframing, sketch app and an interactive prototype tool named proto.io and zeplin.io for handoff to developers.


Here you can see some final pages and illustration which I designed for Digistyle mobile application.

4. Test and Measurement

Planning to run a usability test with a specific segment of the users was the next step to evaluate some issues and address them in the next iteration. After publishing the first version of the app on app stores we observed the user behaviors through recordings and quantitative data. We had this issue with users who added the items to their Next shopping card (Wish list) and then the they didn't buy it at the end. Before running the test after careful observation, we decided to invite two targeted groups to a usability test session. They were a segment of the users who added items on their card and never bought them and the other group were the one who bought only once and never came back to the app and were not satisfied with the experience. This second group were also targeted by the call center team with unhappy calls category.

With the result of the usability test and these were the main problems so far: