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
Tap the opportunity of increasing the online sales
Customers’ consistent requests for an online shopping store
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:
This phase was broken down into the following four activities:
Understand and study the Pain Points and Unmet Needs of the users in the existing process of online shopping
Types of Research:
Empathy Based Primary User Research
Competitive / Market Research
In person and telephone interviews recorded with permission
Direct Competitors: Old Navy, Forever 21 and H & M
In direct Competitors: Asos and JCrew
- 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
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
“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.””
“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.”
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.”
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.
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.
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.
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 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.
Main menu navigation
Product Details Page
Discounts and Coupons
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
The brand message based on which the visual design was chosen is:
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.
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.
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.
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
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.
Browse through the available dresses and purchase one.
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.
To have a list of the user feedback associated to:
Persona pain points that were attempted to be addressed via this design version
Persona unmet needs that were attempted to be addressed via this design version
New user pain points that surface during testing
New user needs that surface during testing
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:
Extraordinary: A list of things the user found extraordinary
Normal: A list of things that the user found normal (as in seen in every other clothing website)
Frustrating, Confusing: A list of things that the user found frustrating, confusing or plainly did not like it.
To obtain the end user’s perspective on the site’s LEMErS
To uncover any areas that were not considered as pain points or unmet needs or in general while making design decisions
The test findings were recorded in the form of an Affinity Map.
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!