Fashion e-Commerce Website Design

The Design Challenge

The Fashion Street is a fictitious clothing brand with a global chain of brick & mortar stores which is very successful offline. It offers good quality clothing at affordable prices. It provides clothing in several styles & for different occasions, for the entire family.

The challenge I tackle in this project is to:
 

Design a responsive e-commerce website that is easy to use and that allows customers to browse through all products and filter by size, color, style and others.
 

Design a logo that is modern and neutral enough to attract all types of people and styles

Key Drivers of the Challenge

  1. Tap the opportunity of increasing the online sales

  2. Customers’ consistent requests for an online shopping store

  3. Address the issue of plentiful remainder inventory in the warehouses that needs to be sold

The Design Process

The various phases followed in the design process and the activities in each phase are illustrated in the image below:

Research

This phase was broken down into the following four activities:

Research

Planning

Research Goals

Types Of Research

Research Participants

Research Timeline

Research

Conducting

Primary Research

Secondary Research

Market Research

Competitive Analysis

Research

Data Collection

Audio Recordings

Detailed Notes

Research Debrief

 

Common User Behavior

Pain Points

Unmet Needs

  1. Research Goals:

    • Understand and study the Pain Points and Unmet Needs of the users in the existing process of online shopping
       

  2. Types of Research:

    • Empathy Based Primary User Research

    • Secondary Research

    • Competitive / Market Research
       

  3. Primary Research:

    • In person and telephone interviews recorded with permission

    • Ethnographic Study
       

  4. Secondary Research: 

    • Direct Competitors: Old Navy, Forever 21 and H & M

    • In direct Competitors: Asos and JCrew
       

  5.  Research Debrief​
    • Organized the primary research data and drew some commonalities, unmet needs and pain points from the same

    • Organized and categorized the secondary research data into strengths and weaknesses for easy comparison

Common Behavior

1. Users prefer buying when there are sales, promotions & coupons available

2. Users want to avoid paying the shipping charges

3. Users want free and easy returns

4. Users find it advantageous to have a store both at a physical location and online, due to various reasons

 

Research Synthesis

“I juggle many tasks and I do not have time to sit back, relax and spend a lot of time on shopping. I want online shopping to be quick, efficient and relaxing.””

Persona

Empathy Map

“I enjoy the experience if I find great variety, great prices & promotions and correct sizing! And not to forget, free and easy returns!

“II have already accumulated the wardrobe I like. So, I generally buy to fill a gap in the wardrobe.”

Storyboard

Creation of a storyboard and peeking into Amrita’s daily life, helped to know about her routine, her lifestyle, her thoughts, her preferences and her pain points. In short, it was like walking in her shoes.

“Who does not enjoy dressing up, looking good and getting a nice break?! But getting a dress should not cause stress, cost a fortune and take forever to buy.”

Information Architecture

After synthesizing the research and deeply empathizing with the unmet needs and pain points of the users, the next step was to initiate the process of structuring and organizing the data of the site.

The method of Open Card Sorting was used to form a guideline and collect data about the categorization of the clothing. I analyzed the results of the card sort to find patterns and generated a similarity matrix.

This was followed by the design of the site map.

Site Map

Interaction Design

In order to provide the most intuitive interaction with the website, the happy path for a particular task was chalked out in the form of a task flow and a user flow.
 

Task: User purchases a clothing from the store.

Task Flow

The task flow captures the most basic essence of the task - “the task itself”. It is independent of any digital platform. It simply chalks out the steps a user will perform when she needs to purchase a clothing. This exercise helps a designer to design an experience that is nearest to the actual physical experience a user has.

User Flow

The user flow is associated with the digital product we are designing. Each page in the user flow matches with the site map, making the understanding of the flow very clear with respect to the actual pages that will be designed for the site. This is helpful to both, the designer and the developer.

Design Patterns

Design Patterns were studied and identified for the following:
Competitive ecommerce websites and other resources like the UI Design Pattern website were studied to look for the design patterns in use.

  1. Main menu navigation

  2. Content navigation

  3. Search

  4. Product Details Page

  5. Discounts and Coupons

Wireframes

The user flow was then translated into a set of wireframes representing the screens of the website and thus giving a rough idea on how the task on hand will be completed by the user as she interacts with the website


Some of the wireframes are exhibited below

1. Landing Page / Entry point to The Fashion Street online shopping store

2. The display of categories under the main category WOMEN

