Client overview
Founded by Nicole and Queenie, Sage Wellness by Beauteous is a pioneering start-up located in the Greater Vancouver area, offering a range of specialized postpartum recovery treatments for new mothers. Their mission is to support and expedite the recovery process, providing each mother with personalized, compassionate care as she embarks on this transformative journey. With a deep commitment to holistic healing, Sage Wellness believes in the strength of community and the empowering essence of motherhood.
My role
1. Designed a multi-page interactive website that will elevate their digital presence.
2. Designed a promotional brochure that will be distributed at trade fairs to further promote their services and connect with potential clients.
Tools used
Figma, FigJam, InDesign, Photoshop
Business Opportunity
As a business operating within the niche market of postpartum recovery, Sage Wellness has the opportunity to establish an online presence that serves not only as a trusted resource for new mothers seeking recovery information but also as a seamless platform for booking treatments and purchasing healing products. The website can be designed with a premium, therapeutic aesthetic that enhances user experience, fostering greater engagement while offering a convenient, intuitive interface for appointment scheduling and product purchases.
Design Initial Process
User Research
Target audience/End-user of our website: Women who are expecting childbirth, especially new mothers.
Stakeholder interview: Originally, I had planned to conduct interviews and surveys with their end users. However, due to the limited budget and resources for this project, I was unable to pursue this approach. Instead, I interviewed the key stakeholders – founders Nicole and Queenie – to gain valuable insights into the needs and experiences of their end users.
Key Findings
• Are primarily well-educated millennials who have an above-average income
• Are often unaware of postpartum recovery methods
• Likes to be well-informed before decision making
• Are stressed due to pregnancy and have a lack of time
• Appreciates making purchases and bookings online due to convenience and a lack of free-time
• Tech-savvy
User Flow
A user’s journey on our website was mapped out – from the moment they arrive on our website to booking a treatment appointment and receiving a booking confirmation.
Sitemap
I created a sitemap to better understand and identify what pages should exist on the website and the contents of each page.
Wireframing
Click on images below to see the detail of each wireframe.
Upon completion of the sitemap, I created wireframing for all of the main pages.
Design Elements
Colors
Given the business name and the intention to create a calming, therapeutic atmosphere, I opted for a soft, muted color palette that consisted primarily of sage green.
Typography
For headings (H1-H4), I chose the Butler font, a serif typeface with high-contrast and elegant strokes, which conveys a sense of calm/therapeutic and premium quality. Paired with it is Jost, a clean geometric sans-serif font for body text, chosen for its readability and legibility.
Imagery
During the website design process, my client was still in the process of gathering photos and other media assets. To maintain progress, I temporarily utilized carefully selected stock images. Since the goal was to create a calm, premium, and therapeutic aesthetic, I chose visuals that evoked this atmosphere, focusing on spa and wellness-related imagery. In addition, I used warm-toned photos of mothers and their children smiling to build a caring and nurturing atmosphere.
Design System
Final Design Mock-Up
Key Design Highlights
Prominent "Treatment" section in the homepage
Treatments are immediately advertised at the top of the homepage for users to instantly see the main focus of the website when they arrive at the homepage, which is also the primary focus of our end users - to seek postpartum recovery treatments.
LEARN MORE buttons
Placed beneath each treatment, these buttons provide easy access to detailed information, as stakeholders noted that many mothers are unfamiliar with postpartum treatments.
BOOK NOW buttons
“Book Now” buttons: Located near each treatment option, these buttons simply enable users to go directly to the booking page, without going through the treatment description page.
“Discover other treatments” & “You may also like” sections
These sections serve multiple purposes:
1. Enhance user engagement
2. Offer additional treatment suggestions to the end users
3. Subtle upselling opportunities for the business
Streamlined checkout
Apple Pay and Google Pay have been integrated for a smoother, faster checkout experience.
The checkbox of “Use shipping address as billing address” was created for users who have the same address for both shipping and billing to bypass filling out the billing section. Should the two be different, checkbox could be deselected and the billing section appears subsequently for users to fill out.
Purchase quantity modification in checkout
Users can adjust the quantity of the items they are purchasing directly on the checkout page's Order Summary, ensuring flexibility in their purchases.
Sage Wellness’s Instagram integration
As our user research identified that our our end users are tech-savvy and active on social media, I created a section in the pages that feature the latest Instagram posts by Sage Wellness. This section would bring freshness on a regular basis to the website as well whenever new Instagram posts are posted.
Promotional Brochure
Objective
I created a promotional brochure for the Sage Wellness By Beauteous for their use during trade fairs and promotional events. The goal was to design a brochure that was not only informative, but also has a warm, inviting and therapeutic visual language just like the website.
Design rationale
To ensure a consistent and cohesive visual language and aesthetic across the website and brochure, I employed the same graphic elements across them:
• Used the same typefaces (Butler for heading and Jost for body text)
• Used similar stock images as on the website. I adjusted the photos on Photoshop to have the warm and therapeutic tone and applied Lens Flare effect to some of them
• Used the same color palette as the website’s, with sage green as the primary color