Atlanta, Georgia
Jolán Caldwell
Kylie Cosmetics
E-commerce Web Redesign
A speculative redesign focused on visual system refinement and digital brand storytelling.
MY ROLE
User Research
UX/UI Design
IxD Design
Design System
TIMELINE
4 months (Fall 2025)
TOOLS USED
Figma
Adobe After Effects
CONTRIBUTORS
Jolan Caldwell
OVERVIEW
This project is an e-commerce web redesign for Kylie Cosmetics, focused on creating a cleaner, more intuitive shopping experience while maintaining the brand's bold, high-impact aesthetic.
PROBLEM
The existing e-commerce experience made it harder than necessary for users to quickly find product, compare options, and confidently complete a purchase, due to cluttered layouts, weak visual hierarchy, and an overly busy shopping flow that distracted from the products themselves.
PAIN POINTS
Visual Overload
Crowded layouts compete with product imagery, making it difficult for users to focus on key items.
Poor Product Clarity
Shades, variants, and product details are not clearly distinguished, increasing decision fatigue.
Unclear Navigation
Users struggle to move intuitively between categories, collections, and product pages.
Checkout Friction
The path from selection to purchase feels longer than necessary, risking drop-off before conversion.
Research Insights were synthesized from competitor analysis, brand research, and behavioral patterns to identitify the most impactful opportunities for improvement.
RESEARCH INSIGHTS
THE REBEL
50%
50%
THE LOVER
Sephora
Excels at category structure and filtering, making it easy for users to narrow options quickly without feeling overwhelmed.
Source: Competitor Analysis
Ulta Beauty
Effective use of personalization and recommendations increases engagement and repeat purchases
Source: Competitor Analysis
Fenty Beauty
Industry leader in inclusive shade presentation, using clear swatches and consistent visuals to build trust.
Source: Competitor Analysis
R.E.M beauty
Editorial, futuristic design reinforces brand identity while keeping product pages visually focused and clean
Source: Competitor Analysis
PROBLEM - SOLUTION MAPPING
Users struggle to explore shades quickly and often have to jump between multiple pages to find the right lip kit.
An interactive Lip Kit Shelf allows users to click directly on shades, instantly view names, and move straight to the product page, reducing friction and speeding up decision-making
The shopping experience feels transactional, with little opportunity for community or direct engagement with the brand.
Kylie Konnect creates an interactive layer where users can comment, share post, watch videos, and engage with other buyers and Kylie herself, turning the site into a social community driven experience rather than just a store.
Users feel overwhelmed by cluttered layouts and inconsistent structure, making it harder to focus on products.
A more structured and organized layout improves visual hierarchy, guides users naturally through the site, and makes browsing feel clean and intentional.
Users lack sense of excitement or incentive while browsing, making the shopping experience feel static and less engaging
An interactive Vending Machine feature introduces a playful gamified moment where users can hit play to unlock discounts, increasing engagement, time on site, and motivation to complete a purchase.
WEB FLOW BLUE PRINT
Entry Point
Interactive Engagement
Home Page Visit
Menu
Lip Kit Shelf
Product Page
Checkout
Shop New
Shop by Category
Kylie Konnect
Vending Machine
ORIGINAL LOW-FIDELITY WIREFRAMES
Home-page
Mobile
Desktop
NEW VIDEO FEATURE
SOCIAL INTERACTIVE FEATURE
CLEAR STRUCTURE
Instead of a video, I decided to change ithe feature and make it interactive.
I decided to add a video to explain the social feature before users join.
Overall my intention was to make the layout structured and more organized.
Product Detail Page
Mobile
Desktop
REVIEWS
PRODUCT DISPLAY
I started off with the average product detail page then made the product the focal point.
Eventually I changed my review structure to something more modern.
HOME-PAGE DESKTOP FINAL DESIGN
Light Mode
try full screen
Dark Mode
MOBILE
LIP KIT FEATURE
The Lip Kit Shelf is an interactive shopping feature that allows users to hover over or click on individual lip kit shades to instantly view the shade name and jump directly to the product page for that specific lip kit.
This interaction removes unnecessary steps, makes shade exploration faster and more intuitive, and helps users move from discover to purchase with minimal friction.
shop now
barely legal lip kit
shop now
kiss me lip kit
shop now
exposed lip kit
shop now
another wish
shop now
cupid lip kit
shop now
berry grateful
shop now
say no more
shop now
boss lip kit
shop now
cozy k lip kit
shop now
baddie lip kit
shop now
baddie lip kit
pick a shade
try me
VENDING MACHINE FEATURE
The King Kylie Vending machine is a virtual, interactive retail experience that transforms online shopping into a playful moment of discovery. Inspired by real-world beauty vending machines, users press play to activate the machine, triggering motion and visual feedback before revealing products.
As an added incentive, users receive 15% off, along with rotating digital coupons and surprise gifts, reinforcing impulse engagement and reward-based interaction. Rather than a static product grid, the vending machine format gamifies the shopping journey while staying true to Kylie Cosmetics’ bold, pop-luxury identity, making the experience feel exclusive, entertaining, and memorable.
KYLIE KONNECT FEATURE
Kylie Konnect is a community-driven feature that allows users to interact beyond shopping through comments, shared posts, and videos. It creates a space where customers can engage with each other and with Kylie herself, transforming the site from a transactional e-commerce platform into an interactive brand community that builds trust, loyalty, and long term engagement.