3. Category: WOMEN

    Sub category: Dresses

 

The page shows all the products under sub category.

The page shows the various sorting options that can be applied to the results

 

4. Product Details page

Shows all the details, reviews, photographs, options, sizes etc. about a particular dress

5. Shopping Bag page

Shows the item purchased, the cost, all the other details pertaining to the item along with suggestions and prompting for other clothing that the user might like to buy

Responsive Wireframes

UI Design

Branding

The brand message based on which the visual design was chosen is: 

 

1. Neutral

2. Modern and Fresh

3. Clean and Clear 

I also wanted to convey that The Fashion Street provides a variety of high quality clothing at affordable prices for all the age groups of people. The colors and photography have been chosen keep that in mind. It reflects affordable elegance.

Style Tile

Below is the style tile that presents the finalized color scheme, typography, the logo and the other visual elements.

High Fidelity Design

Below are the final high fidelity screens that do have the priority revisions and user feedback incorporated obtained after Usability Testing.

High Fidelity Prototype

Product Feature Highlights

The different deliverables and milestones obtained as a part of the information architecture, interaction design and the UI design were all tailored to encompass the needs and requirements of the user persona.
Here are the different feature highlights that will create an efficient, quick and delightful experience for my users.

 

Content
One of the most important thing that is very critical for creating a pleasant & a satisfying experience is the content that the users are actually interested in buying. The content chosen and the variety provided in the high fidelity design matches perfectly with my users’ interest. This content silently attracts my users and hence there is no need for design elements that are loud and persistent in nature.

 

Layout
The layout is very clean and uncluttered. This makes the actions of browsing, searching & purchasing very efficient, very focussed and eliminates any confusion as well as any distractions
 

Visual Design
The color scheme reflects the brand adjectives: Classy, Modern, Elegant and Unisex. The setting of the imagery is gorgeous outdoors which accentuates the look of the apparel rather than stealing the show.
 

Prices & Promotions
Along with the gorgeous apparel presented beautifully, another most important thing is, the price! The prices are affordable and not exorbitant given the users’ spending preferences and spending limits.

My users have really liked the way the promotions have been displayed in banners with an indicator for each type of promotion. The indicator repeats on the actual item which marks the item for that sale. My users have noted dislike towards large, flashy posters announcing the discounts and importantly the popups and notifications following the user throughout the experience. The designs of the promotion indication is very clear, respectful and unforgettable.

 

Usability Testing

Task

Browse through the available dresses and purchase one.

 

Testing Goals
 

To gather data that will serve as an input for the successive design iterations and design decisions to make the design align closely with the end-user’s expectations and requirements.
 

  1.  To have a list of the user feedback associated to:

    1. Persona pain points that were attempted to be addressed via this design version

    2. Persona unmet needs that were attempted to be addressed via this design version

    3. New user pain points that surface during testing

    4. New user needs that surface during testing
       

  2. To find out how was the user’s overall experience of using this website with respect to features, interactions, content etc. to complete the task at hand:

    1. Extraordinary: A list of things the user found extraordinary

    2. Normal: A list of things that the user found normal (as in seen in every other clothing website)

    3. Frustrating, Confusing: A list of things that the user found frustrating, confusing or plainly did not like it.
       

  3. To obtain the end user’s perspective on the site’s LEMErS
     

  4. To uncover any areas that were not considered as pain points or unmet needs or in general while making design decisions
     

Affinity Map

The test findings were recorded in the form of an Affinity Map.

Summary

The entire process starting from research to usability testing and feedback was very detailed. I enjoyed working on all the steps! Learning about and gathering new insights and user behaviors based on the interviews and usability testing was a remarkable experience which helped me walk in their shoes. The entire design process revealed that by following a particular path and iterating on it can actually help solve any problem!

Next Case Studies ...

GardenMum.png

The Garden Mum

Designed an experience which helps in diagnosing health problems with the plants, provide solutions, identify the plants as well as come up with a complete planting guide and care tasks for each and every plant you wish you plant!

smule1x_edited.png

SMULE - Music Sharing Experience Redesign

Re-designed the experience of finding a song on Smule to collaborate on. The new experience increases the chances of finding the perfect singing partner, hence making it a lot more enjoyable and satisfying. The new design also focuses on a cleaner and more intuitive interface.

IndianRailways_1x.png

India By Rail

Designed an experience of booking Indian Railway tickets, specially catered for the foreign visitors and tourists from the overseas.

Aditi Oza 2019