Freelance
Clarkson Medicine Website
Project Summary
After obtaining my Certificate of UX Design from George Brown College, I began doing freelance work. I landed this particular job from one of my instructors at GBC who owned his own design agency. The client was Clackson Medicine, a medical clinic in Oakville, Ontario that was looking to create a net-new experience for their patients.
The Ask
Clackson Medicine was looking to create a new experience for both current and future patients that would display their commitment to better health and provide ease of access to those looking for information about their services. The website needed to include:
6 Pages
-
Home
-
About
-
Services
-
FAQs
-
After Hours Clinic
-
Booking
Navigational Elements
-
Header
-
Footer
In-Page Alerts
-
Clinic Phone numbers
-
Hours of Operation
Colours and Typography
-
To match their newly designed logo
Research the Space
The first thing I do for any project like this is get an idea of what other products in that particular space are doing. In this case I took a look at what other medical centres were doing to educate their current and prospective patients about their clinic's is up to as well as make it easy for them to see which services are being provided and make bookings if necessary. Basically, everything that this client wants to accomplish through their website, how are others accomplishing the same thing in the most meaningful way?
Once I have a lot of good examples of other products doing what we want to do I start marking them up and taking notes about what would be useful to us in our endeavor. I also make notes about things I don't like and feel we can do better on. Here are some of the notes I made for this project:
Makes use of several alert banners. I’m not sold on including a button within a banner, especially one that doesn’t stand out enough due to colour choice, but I think the inline banner aside from the one that runs along the top is a nice addition.
The way this site lays out its FAQ presents a lot of information for the user to scroll through. I think for an FAQ I am going to move in the direction of collapsible sections for each FAQ to make it easier to for users to parse and find what they are looking for.
When listing the services I definitely want to avoid the information getting lost in on the page. Thankfully this website won’t be listing too many services which will allow me to design something much cleaner.
I think this site has the right idea for listing services. Short description with an icon to add visual interest.
Having a drop down menu for a service list is not the direction I want to go in. I want the services to be immediately recognizable and don’t want users to have to cross their fingers hoping what they are looking for is there. I’d rather they know at a glance.
This site also does a good job of using a Z pattern which is a design style I am quite partial to and wanted to use on this project.
When thinking about style and tone I definitely want to stay away from something overly simple like black text on a white background. The sparseness is very hospital like in presence which isn’t the warm welcoming feeling a patient would want from a medical site.
I really like the full width photo look and the colourful overlays that a lot of other sites were using.
Website Goes Live
This is always the most exciting part of my freelance work: being told that my designs are now live on the internet for all to see. This confirms that the client is happy with things and that I did a great job.
Being able to work on something from scratch, something that will be see by many people, something that is super important to the lives of other people, that is magical. I can't wait for the next project. Bring it on!
Communication Structure
This was a small operation with myself being the designer and my GBC instructor being the developer. As this wasn't the first project I've done with him, communication was very smooth and ideas and feedback were always acted upon very quickly. The way we communicated was like this:
The Design and Reiteration Process
Once I have the OK to go ahead with my vision, it is time to actually get designing. So like mentioned in my communication structure, the designing and reiteration is one combined step because this project was a living thing. Things were always able to be commented on in a timely fashion so this kept the engines running pretty constantly. Here are some initial designs followed by the final designs.
It is important to note that in the initial designs the ask still included a contact page. But that was removed half way through and a booking page (third party) would be introduced. During that time the need for an FAQ page also popped up so that is what's shown below. It really shows the power of the constant communication style of working because I was able to make these pivots right away.
