Modori- Ecommerce

Portfolio item details

UX Process

My Roles: Research, UI/UX Design, Prototyping

Skills: Powerpoint, Photoshop

UX Methods: Interviews, Brainstorming, Visual Design

Project Overview- Modori Ecommerce App
Identify problems and/or opportunities in an existing ecommerce mobile application and utilise our knowledge in designing a solution. The project entailed designing a clothing retail app from scratch. The ideas listed below apply to most fashion retailers with an ecommerce presence. We chose to design and develop a Responsive ecommerce app because of the platform’s stability and rich set of ecommerce features.
Project Goal

They are very late in the game for a digital transformation. They decided not to invest in digital because they preferred keeping the service in person. Customers have been asking about it for years, complaining that they can’t find their size in the shop, so they always order clothing online from other stores. Midori has also acknowledged the fact that they have plenty of remainder inventory in their warehouses that are very difficult to move. Today, due to digital shift in consumer behaviour, prolonged requests from customers for online access and the need to clear warehouse inventory to cut costs, Midori decided to extend their services digitally by making their products available online.

  • To design a responsive e-commerce website for Midori, in order for users to browse and purchase with ease.
  • Design a new logo that positions Midori as a neutral, modern and a fresh clothing store.How is Midori positioned compared to their competitors?
  • Design a e-commerce mobile App that is easy to use and that allows customers to browse through all products and filter by size, color, style and others.
The Solution - Design Approch
Ther approach to UX design puts users first. My UI/UX design approach is generally customized based on the client requirements, we follow a lean UX program with a balance in user research, prototyping, mockups, usability testing, and required design documentation. This helps in keeping things practical, actionable, and cost-effective while delivering the quality and well-researched design decisions.

UX Research and Design process

I. Empatize Research & Discovery
Research Plan and Competitive Research
research plan was formulated to determine the demographics of potential consumers - their needs, expectations and what drives their motivation; analyse the scope of current Indian apparel industry; assesscompetitors market positioning and analyse their website functionalities / features; identify pain points of consumers and what difficulties they face when shopping for clothes online. An empathy research was conducted over a duration of 6 days using the following proposed methodologies - secondary research, competitive analysis, contextual inquiry and customer survey. Overall findings from research helped establish,
To understand pain points, user needs, and the user goals of online clothing shoppers,  I spent a whole day conducting one-on-one interviews with seven participants in a local shopping mall. I used open-ended question to encourage them to share their stories about online shopping and in-store shopping experiences.  
Research questions:
  • How is Mirror positioned compared to their competitors?

  • What do customers think about online shopping vs in store?

  • What do the customers expect to see when they go to a store or vs when they buy clothes online?

  • How do the customers interact with the websites before they make their purchase decision?

  • What are their goals for their online shopping?

  • What do they need on online shopping?

  • Which factors influence the online shopping experience?

Assumptions to validate:
  • The modern lifestyle has made people to be too busy to go to stores to look around and try new clothes.

  • Shoppers who always stay current with fashion trends fall in love with Mirror brands.

  • Many old people (maybe older than 70 years old) are not tech savvy, so it is difficult for them to buy clothes on online stores by themselves. However, they can ask their children to buy clothes for them.

2. Define Synthesising User Research
From the research findings, participants inputs from contextual inquiry, research data were analysed to identify similarities/patterns in user behaviour and preference.
A persona was built that resonates with their goals, needs and frustrations. A back-story for the persona was created to resemble interviewees lifestyle.
Empathy Map
An empathy map was developed using patterns observed from inputs provided by participants from contextual inquiry. Two of the most observed pain points from the research data were chosen as underlying problem to create a scenario for storyboard. It was observed that a lot of participants were hesitant to buy clothes online, afraid of getting a size too small or too big. The story depicts a situation where the persona ‘Samantha’ would face a similar problem and how using Midori would help her overcome her presumptions about online shopping.
To sum up my research findings and further develop user persona, I created an empathy map that consists of five quadrants reflecting what users Do, Think, Feel, Hear, See and Say.  I used many sticky notes to fill out the Empathy Map by listing user quotes, keywords, user behaviors, user thoughts, and user feelings. Then I looked for patterns, trends and contradictions across my observations. Ultimately, I synthesized user insights and user needs to help me define and solve the design challenge.


  • Most users use their laptop to make their final purchase, but they use mobile to browse their favorite clothes before placing an order.

  • Most users feel it difficult to compare the prices, the sizes and the images on one page.

  • Most users have trouble finding information about their correct size, the clothing description and the material details..

  • Most users are reluctant to buy online clothes because of the hassle of returning the products.

  • Most users are influenced by beauty guru on Instagram and Youtube.

