Bare Bloom — Landing Page Prototype (Figma → Framer)
Role: Lead Designer (solo project)
Tools: Figma, Framer (in progress), Adobe Creative Suite, ChatGPT
Bare Bloom translates clean, ingredient-led formulations into a premium digital experience designed to guide, reassure, and support confident skincare decisions.
This project extends the brand’s visual identity into a structured digital environment, helping users discover products, understand routines, and make confident skincare decisions with minimal cognitive load and a clear visual hierarchy.
The Design Challenge
The challenge was to transform Bare Bloom’s minimal, ingredient-focused identity into a digital experience that communicates trust, clarity, and structure while supporting intuitive product discovery.
Key Objectives
• Clear hierarchy: support users moving from brand understanding to product exploration
• Routine-first navigation: help users discover products through skin concerns and routines
• Brand consistency: translate Bare Bloom’s premium, minimal visual system into digital
• AI-assisted interactivity: explore motion and dynamic content to guide attention
• User confidence: reduce cognitive load for both new and returning users
Prototype Strategy
1. User & Content Insights
Analyzed skincare browsing behaviours and routine-based product discovery to define navigation and content hierarchy.
Focused on clarity, readability, and progressive disclosure to support confident decision-making.
2. Layout Exploration & Wireframing
Developed low-fidelity wireframes to explore structure, content prioritisation, and navigation.
Tested multiple layout directions across key pages including landing, product overview, routines, and brand storytelling.
This phase focused on usability, scalability, and responsive thinking before visual refinement.
3. Visual & Interaction Design
Translated Bare Bloom’s visual system into a cohesive digital experience.
Applied typography, spacing, and colour consistently to reinforce clarity, hierarchy, and trust.
Structured content to highlight ingredient transparency, routines, and product differentiation.
4. Interaction & Motion Exploration
Planned motion, transitions, and hover interactions to guide user attention and reinforce hierarchy.
Leveraged AI-assisted workflows to rapidly generate layout directions, motion concepts, and interaction patterns, significantly accelerating early-stage exploration and enabling faster design validation.
Multi-Touchpoint Prototype Implementation
-
Digital Structure
Clear progression: Brand → Routines → Products → Decision.
Designed to support confidence and routine-based discovery.
-
Visual Clarity
Minimal layouts, strong typographic hierarchy, restrained palette aligned with Bare Bloom’s identity.
-
Interaction Planning
Motion and hover states designed to guide attention and reinforce hierarchy — never distract.
-
Scalability
Framework structured to support new products, campaigns, and content expansion without redesigning the system.
Impact & Insights
• Translates Bare Bloom’s ingredient-led positioning into a cohesive digital experience
• Improves clarity and routine-based product discovery
• Strengthens brand trust through structured content and transparency
• Demonstrates integration of branding, UX thinking, and AI-assisted workflows
Strategic Takeaway
An ingredient-led digital experience built for clarity, trust, and scalable growth.