A few months ago, Omar’s mother asked us to create a website for her dental practice. We said “yes”, jumped on Figma, dumped a toothbrush stock picture, wrote down a few lines for the content, and voilà, we ended up with this:
The website clearly lacked purpose, and the overall result was unsatisfactory.
After all, how can it have a purpose when we didn’t even take time to understand what we wanted it to achieve?
So, we decided to rebuild it from scratch, and instead of focusing only on making it good looking, we spent more time defining its purpose and establishing which mood to convey.
In this article, we will go over the two phases we went through to kick off the project: 1- Defining the purpose. 2- Establishing a mood.
Why are we designing this website?
The first thing we asked ourselves, regardless of how obvious it might seem, is “what value are we trying to achieve by creating this website?”. Answering this was not straightforward.
After a few discussions, we came up with the following goals:
1- Grow the customer base to eventually make more money. 2- Establish an online presence and be visible when someone searches for a dentist in Casablanca. 3- Convey a feeling of trust and expertise to potential patients who look for a dentist. 4- Create a brand that people will associate with good dental practice. 5- Collect positive reviews to eventually partner with companies (through referral agreements, employee dental benefits etc.).
Once the goals were explicitly stated, we wanted to understand who the potential patients were. We asked ourselves:
1- Is there a particular category of people (based on age, gender, location, etc.) the dentist wants to target? 2- What is the current demographic group that constitutes the clientele of the dentist? Is the dentist looking to change that clientele? 3- Is the dentist trying to capture a new type of patient (e.g. expats new to the city)? 4- Is the dentist fluent in multiple languages and able to attract patients who do not speak the local language?
Answering these questions helped us define our target users. Following that, we researched competitors asking this:
1- How is their digital presence? 2- What are their similarities? 3- What are their websites’ strengths and weaknesses? 4- Do they rank well? How are they doing SEO-wise? How’s their Google My Business? Do they have FB and Instagram pages?
We took screenshots of their websites and stacked them against each other. It was very important for us to write down the answers to all the questions above, and not just keep them in our minds.
After completing the first phase, we asked ourselves “now what?”.
Well, we found out that creating a mood board could help prevent the initial scenario (creating a tasteless website, a “mood desert”).
What’s a mood board? A mood board is basically a collection of items, ranging from text to pictures and colors, that evoke a certain style or emotion. Not only creating a mood board would help us shape the direction of the project, but it would also give us direction later on when we’d feel lost during our design process, and ensure that we keep consistency across the website.
At the same time, a mood board is way less of a hassle than designing the whole website.
Here are a few examples from Dribbble:
We didn’t limit ourselves to create one mood board. We split paths and created each a mood board to assess which mood matches best with the purpose. We saw mood boards as a laboratory where we got loose and unleashed creativity.
Here’s the only acceptable mood board we can show you:
We first started playing around with colors. Not to be random in this exercise, we read about color theory and got the basics - color wheels, model, harmony, and other key concepts. As a start, we wanted to go for a monochromatic style as it is easier to manipulate. Here’s a resource:
As we got stuck with the colors, one helpful idea was to take visual elements (e.g. a photograph) and picked the colors from there. To get inspiration, here’s a link:
Once we had a hunch about color, we experimented with typography. We kept in mind that we did not want to have too many fonts. Again, this is not a random exercise, we educated ourselves on typography and understood how typography can serve the website’s purpose.
The typography we would use for a dentist website or a rock band website would probably be different. Here is a resource to get the basics:
We ended up going for League Spartan. The font worked well for our headlines but didn’t have a regular version to use for body text.
As a start, we got to explore what’s on Google Fonts, and explored a font to pair with.
Hang on! Where did we do all of this? We created a mood board on Figma and put items there.
We stacked colors next to each other, created different sizes of the text, edited photographs to look in a certain way, and kept experimenting.