Mon Doc.

Overview

Client

Mon Doc – Private medical clinic in Quebec City, QC.

Role

UX/UI Designer & Web Developer.

Duration

3 months for initial release (Jan - March 2017).
Still working with client today and making changes upon request.

Team

Solo freelance project – working directly with client.

Objective

Design and develop a complete website from scratch. Mon Doc had just opened and needed to established itself online as a leading private medical clinic in Quebec City.

Outcome

The website was delivered on time and immediately began helping them grow their business, leading to sustained growth of their medical clinic to over 1,125 patients and over 275 active memberships

The Process.

1/6

Research.

Tool: Competitive Research

For this project, I started by researching the competition in the area:

  • What were they doing?
  • What was a typical layout for private medical clinics?
  • What information/services did they provide?​

Why?

I focused on medical clinics in the area because I wanted to know what they demographics were used to. While the goal was to modernize and improve on what's out there, I didn't want to design something that was completely foreign to what they were used to that could potentially deter users.

Result

One thing they almost all had in common: a huge cluster of information right in your face as soon as you opened up the website, with no clear visual hierarchy.

While the screenshot shown is just one example, I found that most websites had similar designs that I believed could be improved. In this example, all of the essential information is there, but there's no clear hierarchy of information. The user wouldn't know where to look first, and where to go next.

One example of competition in the area.
2/6

Ideation.

Given a tight schedule to deliver the final product, I did not have much time for ideation. However, for the landing page, I wanted something similar to the hand-drawn wireframe shown.

Why?

Following my competitive research, I had two main goals in mind:

  1. Clear hierarchy of information that leads the user through the site
  2. Reducing any and all superfluous information, keeping only what is necessary to the user when visiting the site
3/6

Start Developing.

Normally, I'd start wireframing in Sketch to come up with designs for the client and have them be approved before starting the development process. However, I was on a tight schedule to have the website published.

At the time, I knew absolutely nothing besides very basic HTML & CSS. How I would build the site would likely have an effect on my designs as well, so I needed to find the tools I'd use to know what I'd be capable of building. ​

Researching Tools

Not knowing the first thing about how to develop a website from scratch, I began researching the tools at my disposal. I did a comprehensive cost/benefit analysis of all of the major website builders at the time (early 2017): Weebly, Wix, SquareSpace and WordPress.​

After much deliberation, I decided that WordPress would give me more freedom in the long-run. And best of all, it was free! However, I still needed a builder that would allow me to develop something quick because I wasn't knowledgeable enough to code it myself.​

This is when I discovered the Divi Builder plugin for Wordpress.

Tool: Divi Builder

Why?

For the price, the Divi Builder seemed to offer almost everything I needed to build the website, and I would not be as constrained by the theme as I would've been in the other builders at the time.

4/6

Design & Build.

Information Architecture

Here, I served more of a consultation role. I proposed how the website should be divided up, and based on information that the client wanted on the website, we made adjustments.​

Once I was given the information architecture and the majority of the web content, I was ready to begin designing and building the website.

Problems & Solutions

Even after numerous tutorials about the Divi Builder and many hours searching for solutions, I hit several roadblocks where I'd have an idea of how I wanted something to look, but I didn't know how to develop it using Divi and Wordpress.​

With the deadline winding down, I needed to find a way to have something to deliver soon. I actually wrote about my dilemma on Medium: Functionality First, Aesthetics Second. ​

For me, usability almost always comes before aesthetics. While I'm very cognizant of the affects that good aesthetics have on first impressions, if a product it isn't usable or user-friendly, it will very likely end with the user being frustrated and not wanting to come back to your product or use your service.

This is not to say I wasn't focusing on good aesthetics – I just wanted to make sure the website was usable on release day, and that I didn't forget core features because I was too focused on getting the visual design perfect.

5/6

Initial Outcome (Release Date).

While the design of the website on the release date was not what I had envisioned, my two main goals were still met:

  1. There was a clear hierarchy of information that lead the user through the site
  2. I reduced all superfluous information, keeping only what was necessary to the user

Now that the site was live and functional, it gave me time to go back and flesh out the design. While I performed basic user testing during the building process, I now had time to ask more users to walk through the site as I watched and noted any pain points.

User Testing

Common feedback I'd get from the users was that the buttons were not visible enough. While the younger users had an easier time discovering the buttons, older users did not recognize them right away, or even at all. Given that the target demographic of this website were older users (generally 40+), this was something that would need to be addressed.

Design Iterations

With the growth of their business, Mon Doc acquired two new doctors and started offering many more services. With this growth came many design and function changes, which has lead to where the website is today.

Screenshot of Mon Doc on the release date.
6/6

Final Outcome (Today).

Mon Doc has grown to three doctors serving 1,125 patients, with 275 patients paying an annual membership fee for exclusive benefits.

It has been estimated that around 80% of their business has come through information found on their website.​

View Live Website

Conclusion

The client is quite happy with the website, how it's performing, and how it's helping their business. I still work with them on an ongoing basis, making any changes and adding any features as they see needed.

Some of the key features I've added since it's release have been:

  • The ability to purchase memberships through the website
  • Pop-ups for holiday hours
  • A live-chat function for visitors of the website who may have questions (that's only activated when someone from the company is online to answer questions),
Recent screenshot of Mon Doc.
View my other work