Leona Natural Cosmetics
Leona, a budding natural cosmetics brand, wanted to launch its first e-commerce platform. The website needed to reflect the brand’s commitment to sustainability and natural beauty, while providing a seamless and immersive shopping experience.
They wanted a visually stunning and user-friendly website that boosts brand awareness, builds trust, and converts visitors into loyal customers.
KEY RESULTS
- Delivered a cohesive brand concept and style guide with earthy tones and clean typography that resonated with eco-conscious users.
- Successfully improved user engagement with a 35% increase in session duration and a 20% drop in bounce rate during testing.
- Created a high-fidelity Figma prototype featuring a seamless checkout process, leading to a 90% task success rate in usability tests.
- Integrated an interactive ingredient glossary that increased click-through rates on product pages by 48%.
- Designed mobile-optimized layouts achieving a 93% task success rate, ensuring consistent performance across devices.
- Established trust through sustainability-focused storytelling, with 82% of test participants viewing Leona as a credible and premium brand.
- Enhanced the visual hierarchy with a modern design, incorporating muted gold accents and high-quality imagery for a fresh yet approachable look.
- Differentiated Leona from competitors by focusing on transparency and eco-storytelling, which 72% of participants cited as a key purchase factor.
- Streamlined the user journey, making it intuitive and frictionless, resulting in positive feedback from both first-time and returning users.
- Collaborated iteratively with stakeholders to align design elements with business goals, ensuring a seamless blend of aesthetics and functionality.
Our biggest challenge as a team was ensuring all stakeholders were aligned on objectives and timelines, and making realistic compromises knowing this would be our first approach to this tool and there would be future iterations.
CHALLENGE
CONTEXT
Leona’s audience comprises eco-conscious individuals who value transparency, high-quality natural ingredients, and sustainable practices. They seek brands that align with their lifestyle and values.
PROBLEM
Existing competitors dominate the natural cosmetics space, leaving little room for new players. Leona needed a digital presence that differentiated itself while building trust and conveying authenticity.
GOAL
- Establish Leona’s brand identity as eco-luxury and approachable.
- Ensure the website is easy to navigate and provides detailed information about products and practices.
SOLUTION
A website centered on:
- Engaging visuals that highlight natural beauty.
- Transparency about ingredients and ethical practices.
- Seamless navigation for discovery and shopping.
We clarified the platform’s core purpose, target audience, and key goals to ensure a user-centered design strategy.
KEY INSIGHTS:
- Users prioritize transparency and product efficacy over price.
- Many customers struggle to trust new brands due to "greenwashing" (false eco-claims).
Defined Problem Statement:
“How might we design a digital experience that establishes Leona as a trustworthy, eco-conscious cosmetics brand while delivering an intuitive shopping experience?”.
During this process we analyzed competitors, focusing on their strengths and weaknesses, and concluded on a design direction focusing on vibrant banners with line drawings and animal-focused imagery, and a balanced mix of bold and pastel colors to maintain a friendly aesthetic.
Solutions Explored:
- Ingredient Transparency: An interactive glossary explaining benefits of natural ingredients.
- User Journey Maps: Mapping user flows to reduce friction, from discovery to purchase.
- Eco-Storytelling: Story-driven visuals and content that emphasize sustainability.
SIMILAR PLATFORMS
The Detox Market
A clean beauty retailer with a focus on organic and eco-friendly cosmetics.
Key Features:
- Minimalistic, organic-inspired design.
- Advanced ingredient and certification filtering.
- Loyalty rewards program integrated for retention.
- Rich blog and educational content.
Visuals & UX:
- Modern, clean, and soothing interface evoking natural aesthetics.
- Consistent use of soft, pastel color palettes and white space.
Credo Beauty
A leader in clean beauty, emphasizing transparency and sustainability.
Key Features:
- Ingredient breakdowns for transparency.
- Interactive quizzes for personalized recommendations.
- Educational content and clean beauty guidelines.
- "Clean Beauty Swaps" feature for eco-conscious customers.
Visuals & UX:
- Highly visual product pages with a focus on clean and modern design.
- Prominent use of earthy tones and natural photography.
Nourished Life
An Australian clean beauty and wellness platform promoting eco-conscious living.
Key Features:
- Extensive product reviews for community engagement.
- Eco-conscious product bundles.
- Mobile app integration for seamless shopping.
- Highlighting sustainability initiatives across the site.
Visuals & UX:
- Playful yet professional interface with pastel color schemes.
- Strong focus on customer testimonials and eco-branding.
KEY FEATURES:
Ingredient Transparency:
- Filter by ingredient or certification (organic, vegan, cruelty-free).
- Ingredient lists with detailed descriptions and benefits.
Eco-Friendly Aesthetics:
- Use of pastel tones, greens, and browns to evoke a natural feel.
- Visual emphasis on recycled packaging and zero-waste efforts.
Community Building:
- Integration of user-generated content such as reviews and testimonials.
- Blogs and guides focusing on sustainability and skincare routines.
Personalization:
- Quizzes for product recommendations based on skin type or preferences.
- Subscription models for repeat customers with incentives.
Social Impact Highlighting:
- Partnerships with environmental organizations.
- Display of carbon-neutral shipping or donation programs.
We created high-fidelity prototypes in Figma.
Highlights:
- Homepage Hero Section: Full-width banner showcasing the hero product with a CTA.
- Product Page: Detailed product descriptions, benefits, ingredient highlights, and reviews.
- Sustainability Page: Interactive visuals breaking down packaging materials and eco-friendly practices.
- Checkout Process: Minimal steps, with trust markers for security and eco-friendly packaging notes.
WIREFRAMES
HOMEPAGE
PRODUCTS PAGE - PRODUCT PAGE - CART PAGE
CHALLENGES
Responsive Design:
The website required a seamless experience on mobile, tablet, and desktop. Ensuring responsive layouts, especially for product pages and checkouts, was complex due to high-quality product images and interactive elements like zoom-in views and filters.
Solution: Implemented Bootstrap 5 grid system and media queries for additional customizations to handle edge cases like ultra-wide monitors and older mobile devices.
Brand Identity:
LEONA’s brand identity as a mindful, holistic cosmetic brand demanded a design that felt organic yet modern. Custom typography, natural gradients, and smooth animations needed to align with the brand's ethos.
Solution: Leveraged custom CSS for animations and gradients (e.g., transitioning gradient backgrounds from #2C284A to #9382A2) and Google Fonts (Montserrat) for a clean, modern aesthetic. Ensured the navbar included intuitive links for categories and easy access to the cart.
Content Management:
The founders wanted control over product descriptions, blog updates (focused on mindfulness and yoga), and event promotions without developer intervention.
Solution: Integrated a headless CMS for dynamic content management, enabling real-time updates and API-driven integration with the front end.
Image Loading:
High-resolution product images for an aesthetic appeal risked slowing the site's performance, especially on slower connections.
Solution: Implemented lazy loading for images and served images in modern formats like WebP using a CDN (e.g., Cloudflare) for optimal performance.
E-Commerce Integration:
Managing transactions securely while aligning with GDPR compliance (as the brand operates in the UK) was paramount.
Solution: Integrated Stripe for secure payment processing and set up proper cookie consent for tracking, ensuring compliance with data privacy regulations.
Search and Filter Features:
The product catalog needed advanced filtering by ingredients, skin types, and ethical certifications, along with a robust search function.
Solution: Built custom JavaScript filtering logic combined with server-side processing for large catalogs, optimizing speed and scalability.
Image Loading:
High-resolution product images for an aesthetic appeal risked slowing the site's performance, especially on slower connections.
Solution: Implemented lazy loading for images and served images in modern formats like WebP using a CDN (e.g., Cloudflare) for optimal performance.