Focus Health Group

Prior to Taking Over the Project

The website was in an unfinished state, lacking consistency in brand color, typography, and overall personality. At that time, the clinic did not have established guidelines for these elements. As the result, the previous iteration of the website was built with various presets combined with no coherence in between.
‍
Some particular elements that I noticed immediately:

• The entry page and the service slider add extra unnecessary clicks that lengthen the navigation process.
• Affiliations don't usually show in the bottom.
• Procedure isn't necessary because the patients are referred from family doctor.
  
• The question-mark button on the bottom right corner doesn't do anything (when a user expects it to work).​
  

Most importantly, from a patient's perspective, the website doesn't have any information that can help them with their questions.

Objective from the Owner

The owner's requests for the website:

• A source of information for patients who are looking for treatment or want to learn more about their conditions, rather than promoting or selling services.
• Because the clinic's target audience includes elderly people who may have vision problems, the text should be large but not overwhelming.
• Nothing fancy, they prefer traditional style.
• Website is the priority, mobile site comes second
  

The interesting thing about this website is that it will be connected to a physical QR code made with Lego, so the patient can scan it and access the clinic's website.  

Rather than creating wireframes, I will be doing rapid prototyping to speed up the process. Improvements will be made after completing the website.

Brand's Visual Language

The clinic lacked a designated typeface for its logo and brand. After experimenting with various typeface combinations, I opted for Avenir Light and Rubik. These two typefaces were chosen for their resonance with the clinic's identity, particularly considering the contrasting perspectives and working styles of the father and son doctor duo. Avenir Light was a type that was already available during the time when I was working on it, not sure if they purchased it.

The pastel-color scheme draws inspiration from natural elements, incorporating various shades of brown and green. This not only introduces variation but also contributes to a calming visual experience for visitors.

Designing the Website

A significant portion of the effort was dedicated to determining the information to include and the optimal way to present it. The goal was to maintain a clean and straightforward appearance while minimizing clicks.

The layout of the website was decided according to the serial position effect- the tendency to remember the first and last items.

Treatment section is the first because when a user visits our website, it is likely that he or she already know about the condition and is seeking treatment.

The middle section provides persuasive elements to establish credibility to the user. These information should be simple to scan so the users can pay attention to the more detailed sections.

Then the location section being the last to make the information more memorable.

Conditions and Treatments were interconnected by a button to encourage the users to read more without having to click to a different page.

A unique hovering effect for the desktop version of the website. The client may or may not read English, so limiting it down to two options made the selection easier and faster. The colour also highlighted the CTA better.

First version

Second version (final)

The main changes I made were in the hero section of the website. At first, there was a problem with the text, and users weren't getting much value because there wasn't a clear next step (like a button to click). People would just glance at the title and scroll past. By adding a language button, these issues were fixed. Now, users stay on the hero section longer, and it serves a more useful purpose.

I also created a Mandarin version of the website because I am fluent in the language.

First version

Second version (final)

Basic SEO such as keywords, title tags, and meta descriptions were set up to help the clinic be found on Google, along with creating a Google Business Profile.  Since the content was not written by a professional copywriter, some parts could be improved to help the website rank higher in search engines.

Result

Besides that WIX is a bad platform for responsive website, the website is finished with the necessary information, decent-sized text, and simple navigation process. The user should get to end of process in about 3-4 clicks.

What I've Learned

Initially, I had many ideas to improve the website's look and accessibility because the clinic owner didn't have a specific preference. However, when I shared my plans, she worried it might complicate things and slow down the website's completion. We worked together on the prototype, finding a balance between her vision and my design ideas. I learned to be flexible and focus on what the client wanted. In the end, I delivered what she asked for within the given time, and she was happy with the result.
‍
TL;DR: Give what the client wants, be flexible, and prioritize timely delivery to get the best outcome. Never use WIX for client work.