Estilove
Overview
EstiLove is a clothing store that started back in 1994. Their target audience is anyone that that wants high quality clothes at affordable prices.
The Challenge
EstiLove has not adapted to the digital world. Customers have requested for the option of shopping their products online, citing it’s convenience on finding different sizings and styles.
Solution
New brand identity with a responsive website that is easy to use.
Build an online shopping experience that addresses the user’s needs.
Role
UX/UI Designer
Time
4 weeks
Tools
Figma, Optimal Sort, Miro, Whimsical, Illustrator
Research
Market Research
E-commerce activity has made great strides in the last few years. With the pandemic, many store closures and other restrictions occurred pressuring businesses to find alternatives for more people to browse and shop. This increased the trend towards online shopping, which will probably be the focus for some time now as consumers have evolved their preferences and seen the convenience that online shopping has offered them.
In 2019, there was an estimation of 1.92 billion buyers.
E-commerce sales are expected to rise from 14.1% to 22% by 2023.
Website design is a major determining factor for consumers, being that 88% of customers think it's important to have detailed product pages when making purchase decisions.
67% of Millenials and 56% of Gen-Xers prefers to shop online versus in-store.
Men spend 28% more than women shopping online.
User flow when shopping online is not a straight path as 85% of customers start a purchase on one device and finish it on another.
Clothing online shopping is popular around the world. This allows EstiLove to grow in the digital market.
Competitive Analysis
EstiLove's competitors were analyzed to determine their strengths and weaknesses. Understanding other brands differentiating factors on similar problems they face, helped me make decisions that would put EstiLove in a good position in the market.
User Interviews
After research and analysis were done, user interviews were conducted to understand their values, challenges, and what they enjoy when shopping online.
Participants info
6 participants
4 men and 2 women
Age range: 22-25
Method: Zoom Interview
Objectives
Identify user values and pain points
Identify user experience shopping online versus in-store
Understand the overall online shopping experience
Pains
A complicated returning process for clothes and shoes.
Sites have random pop-up windows.
Stores sites still list their products when it’s out of stock.
Goals
Clothes that have a good fit with different sizing options.
Fast shipping at a low or free cost.
Return policies to be easy and hassle-free.
Clothes that are trendy yet fashionable and wearable for multiple occasions.
Motivations
Items with good reviews with pictures provided.
The payment process is fast and easy.
Purchase online instead of in-store when offered discounts and sales.
Shopping sites offer them different measuring options that allow them to get a more accurate sizing.
Empathy Map
Based on the information gathered from the user interviews, I created an empathy map for a deeper analysis.
To create a new online brand identity for EstiLove, I needed to understand the online shopping market and customers' needs. By creating a research plan to determine both the company and user's goals, I was able to have an insight into the direction I wanted to take with my ideas.
Top reasons users shop online:
After conducting the interviews, these were my findings of all participants on their online shopping experience.
Overall, a common goal that participants looked forward to in their shopping experience was to be able to purchase quality clothes with a satisfactory fitting and a convenient payment process with an easy return policy. This information put together gave me a clear idea of features to add to the website.
Define
EstiLove & User Goals
I used a ven diagram to help visualize the business and user goals along with technical considerations to have a clear decision in the design process.
Card Sorting
Estilove has a large inventory that is difficult to move to their brick and mortar stores. By having access to those inventories, users would have to shop online.
For users to have an easy shopping experience, I conducted an open card sorting using the Optimal Sort tool to understand how users organize clothing categories.
5 participants
20 card labels
Result:
80% of participants categorized products by the type of clothing; top, bottoms, and footwear.
Site Map
Based on the card sorting and additional research of competitors' websites, I created a sitemap that would show the content layouts and the relations between pages on EstiLove's website.
Persona
With insights gathered from the user interviews, Elaine was born, highlighting her values and goals.
User Flow
I created a user flow to visualize the buying process and any possible thoughts Elaine might have when purchasing a pair of shoes.
Task Flow
The task flow showed Elaine's journey when buying a product.
Low-Fidelity & Mid-Fidelity
Keeping Elaines's shopping experience in mind, I sketched different layout ideas for the EstiLove website. After choosing a layout that matched Elaine's needs and goals, I built mid-fidelity responsive pages for different devices to settle Estilove's website layout.
Ideate
Brand Logo
EstiLove has a 28-year-old logo that the company wants to update. They want a new, modern, and neutral logo that will attract all types of customers.
Style Tile
For a strong online presence, EstiLove's style goal on their website is to give a modern yet comfortable and reliable feeling. I chose a warm palette with different shades of brown that would help reflect those feeling to its customers.
Prototype
Desktop Prototype
I implemented the visual designs to key responsive pages that would be used to build EstiLove's prototype.
After putting together the design style, using the Figma prototype, I built high-fidelity frames with limited functionality for usability testing.
Affinity Map
After conducting the prototype testing, I created an affinity map using the Miro tool to gather common insights from participants' usability testing.
Priority Revisions
Based on the participant's feedback, revisions to the designed pages were made.
Homepage seasonal sections and borders were removed for a less scrammed look.
The price filter on the category page was updated to a scale for better price adjustment.
All pages were updated to have the sales banner at the top, to remind users of the discount code.
To encourage users to continue shopping after purchase, product cards were added to the confirmation page.
Test
The testing objectives were to observe any errors or challenges the user encountered when navigating the website and gather their first impressions.
Users info:
4 participants
2 Men & 2 Women
Age range: 23-26
Method: Zoom, sharing Figma prototype
Tasks:
Navigate homepage.
Shop for two dresses and add them to the shopping bag.
Go through the checkout process.
Reflection & Next Steps
This project helped me have a clear understanding of the process of conducting research and using those findings to test and build a product that is desirable, feasible, and viable. Although I faced some challenges in the making of this project, I embraced the learning process and my desire to keep improving.
To further push this project, I would:
Re-test the changes.
Handoff the final design to developers.
Launch the product.
Continue to iterate and improve the product using the design thinking process.