Jessica asked me to build her a custom website for her new private practice, working as a Registered Counselling Therapist. She also needed a logo and some branding, so I made a roadmap for the project:
For this, I conducted a User Survey of twenty-one people. Here is the report, and below are the results that guided the design the most. (Note: the participants often gave multiple answers to each question, so the results often don't add up to 21)
From the User Research, I made an Affinity Map of the data points I gathered (74 in total, after removing overlaps), and below are the results.
Then I made a User Journey Map, which helped Jessica and I to establish the Minimum Viable Product — what her site needed to have on day one. For example, some of the users I tested (and Jessica included) wanted to have a blog-style database of mental health resources, but it wasn’t an immediate priority, because it wasn’t critical to whether or not the user booked an appointment, so it could come in Phase 2 of the design.
Next, I extracted the most-important User Epics, which then became User Stories and Feature Requirements. For the Information Hierarchy, I used the answers from the User Research to prioritize the features, and then I used them to create the first iteration of Low-Fidelity Wireframes.
Now that I had a low-fidelity skeleton, I moved into mid-fidelity by using what I’d learned from my Competitive Analysis — and by playing around with different layouts and components. Below is what the Home Page looked like as I began to work on the Visual Design and her Brand Identity.
Jessica asked me to use her favorite colors — fuchsia and teal — which I liked, because they went nicely with the insights that I'd gathered from the User Research: that the users wanted their Therapist to be kind and friendly — someone who instills hope. Next, I searched for images of roses and found the perfect match: the Rainbow Rose.
My first instinct was to make her logo a rose as well, but Jessica had a better idea: a lotus, which represents regeneration and rebirth; out of even the dirtiest of waters, a beautiful flower may grow. She also had started her career in Vietnam, where the lotus is prominent — along with the Mandala. (After a few iterations, I was still able to sneak a rose into the design ... with client approval, of course.)
For the typography, I’d been using my own (Nunito Sans) as a placeholder, but Jessica liked it and wanted me to keep it because she thought it looked friendly — exactly what we were going for. However, I still thought we could do better with the headings, so I spent some time trying different combinations, until I decided on Cuprum, because I thought the curves looked friendly, inviting, and modern — and Jessica agreed, so we had a winner.
Next, I worked on the stylistic elements of the website — things like corner radii, background gradients, etc. — and the first iteration wasn't great, but since I'm both the designer and developer, I get to cheat and include more iterations as I'm building the website. Here are the mobile wireframes as I switched from Figma to Webflow.
Below is a before-and-after of the Services Page, along with some annotations to highlight my thinking as I looked for improvements during this build iteration.
We were nearing the end now, but we still had to wait for Jessica’s professional photograph before I could finish the home page, so I took the time to work with her on the copy for the site and her SEO strategy — the site metadata, image descriptions, etc. Once we had her photograph, though, it was pretty obvious that it just didn’t work.
Aside from the obvious clash of teals and blues, the visual hierarchy needed a better sense of directionality. Here's the finished home page.
Rather than showing you even more static wireframes, check out the website for yourself at JessicaRoseTherapy.ca.
With the site now live, and Jessica booking appointments even better than she had hoped, I still wasn’t finished yet; I had to make this dang Case Study — and that meant I had to repay my design debt and update the Figma file, because it no longer matched what I’d built in Webflow — which leads nicely to the ...
Because I hadn’t built an Atomic Design System before — not from scratch, at least — I missed some crucial steps and failed to scale my components properly, which meant that I had to reverse-engineer my template-scale components late in the design process in order to build an after-the-fact Design System. It was a lot of work, but I did find numerous improvements in my workflow, and it has improved my design process — as has the next item:
In the time since I finished this project, I've learned of the wondrous ways of the Client-First Design System. Long gone are the days of thinking, "What the hell do I name this?" I have seen the light, and it is glorious! Except, I hadn't yet when I built this site, so the class names are a bit of a disaster. They work, but I've learned my lesson.