Ecol Store is an online beauty retailer specializing in organic products and professional solutions designed exclusively to enhance women's beauty and preserve youth. Offering high-quality products for skincare, hair, and body care, the store provides a diverse selection that meets the beauty needs of the entire family, including men and children.
In our design process, I used the Design Thinking framework, customizing it for our project. We went through stages such as conducting research, organizing information architecture, wireframing, testing, and designing. It allowed us to go step by step, breaking down ambitious goals into small tasks.
In the initial phase, I met with stakeholders to understand the project goals, challenges, the client's preferences and target audience. The project's target audience comprises women aged 30-55 with medium to high income, who place a strong emphasis on their personal appearance.
Two primary research methods were employed during this project: competitive analysis and usability testing.
I analyzed 4 major beauty and skincare industry players, examining market position, user experience and design.
Product pages are cluttered with details and lack organization.
No quick summary for hurried users to grasp product highlights.
Competitors' efficient promotion and recommendation display could enhance user engagement and sales.
The page provides in-depth details about the product, including main active ingredients and their benefits.
The site have a complex navigation structure that could be confusing.
The page is crowded with various elements, which can be overwhelming.
Prominent 'New items' and 'Promotions' sections likely attract deal-seeking customers.
To gain deeper insights into the challenges and pain points that users face with our old website, we opted for a focused usability test. We recruited 5 female participants aged 30+ to represent our primary user demographic.
To stand out from competitors and assist customers in making informed choices, I implemented two strategic solutions:
We have identified two primary components within our information architecture that are crucial for decision-making: product cards and product pages.
I developed wireframes to define the website's structure, focusing on three main areas:
These wireframes help me validate my assumptions with the real target audience, enhancing the user experience.
We conducted user testing with 5 participants, asking them to complete the same 4 tasks that were included in our usability tests to evaluate our improvements. Low-fidelity prototype testing has revealed:
In our efforts to balance user needs with business objectives, we successfully achieved milestones in both areas:
Ensuring easy product access with a header search bar on each page.
Streamlined for cleaner, more efficient user access to information.
Implemented to boost customer spending by suggesting similar items
Reduced to two steps and removed non-essential fields.
Eliminated to reduce cart abandonment.
Added Apple Pay alongside traditional options
Products organized into clear groups.
Eliminated to reduce cart abandonment.
New filters for brand, type of products, type of skin.
Reflecting on this project, I gained several specific and impactful lessons, particularly regarding assumptions, user testing, and communication:
Involving developers early in the design process is crucial. We learned this after needing to adjust our high-fidelity prototypes' grid due to not consulting with developers about technical constraints initially.
User Testing: Initially, we hesitated to conduct early testing and considered testing only after final design. However, we later decided to validate key actions and improvement hypotheses early. This allowed us to spot and address filtering system flaws in the initial stages, saving costs in subsequent sprints.
