Divine Studio

A full brand development and marketing website for a new for a women's coworking and wellness studio - end to end.

Real Client

Brand Identity

UX Design

Figma

Webflow

SEO

Project at a Glance

Client

Women's wellness studio, Hoi An, Vietnam

Role

End to end, discovery through Webflow build

Timeline

Estimated 4 to 6 weeks, completed in 3 weeks

Tools

Notion, One Drive, Figma, Webflow,

Outcome

Full brand identity system and 7-page responsive prototype delivered on deadline

Problem

A women's wellness studio was opening in Hoi An with no brand identity, no website, and an opening date four weeks away. The business was not a gym, a coworking space, or a café. It was all three, and the site needed to communicate that integrated experience clearly without overwhelming visitors or diluting the core conversion goal.

The constraints were significant.

No professional photography existed. The booking system was undecided. The audience was bilingual. And the entire project, from discovery to high-fidelity prototype, needed to be completed in weeks.

Goals

  • Build a brand identity system from scratch before touching any page layouts
  • Design a 7-page site that communicates three distinct business pillars without confusion
  • Create clear conversion pathways for two distinct user groups, local women and international expats
  • Deliver a prototype ready for a Webflow build within the project timeline

Contraints

  • Build a brand identity system from scratch before touching any page layouts
  • Design a 7-page site that communicates three distinct business pillars without confusion
  • Create clear conversion pathways for two distinct user groups, local women and international expats
  • Deliver a prototype ready for a Webflow build within the project timeline

Process

5  |  Iterate

Figma project brief, complete brand identity document, and full CTA logic documented for Webflow build.

1  |  Discover

Structured client briefing covering business goals, personas, competitor landscape, brand direction, and technical requirements.

2  |  Define

Brand identity system covering typography, color, logo, tone of voice, and WCAG 2.1 compliance mapping. Site architecture established across 7 pages.

1  |  Research

Structured client briefing covering business goals, personas, competitor landscape, brand direction, and technical requirements.

2  |  Define

Brand identity system covering typography, color, logo, tone of voice, and WCAG 2.1 compliance mapping. Site architecture established across 7 pages.

3  |  Ideate

Section-by-section layout direction for all 7 pages. Full primary user flow mapped from discovery through to booking confirmation.

2  |  Define

Brand identity system covering typography, color, logo, tone of voice, and WCAG 2.1 compliance mapping. Site architecture established across 7 pages.

3  |  Ideate

Section-by-section layout direction for all 7 pages. Full primary user flow mapped from discovery through to booking confirmation.

4  |  Prototype

Lo-fidelity wireframes in Figma for all 7 pages at desktop and mobile breakpoints. High-fidelity prototype applying the full brand system.

3  |  Ideate

Section-by-section layout direction for all 7 pages. Full primary user flow mapped from discovery through to booking confirmation.

4  |  Prototype

Lo-fidelity wireframes in Figma for all 7 pages at desktop and mobile breakpoints. High-fidelity prototype applying the full brand system.

5  |  Iteration

Figma project brief, complete brand identity document, and full CTA logic documented for Webflow build.

4  |  Prototype

Lo-fidelity wireframes in Figma for all 7 pages at desktop and mobile breakpoints. High-fidelity prototype applying the full brand system.

5  |  Iteration

Figma project brief, complete brand identity document, and full CTA logic documented for Webflow build.

1  |  Research

Structured client briefing covering business goals, personas, competitor landscape, brand direction, and technical requirements.

Key Decisions

Build the Brand Before Wireframing

The client had directional brand ideas but no formal system. Without locking the brand first, every design decision would have been provisional and required rework at the prototype stage.

Added significant time to the front of the project, which felt risky given the tight timeline. In practice, having the system defined made every subsequent decision faster and more confident.

Handle Missing Booking System With Modal

Linking 15 or more CTAs across 7 pages to a separate holding page would have felt disjointed and communicated incompleteness. A modal keeps users in the experience, feels intentional rather than broken, and can be replaced with a real booking flow the moment an integration is confirmed, with no structural changes to any page.

A modal requires JavaScript and adds a component to build and maintain. A holding page would have been simpler. The UX gain justified the complexity.

Build Bilingual Toggle Infrastructure

A full bilingual build was beyond the scope and timeline. Omitting the toggle entirely would have required a navigation redesign later. Building the placeholder now means the toggle can be activated and linked to a translated duplicate of the site at any point, without touching the navigation design.

The toggle exists in the design but does nothing at launch. A Loom walkthrough was prepared for the client explaining how to activate it in Webflow when ready.

Design Solutions

Full Marketing Funnel in a Single Scroll

The homepage moves visitors from brand introduction through to conversion without a dead end. Hero, three business pillars, class previews, social proof, membership teaser, and a final CTA, each section earns its place in the sequence.

The Divine Studio website home page originally designed by Amanda Gustin

Class Variety and Life-Stage Inclusivity Made Scannable

Eight class cards with category tags and a dedicated Life Stages section for high energy, rest and restore, and graceful years. The structure communicates that the studio is genuinely for all women, not just a single demographic.

The Divine Studio website wellness classes page originally designed by Amanda Gustin

Conversion Architecture With No Unanswered Questions

Six pricing options, an inclusions checklist, testimonials, and an FAQ accordion in sequence. Every objection is handled before the visitor reaches the final CTA.

The Divine Studio website memberships page originally designed by Amanda Gustin

An Interim Solution That Feels Intentional, Not Incomplete

All booking CTAs across all 7 pages trigger a single branded modal with a WhatsApp CTA and email fallback. Users stay in the experience. The modal can be replaced with a live booking integration without touching any page structure.

The Divine Studio website booking modal

Outcomes

Delivered in 3 Weeks

Brand identity, 7-page high-fidelity prototype, site architecture, CTA map, user flow diagram, and Figma handoff brief.

WCAG 2.1 AA compliant

All color combinations documented against accessibility standards. Typography system established across 7 levels with consistent REM values.

Zero Dead-Ends

Site architecture serves three distinct personas across 7 pages with clear conversion pathways from Instagram discovery to WhatsApp booking inquiry.

What This Project Confirmed

Building the brand identity before touching any page layouts was the single best decision of the project. Every design choice after that point had a system to reference, which made the prototype stage significantly faster and more confident.

Scope expanded organically through discovery. Managing that expansion while protecting the timeline required explicit scope conversations and a formal project agreement, something I would establish earlier on future engagements.

Copy decisions shaped the design more than expected. Choosing the right headline for a section changed how the entire layout felt and what visual hierarchy made sense beneath it. For a brand this values-driven, language and design are inseparable. On future projects of this kind, I would approach both simultaneously from the start.

This is a real client project. The client withdrew before launch. The full process was carried through to demonstrate end-to-end capability without external validation.

Client Feedback

5 Stars

"Everything honestly looks really so good. I love how you structured it. I really appreciate the time and thought you’ve put into this. I think you work very professionally.

Honestly, I have never had this before, where someone is so structured and professional."

- Owner & Founder of the Women's Coworking & Wellness Studio