Projects

Straightset Orthodontics

Duration: 4 Weeks

Role: Web Designer, Graphic Designer, Copywriter, Editor, Client Management, QA

Team: Solo Design

Platform: Web only (website)

Overview

Straightset Orthodontics is a brand new website for an equally brand new office with modern tech and new client acquisition focused design.

I was assigned to this client to solve for a website design that really highlights their brand new office while making it easier for new patients to contact the office. I designed the website with a focus on synergising both the new offices physical design and the provided color assets.

The start of this story begins with being able to read the map that was left behind

A little boy reading a map

I designed the full website for a brand new office that new patients who are looking for a local orthodontist. This was done while reading the old notes the previous designer on the project had left and interacting directly with the client again and their new marketing ting department. The design solution reached was to take elements from the assets provided and apply it as visual eye catching accents. Further, the information hierarchy of the website was laid out in a way to create the most minimal amount of action for a user to reach their destination.


The notes and maps left behind were organised and sorted in a way that I was able to finally take action

Research

  • Looking at prior designs the company has done I took some inspiration from older designs as the client had indicated they liked some of the magazine and high visual designs

  • Researched other orthodontics businesses and saw what the main focus of their services were

  • Looking at other service focused websites to compare what kind of CTA's were the main focus as well as how they structured websites

  • Since this was a brand new website I had a little more liberty in picking inspiration and looked at in general websites that were outside of the industry as well


In summary of the research was focus on keeping office and website design similar or matched so the visitor of the website is not suddenly surprised in a poor way that the website and their office are not giving the similar emotional feeling. All of this was kept in mind while making the website easier to digest information wise for new patients while having the ability to reach out to the office as soon as possible at any juncture.

Iteration & Design

There was only a few iterations to this project mostly due to to the timing and the client liking the initial proposal I had submitted. The biggest part of the iteration step in this project was most likely to the top nav bar section. I had provided the client with 3 initial menu layouts for the navigation bar. In the end due to the information hierarchy I had created for their website they went with my initial suggested layout which was a full nav bar due to the minimal amount of categories that didn't need to hide behind another tier of information. Further from there it was iterated to see if the menu bar would be transparent or solid background colour. In the end due to readability and the face colour and images can change I decided and convinced the client to go for a solid colour behind the nav menu up top.

One where the header had a solid BG all the time & hamburger menu, condensed but hard to tell there are other options

One where the Header had no BG and full nav displayed, much harder to see depending on BG

Due to the speed at which the website needed to be deployed there was a lack of testing that could be done. Instead I was given almost full autonomy in regards to the designs and concepts of the website besides some constraints such as the colours from their marketing team. This worked in my favour as I used some of the textures seen in the office as well as a text similar to their logo they had designed throughout the website. This was done because meshing a website of a real business and having either be drastically different may bring the wrong impression to the visitors of both website and real life location. One of the design elements used was the hexes on the wall that they had for their office. I used that as a jumping point to give their website a unique flare (understanding that there is some difficulty for the developers) incorporating it. This gave the impression that the website and the office were very closely related both in looks of modern and clean lines design with a unique element that only exists for this office.

Further giving more depth to the website by layering the colours or alternating the colours allowed for the design to have that further depth. This was important so the website did not look too flat and allowed for better differences between image, text, and page segments. Giving it a split view in the depth department allowed for 1 page to hold multiple "containers" of information that otherwise may start to blend to the user viewing it.

Different solid BG for each segment on one pages so it's easier to tell and read as well as using contrasting colour of the client's colour pallet

Adding coloured squares behind the images to both create a layered effect and shadowed effect on the image so it "lifts" up from the BG creating distinction

Conclusion

We did it! We reached our goal and the end of our trip with a satisfied client!

The biggest takeaway of this project besides the satisfaction of both the client and their marketing team was that bringing together elements of the physical aspect of the office with the elements of the website is sometimes very difficult. But that once inspiration strikes and you are able to blend in both those elements into the website it creates a wholly unique website for people to visit. If this was designed otherwise it would have been just as cookie cutter as any other website with just some text and images and no layers. Instead I was able to learn that creating layers and unique elements can transform a regular brief such as this project into something truly one of a kind while maintaining clarity of information and delivery of the client needs.