Ked Cosmetics- Vegan E-Commerce Platform
Alligning aesthetics with Ethos to Revitalize Digital Presence.
Role
UX/UI Designer
UX Researcher
Tools
Figma
Miro
Lookback.com
Skills
User Research
Wireframing
Design Systems
Dev Handoff
Duration
3 months
Table of Contents
THE CHALLENGE
Ked Cosmetics struggled with a website that wasn't performing well both functionally and visually.
As a new and growing business, Ked Cosmetics struggled with an ineffective website, and its current user interface didn't properly showcase the quality of its products to customers. Our team was tasked with conducting user research and re-designing the website to increase user satisfaction and meet business goals.
THE SOLUTION
A visually stunning and minimalist website, supported by UX methodology and crucial user feedback, creating opportunities for customer engagement and fostering trustworthiness.
I pushed for more research to find user pain points and solutions that would foster credibility and directly lead to an increase of sales and brand engagement. After client approval, our team created wireframes, high-fidelity designs, a style guide, a functional prototype, and a developer handoff to the client so that they have all aspects to create her a new visually stunning and modern website.
BACKGROUND CLIENT
Empowering Beauty Through Ethically Sourced Products
Ked Cosmetics is an e-commerce platform providing vegan beauty and hair care products, championing natural beauty solutions. Their mission revolves around sustainability, animal welfare, and the empowerment of women, as they are a woman-owned business sourcing locally and using homemade organic ingredients.
METHOD
Structuring the approach
In order to organize my approach, I adopted the Double Diamond Design Methodology. This approach encourages convergent and divergent thinking, facilitating comprehensive exploration of ideas before honing in on focused action. I felt this would be a great approach for this specific client as this was a newer e-commerce store and this methodology was very thorough in the processes of finding and designing solutions.
DISCOVERY
CLIENT GOALS
Client Wants to Elevate Aestethic Appeal Online While Maintaining Vegan Ethos.
Following discussions with the client, it became clear that they sought a visually captivating website, maintaining its distinct identity rooted in sustainability and vegan products amid a competitive e-commerce environment. The client wanted to convey a sense of trustworthiness such as brand websites like Lush and Ulta.
EXSISTING WEBSITE
Exploring Ked’s Existing Digital Assets.
The client lacked an active website but possessed basic mid-fidelity wireframes from a previous team. I used these wireframes as a starting off point of the discovery stage. I wanted to do some secondary research to find how other competitors in similar spaces created great visual and highly preforming websites.
RESEARCH
Understanding the problem
1
Secondary research
Exploring news articles, peer-reviewed studies, and online blogs provided valuable qualitative and quantitative insights into beauty e-commerce trends and consumer behavior.
2
Competitive analysis
Analyzing competitors' strategies offered valuable perspectives on addressing similar challenges in the beauty e-commerce landscape, guiding the development of innovative solutions.
3
Interviews
Conducting one-on-one interviews provided qualitative insights into consumer behaviors and preferences when evaluating beauty products online, informing strategic decision-making for website optimization.
COMPETATIVE ANALYSIS
The Standards of Winning Beauty Websites.
Conducting a thorough analysis, I reviewed top-rated beauty e-commerce sites, along with direct competitors and inspirational sources like Lush and Ulta. These websites emphasize minimalist design, employing clean layouts and bold imagery to spotlight products, while prioritizing user-friendly navigation and mobile optimization for seamless browsing. Furthermore, they incorporate engagement tools such as customer reviews and social media integration to bolster user interaction and cultivate brand loyalty.
USER INTERVIEWS
Unmoderated User Interviews
We conducted an unmoderated user interview section to get feedback on the current website flows and design using the mid-fidelity wireframes that the client had from a previous organization which we prototyped in order to get insightful feedback that would help direct us in a good direction.
Interview Objective
Understand user’s pain points, needs, and goals with the online shopping experience.
Gather feedback on the usability and functionality of the existing website.
Explore users' perceptions of the Ked Cosmetics brand and its values.
Validate proposed design solutions and enhancements through user feedback.
Participants
Gender: 10 female, 5 male
Age: ranging from 18-40 years old
Duration: 15-30 minutes
Type: Unmoderated Interview through Lookback.com
Research Findings
To analyze insights from the qualitative data obtained through interviews, I compiled a comprehensive master testing report. This report encompassed comments from all interviewees, which were then prioritized based on their significance, ranging from critical to non-critical. I formulated suggestions to address the identified issues effectively and sent it to the client for approval before moving on to the next steps.
KEY INSIGHTS
Major insights and findings
1
Too much whitespace
The presence of excessive whitespace suggests a need to optimize layout and content distribution for improved visual balance and user engagement.
2
Inconsistency between screens
Inconsistencies between screens indicate a lack of cohesive design language, which may lead to user confusion and detract from the overall user experience.
3
Desire for more information
User desire for more brand information highlights the importance of transparency and credibility-building elements on the website to foster trust and engagement.
IDEATION
Site Flows
I developed site flows by incorporating client feedback, conducting cooperative analysis, and gathering user feedback, ensuring a comprehensive understanding of the website's overall architecture to inform the design of UI elements.
Brand Vision and Moodboard
Our team delved into capturing Ked Cosmetics’ brand vision, which revolves around sustainability, veganism, and using locally sourced ingredients. We carefully selected images for our mood board that mirror these values, aiming for a balance between eco-friendliness and the high standards seen on top beauty websites.
Style guide
After compiling the brand mission and moodboard, we selected iconography and typography that aligned seamlessly with the client's branding. Subsequently, we established a design system, integrating text, color, and grid styles into the Figma library to ensure consistency and facilitate streamlined utilization by future teams.
-
![]()
Master Components 1
-
![]()
Logo, Color Palette & Iconography
-
![]()
Typography & Grid
-
![Navigation & Buttons]()
Navigation & Buttons
DELIVER
HIGH FIDELITY SCREENS
Putting it all together
With all the research done, insights utilized for design solutions, and the established UI design elements approved, we created the final high-fidelity screens providing a beautiful aesthetic website for users to have a seamless shopping experience and to increase sales and engagement for the client..
-
![About Us Page]()
About Us Page
-
![]()
Ked Cosmetics Homepage
-
![]()
Blog Page
-
![]()
Order Tracking
Developer Handoff
We utilized design plugins such as Measure and Annotate It that are designed to accurately measure pixel dimensions and annotate design elements. This approach ensured meticulous documentation, including detailed notes on each element's purpose and function, enhancing clarity and facilitating seamless collaboration between the design and development teams.
