Redesigning the Digital Experience for a Modern Wellness Clinic
To create a visually appealing and user-friendly platform.
Company
Flow-Zone
Industry
Wellness
Duration
3 weeks
Role
UX/UI, AI Image Gen, Webdesign, AI-Coding
Tools
Figma, FigJam, Codex, Claude
Background
Flow-Zone is a Norwegian wellness and beauty clinic offering a broad range of services including massage, skincare, laser treatments, PMU, and relaxation experiences. The project focused on redesigning the clinic’s previous website to create a more modern, structured, and visually cohesive digital experience that better reflects the atmosphere and quality of the brand.
The redesign aimed to improve clarity, navigation, modernize the visual identity, and create a smoother browsing experience across all devices.
Outcome
The final redesign delivers a cleaner and more modern digital experience that aligns more closely with the atmosphere of the physical clinic. The new structure makes it easier for users to navigate through services while maintaining a calm and elegant visual identity throughout the website.
By combining UX-focused restructuring in Figma with responsive development in Framer, the redesign improved both the usability and visual consistency of the platform while supporting the clinic’s branding and online booking experience.
Instead of having a single "Services" tab, all services are separated into four main categories:
Wellness
Brows/Lashes/PMU
Skin & Aesthetics
Hair removal
Challenges
One of the main challenges of the redesign was restructuring a large amount of service content into a more intuitive and user-friendly experience. Because the clinic offers many different treatments and categories, the new website needed a clearer hierarchy and navigation system to help users quickly understand and explore the available services.
Another important goal was creating a calmer and more premium visual presentation while maintaining accessibility and usability across desktop and mobile devices.
01
The clinic offers many services that serve different niches. The service offers had to be separated to avoid a cluttered main navigation.
02
Combining the spa's brand colors with AI generated imagery.
03
Building custom coded TypeScript widgets, such as the Before/After slider.
04
Designing for a target audience outside of my usual domain.
Process
The redesign process started in Figma, where I reworked the information architecture, visual direction, responsive layouts, and component system before moving into development.
UX Audit
Information Architecture
Figma prototyping
GenAI Imagery
Framer development
My Role
UX/UI
GenAI Imagery
Webdesign
AI-Coding
The focus during the design phase was improving the overall structure of the website while simplifying the user journey and creating a more modern aesthetic. Particular attention was given to:
Restructuring the navigation
Improving visual hierarchy
Simplifying service discovery
Creating a more cohesive design language
Optimizing the mobile experience
Establishing consistent spacing, typography, and layouts
Use AI-Coding to build custom widgets
After the design phase, the website was fully rebuilt in Framer to create a fast, responsive, and flexible implementation with smooth interactions and scalable CMS functionality.
Key Decisions
1. Restructuring the Service Navigation
One of the most important decisions during the redesign was reorganizing the website’s navigation and service structure. Because Flow-Zone offers a large variety of treatments, the goal was to reduce complexity and help users quickly understand the different categories without feeling overwhelmed. Instead of having a single "Services" tab, I separated all services into four main categories.
2. Creating a new structure for the service pages
The content of the service pages was based on whole paragraphs that were difficult to read. For the new website, I came up with a different structure that consists of short paragraphs with clear headings to ensure readability.
3. Prioritizing a Calm and Spacious Visual Hierarchy
The redesign focused heavily on creating a calmer browsing experience through generous spacing, consistent typography, and simplified layouts. This helped reinforce the premium and wellness-oriented identity of the clinic while improving readability across the website.
4. Using AI imagery for products and services
Instead of using the previously placed stock photos, I decided to use Gemini Nano Banana for almost all of the new service pictures.
5. Switch to a different platform for bookings
The previous website used booksalon for their booking process, so we decided to switch to Fresha.com due to usability improvements. We decided not to implement a complicated booking API inside the website but to rely on the Fresha platform, that is specifically designed to cover the booking of a wide range of services.
Key takeaways
Balancing user needs with business goals
Designing for a target audience with different expectations, preferences, and browsing behaviors than the digital products I usually work on
Implementing a fully responsive website in Framer and using AI-Coding to create TypeScript widgets
Generating large amounts of images with AI and match them with the existing branding
The well designed information architecture ensures high usability and a great overall user experience
Next steps
Building an automated shopify webshop for the clinic's products
Analyse usage metrics (GA4) to understand difficulties and pain points of the new website
