Willow & Fern Spa
Willow & Fern Spa
Willow & Fern Spa
Relax. Rejuvenate. Radiate.
Relax. Rejuvenate. Radiate.
Relax. Rejuvenate. Radiate.
UX/UI Design Case Study
UX/UI Design Case Study
Willow & Fern Spa
Responsive Website
Willow & Fern Spa
Responsive Website
Relax, rejuvenate, and book with ease through the Willow & Fern Spa site—your digital escape for treatments, wellness info, and serene design across all devices.
Tools
Figma
Adobe Express
Role
UX/UI Designer
UX/UI
Designer
Duration
March - April 2025
January -
February
2025
I designed a modern, responsive website for a fictional spa brand, Willow & Fern, focused on creating a calming user experience across desktop and mobile. The site features a clean layout, natural color palette, and intuitive navigation to reflect the brand’s relaxing, nature-inspired identity.
I designed a modern, responsive website for a fictional spa brand, Willow & Fern, focused on creating a calming user experience across desktop and mobile. The site features a clean layout, natural color palette, and intuitive navigation to reflect the brand’s relaxing, nature-inspired identity.
I designed a modern, responsive website for a fictional spa brand, Willow & Fern, focused on creating a calming user experience across desktop and mobile. The site features a clean layout, natural color palette, and intuitive navigation to reflect the brand’s relaxing, nature-inspired identity.
Insights & Opportunities
Insights & Opportunities
Insights & Opportunities
Research Synthesis & Competitive Analysis
Research Synthesis & Competitive Analysis
Research Synthesis & Competitive Analysis
User interviews, surveys, and a competitive audit uncovered key pain points and unmet needs within the spa service booking experience. Insights were synthesized into actionable themes that informed the design direction. This research highlighted opportunities to simplify scheduling, improve mobile usability, and create a more emotionally resonant brand presence.
User interviews, surveys, and a competitive audit uncovered key pain points and unmet needs within the spa service booking experience. Insights were synthesized into actionable themes that informed the design direction. This research highlighted opportunities to simplify scheduling, improve mobile usability, and create a more emotionally resonant brand presence.
The Users
The Users
The Users
Personas
Personas
Empathy Map
Empathy Map
Persona: Cheeré
Persona: Cheeré
Persona: Cheeré
Goal:
As a busy professional, I want to easily find and book the right spa treatment online so that I can prioritize my self-care without adding more stress to my day.
Goal:
As a busy professional, I want to easily find and book the right spa treatment online so that I can prioritize my self-care without adding more stress to my day.
Bringing it to Life
Bringing it to Life
Bringing it to Life
Problem
Problem
Problem
Our clients are busy individuals who need a seamless and stress-free online booking experience because it allows them to prioritize self-care without disrupting their demanding schedules.
Our clients are busy individuals who need a seamless and stress-free online booking experience because it allows them to prioritize self-care without disrupting their demanding schedules.
Goal
Goal
Goal
Willow & Fern Spa’s website will let clients easily discover and book personalized treatments, which will affect busy or first-time spa-goers by reducing the friction and uncertainty around self-care planning. We will measure effectiveness by tracking completed bookings, rescheduling rates, and user satisfaction through post-visit surveys.
Willow & Fern Spa’s website will let clients easily discover and book personalized treatments, which will affect busy or first-time spa-goers by reducing the friction and uncertainty around self-care planning. We will measure effectiveness by tracking completed bookings, rescheduling rates, and user satisfaction through post-visit surveys.
User Flow
User Flow
Paper Wireframes
Paper Wireframes
Bringing ideas to life—early sketches for a smoother museum journey.
Bringing ideas to life—early sketches for a smoother museum journey.
Bringing ideas to life—early sketches for a smoother museum journey.
iPad for a more legible, geometric draft
iPad for a more legible, geometric draft
iPad for a more legible, geometric draft
Digital Wireframes
Digital Wireframes
I designed wireframes for three different screen sizes—mobile, tablet, and desktop—to ensure a consistent and responsive user experience across devices. Each layout was adjusted to maintain visual hierarchy and usability while preserving the spa’s calming aesthetic.
I designed wireframes for three different screen sizes—mobile, tablet, and desktop—to ensure a consistent and responsive user experience across devices. Each layout was adjusted to maintain visual hierarchy and usability while preserving the spa’s calming aesthetic.
These screenshots show the full layout of my digital wireframes, both with and without prototype connections. The connected view highlights how each screen flows and interacts within the user journey, while the clean view focuses on structure and layout design.
These screenshots show the full layout of my digital wireframes, both with and without prototype connections. The connected view highlights how each screen flows and interacts within the user journey, while the clean view focuses on structure and layout design.
Mockups
Mockups
Final Draft
Final Draft
Final Draft
Hi-Fi Prototype
Hi-Fi Prototype
Wrap Up
Wrap Up
Wrap Up
What I learned
What I learned
Designing from a mobile-first perspective helped me focus on essential content and interactions, ensuring a smooth and user-friendly experience across all screen sizes. It also made scaling up to desktop layouts much more intentional.
Designing from a mobile-first perspective helped me focus on essential content and interactions, ensuring a smooth and user-friendly experience across all screen sizes. It also made scaling up to desktop layouts much more intentional.
Designing from a mobile-first perspective helped me focus on essential content and interactions, ensuring a smooth and user-friendly experience across all screen sizes. It also made scaling up to desktop layouts much more intentional.
I learned how crucial it is to maintain consistent spacing, typography, and color usage to create a calming, spa-like aesthetic while still guiding users through the site effectively. Subtle design choices make a big impact.
I learned how crucial it is to maintain consistent spacing, typography, and color usage to create a calming, spa-like aesthetic while still guiding users through the site effectively. Subtle design choices make a big impact.
I learned how crucial it is to maintain consistent spacing, typography, and color usage to create a calming, spa-like aesthetic while still guiding users through the site effectively. Subtle design choices make a big impact.
Using Figma’s auto layout and constraints allowed me to create components that adapt easily across breakpoints, saving time and maintaining alignment in both mobile and desktop views.
Using Figma’s auto layout and constraints allowed me to create components that adapt easily across breakpoints, saving time and maintaining alignment in both mobile and desktop views.
Using Figma’s auto layout and constraints allowed me to create components that adapt easily across breakpoints, saving time and maintaining alignment in both mobile and desktop views.
Creating a spa website reminded me that simplicity is key. Clean layouts, whitespace, and gentle colors not only look good—they make users feel relaxed and in control, which is essential for wellness-focused brands.
Creating a spa website reminded me that simplicity is key. Clean layouts, whitespace, and gentle colors not only look good—they make users feel relaxed and in control, which is essential for wellness-focused brands.
Creating a spa website reminded me that simplicity is key. Clean layouts, whitespace, and gentle colors not only look good—they make users feel relaxed and in control, which is essential for wellness-focused brands.