Portfolio

Modori- Ecommerce
  • 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,
Pain Points                                      Consumer Needs                                    Possible Solutions
  • Non responsive Website across Muiltiple devices
  • Providing toomany information just to create a user account
  • Complicated product filter
  • unable to access featured product in hero image
  • Consumer Need
  • High Quality Images product
  • Detail Product Specification
  • Buy Clothes after trail
  • Reach Quickely to customer service
  • Consumer highly value user reviews
  • Product recommendation based on history of purchase
  • Find availability in a near store
  • Invest in good photography of product image

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.
Persona
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.
 
Define Project Goal
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.
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. 
 
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
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.
tr> tr>

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.