The designing and building of a custom website for award winning professional growth coach Dr. Rana Mustafa.
Team Members:
Dr. Rana Mustafa | Client;
Chris Donlevy | Designer
Product
A branded website for professional coach Dr. Rana Mustafa.
Project Duration
3 Months, November 2023-February 2024.
The Problem
Dr. Mustafa is an award winning professional coach and food scientist. She needed a website to help discoverability, legitimacy, and to refine her conversion funnel for prospective clients.
The Goal
To design and construct a website that lends Dr. Mustafa legitimacy and brand unity. As well, my goals was to create something that worked to convert clients and build a warm call leads list for Dr. Mustafa.
My Role
Project Lead (Design, No-Code development, Strategy).
Responsibilities
Consult with client on design and strategy, iterate on designs, establish brand guidelines, install website on site builder, optimize site for performance and SEO.
Preliminaries
Dr. Mustafa and I met in November to discuss the specifics of the her needs for the website. We landed on a light, one page website that acted as a redirect for her LinkTree and LinkedIn, a feature page for her various interviews and awards, and as a lead generation tool through her free offerings in exchange for contact information.
Low Fidelity
We began with some Lo-Fi digital designs. Normally I start on paper, but since the project was done entirely remote, it made more sense to share iterations through figma.
The Header section, featuring a photo that takes the whole viewport, with links to the socials and a "Book a meeting" button.
The my story section, which would feature a photo and a short "About" section.
A seleciton of links to media featuring Dr. Mustafa, as well as a quote from Rumi: "You are not a drop in the ocean, you are the ocean in a drop."
A list of services Dr. Mustafa offers is featured beside an image taking up the other 50% of the viewport.
CTA's would encourage a client to either book a discovery call with Dr. Mustafa, or register for coaching.
The Kind Words section features testimonials to Dr. Mustafa's expertise and care.
Another call to action features an input field, where users can submit their email in order to receive a free worksheet as incentive.
The footer, featuring a final CTA as well as Dr. Mustafa's Socials links.
Color and Typography
Color decisions came from Dr. Mustafa's desire to have the site reflect nature, growth, and new beginnings. We based color exploration around a summer color pallett, and after some deliberation we agreed on a darker green. For the typography, I wanted to communicate a warm class - similar to how I felt whenever I would speak with Dr. Mustafa. I chose Playfair Display for headings, and Open Sans for the body.
A visual representation of font and color styles for the website. The fonts are Playfair Display for headings with Open Sans for body text. For colors, there is a darkish green with a very pale yellow white.
High Fidelity
Once these decisions were made, I began constructing Hi-Fi looks for Dr. Mustafa.
The finished header section. We would end up moving the socials buttons to under the white box, so as not to block Dr. Mustafa's face.
The about section, with a 30/70 layout.
The media link carousel with the Rumi quote. This section would be moved to just below the header, as we decided we wanted more exposure to media articles and linking.
The list of services offered, in a 60/40 column layout.
The CTA's for Grow Strong Coaching's services. I did a little photoshop work to make the lab-coat image fit in more with the other, more corporate photography.
A carousel of certifications followed by a slider of testimonials. We later switched out the carousel for five static certification listings. As well, the testimonials now only feature three posts, with links to see recommendations on Dr. Mustafa's LinkedIn or on her Google Business page.
The CTA lead generation funnel. This would eventually turn into a link to a google form, rather than a dedicated form on the page. This was to simplify Dr. Mustafa's workflow, as well as to avoid working with Wix's temperamental form construction backend.
The footer of the site featuring Socials links and CTAs for booking a discovery call, or registering for coachings.