Synthesize business goals & user goals
Using overall research findings i.e. goals and pain points of both business and users were defined to establish project goals. Additionally technical considerations were also included to help achieve realistic outcomes.
I collected the business goals from the project briefing and the user goals from both the user research and my analysis report. With this, I defined the overlaps of both business goals and user goals. Also, I took the technical side into account because technical considerations is the third pillar of any product (next to business and user-centric design).
Product Roadmap
feature roadmap was developed using inputs from interview, survey and secondary research. Must have MVP features requested by participants as essential to an e-commerce website were given high priority. Typical features in a clothing website was added along the way which would help users in their buying process. A feature roadmap is a high-level visual summary that maps out the vision and communicates the why and what behind what I plan to build. Therefore, I listed the key features that would be included in my product’s design based on Mirror-user-research-conclusions, the business needs, the persona, and the market I analyzed. Afterwards, I prioritized the features on the list based on their importance to the business and the users. 
Feature Roadmap
Comperatative Analysis
A competitor feature matrix analysis was done alongside direct and indirect brand competitors.It helped to analyse the cost and value of implementing features and services to find which will be profitable and easy to execute with the most gains; identify which features are available/not available in competitors website.
Information Architecture - Card Sorting
Before beginning to categorise sections of the website, a card sorting study was conducted to understand how users perceive product categories. A set of 30 clothing items along with a product picture and description were provided to participants. This helped to create the foundation of developing a sitemap. Task flow represents how a user would use the website to purchase a product. The user flow map depicts two different tasks and the user flow for each of the tasks - using Try & Buy feature and purchasing a product.
Site Map
Based on those results of Card Sorting that helped me evaluate the information architecture and organize the contents into categories, I created a sitemap that includes all of my proposed screens and user flow in order to help me understand the structure of the site and show the relationship within the content on Midori’s site
III. Design
Wifeframing - Experience strategy : Before beginning to design wireframe, various sketches were made to build variations on the homepage to establish a basic structure with the use of sitemap. A low fidelity wireframe was designed using Sketch for important pages. Subsequently pages were later developed to complete task flow for buying a product and using the Try & Buy feature
Brand Identity
Designing the logo involved sketching various ideas derived using word map technique.  After several round of iteration, a logo was chosen. The letter ‘M’ is used as a base in the creation; Midoried opposite to each other creating an effect of rectangular Midoris reflecting one another. Keeping in mind, that the brand should cater to all people of varying styles, the Midori is a reflection of each individual’s personality and taste. The use of colour red is known to evoke strong emotions. The use of color red can be profitable as it stimulates a sense of urgency to shop and also create a delightful experience. Varying shades of blues and greys are used to neutralise the palette.
IV. Prototype
Prototyping with Invision
An interactive high fidelity prototypeof Midori 0desktop website was created using Invision. The prototype functionality is limited to two major task flows.
a. Finding a product and adding to cart, through checkout to payment and confirmation.
b. Finding a product and scheduling  visit to store using ‘Try & Buy’ feature.
IV. Test  
To determine the level of efficiency of design and usability within the user interface of the interactive prototype, multiple moderated and unmoderated usability testings were conducted. The test plan was devised were to understand user preference, memory and identify potential navigation issues within the task flow. From theusability test findings, an affinity map was created based on error patterns observed.
The affinity map is segregated into groups of findings in navigation & usability; content and call to action, suggestions from participants and recommended course of action. The issues identified were addressed based on priority and subsequent changes were made to the interactive prototype.
Key Solutions
Based on patterns that emerged from usability test, a lot of potential user suggestions can be taken into account to initiate research for validating user preferences across brand archetypes. After establishing valid reasoning for implementing new features, the same can be updated in the prototype to run a usability test.
The process can be repeated to include various novel features in the site such as designing and developing 'Lookbook' and 'Personal Stylist' sections.

© 2011 rsatyajit77 - All rights reserved.