Design and branding an e-commerce website for a clothing branding
Mirror is a clothing store selling affordable clothing for any kind of occasion. I created an e-commerce website for the brand to fullfill the customer and business expectations for online transformation
Research, user interviews, empathy map, persona, card sorting, site mapping, task/user flows, sketching, wireframing, prototyping, user testing, affinity mapping, style tile, UI kit, branding
8 weeks
Figma, Adobe Photoshop & Illustrator
See prototype
Mirror is a clothing store selling affordable clothing for any kind of occasion. Their main audience is everyone who look for budget-friendly clothing. The business goals of Mirror were as in the following:
The business goals were clear, but I knew very little about the customer goals. I chose to focus my research on possible user profiles to make sure that I ask the right questions before starting with design process.
Through Market & Secondary Research, I have gained insight about the current popular and future trends in current e-commerce industry. This helped me understand how the competitors proceed. Then, I compared the direct and secondary competitors to figure out the strengths and weeknesses. This way I could discover the opportunities that could be used to strengthen Mirror´s e-commerce experience and define the potential target group of customers. Finally, I could narrow down the research and focus on the following questions:
The potential target group of customers were defined as below:
.png)
.png)
I have conducted 1:1 online interviews with 5 people matching the estimated Potential Target Groups profile. The questions were open-end questions encouraging them to tell more about their motivations, pains and goals. The interviews didn´t only provide valuable info about these topics, but also helped me gain insight about people´s behavioral patterns and purchasing decisions:
“My favourite aspects in online shopping is when the brand helps me mixing styles. For example when I selects an item, under this item there are suggestions of accessories like bags and shoes that I can match this item with. I love it!”
- Alexi, 23, Fashion designer & Cook, Greece.
Shops more than once a month online
“It makes me crazy when the sizes presented on models are 34. Not every women is 32 or 34. I want to see clothes on real people wearing sizes of 38 or 40”
-Kaja, 31, Engineer, Poland.
Shops more than once a week online
In the light of the company goals, competitor analysis, potential target groups and the key takeaways of the interviews, I made an empathy map to better understand what the potential persona feels, acts, says and does:
Then, I have created my persona Lena. Both of these studies helped me concentrate on solving the right questions during design process:
I conducted a card sorting session with 6 participants with ages ranging from 20-35 to develop insight how users categorize information. The participants were given various clothing items to help inform what categories to create. The results showed:
This results helped me understand how people think and expect to interact with a clothing website.
The most common feature highlighted by the interview participants was clearly structured filters. Based on the results of the card sorting exercise, I defined the brand´s site map with pre-defined filters where they can look for items By Type, By Cut, By Collection etc. The sitemap below shows all existing pages in a diagram to show the website structure.
Task Flow has been made to explain a user´s journey from a social media app commercial to the Homepage to look for a pair of Jeans. The greatest pain of the interview participants was purchasing Jeans fitting their body type. So that I concentrated on this particular task for Task Flow. This work helped me later for the user flow and prototyping.
.svg)
I started sketching the user flow and wireframes. During this phase, I realized that Jeans Size Guide would be the major design highlight of this website. Traditional Size Charts were not helpful according to the interview results. That´s why I decided to invest in developing a short questionnaire. Body type and sizes change according to each person, therefore Mirror Size Guide would learn about each user´s body type and Jeans preferences in detail. Then, it would provide unique suggestions pro person. When the user registers with their email and password and complete the questionnaire, this information would be remembered.
%201.svg)
Based on the site map, user & task flows as well as the key takeaways from the interviews and my persona; Lena, I developed mid-fidelity wireframes. This work helped me prioritize and structure the sections on overall website:
Starting with the key words “trendy, modern , friendly and comfortable” I sketched the company logo. I went for an easily resizable option that can also be used with a background color.Then, I created a brand style tile reflecting the brand identity with the logo, fonts, color palette, imagery and symbols.
Finally, I created a UI Kit with the critical design components such as buttons, CTAs and fields before jumping into the high-fidelity prototype.
Folllowing the key insights derived from the research, I went on designing the high-fidelity prototypes directly relevant to the research and the usability test goals listed below:
The interview outcomes also showed that all the users expected well organized menus and a variety of filtering options while shopping. They mentioned that clearly structured filters help them find what they are looking for easier and save time.
During the interviews, 80% of the participants mentioned both seeing the product itself and seeing it on the model have been equally important for them. Purchasing Jeans had been challenging for the majority of the participants. That´s why I decided to concentrate especially on the Jeans for Product Category and Product Search Page
Pre-structured Product Category filters were provided on the Homepage to lead user to Jeans Product Search Page where they can set personalized filters. Collapsible Filters were provided on the left side of the product search page. Users were provided the option to switch from Product View to Model View on the right side of the page:
Interview results showed that for all the participants, seeing the items on realistic models with correct size, height and kg info of the models on the pictures had utmost importance. This was especially important purchasing Jeans online. All the interview participants mentioned that especially for Jeans, usually the models are shown on one single model with a certain size.
80% of the interview participants also commented that provided realistic texture and material info had an effect on their purchasing decision. Moreover, provided style suggestions and free-delivery info prior to purchase motivated users to shop more.
In the light of these information, the Jeans Product Page was created. On this page the user can view the selected Jeans on models with different sizes. Additionally, material/texture information and style suggestions were provided under How to Wear and You Might Also Like sections:
All the interview participants pointed out that it is hard to estimate the right size for their body type during online shopping. so most of the time they give up on buying Jeans online. 80% of the participants also commented that the existing Size Charts are not realistic buying Jeans online.
A Jeans Size Guide was created as a questionnaire to define the user´s body type and preferred Jeans fit better. A traditional size chart was also created for the users who don´t have the time to complete the questionnaire:
Placing the order and check out were the most overwhelming parts of online shopping according to all the participants. Many users (80%) also pointed out that they are usually afraid of purchasing wrong item or making a mistake during payment. They also have difficulty in placing the order. That´s why they usually purchase via PC.
As a solution, Shopping Bag and Oder Summary are provided side-by-side on the summary page. The users are also provided the option to pay via PayPal or being directed to the Check Out page. Check Out Pages were designed to include three steps; Delivery, Billing and Review. Shopping Bag is always visible until the last step of the check out to provide the user flexibility to change/add the items:
The usability tests were conducted online on Skype via screen share with 5 participants. I recorded the sessions to be able to make notes later with their permission. The users were introduced three main tasks to complete:
I have summarized the key takaways on an affinity map and prioritized the aspects to be updated. Then, I have made the iterations based on the key takeaways of the usability tests. Affinity map and the side-by-side comparison of before and after states of the relevant pages are given below:
View Affinity MapSide-by-side comparison of before and after states of the relevant pages are given below:
