Client: Dr. Hobar, Plastic Surgeon
Launch date: February 2016 (note – changes have been made since launch)
Dr. Hobar came to Standard Beagle as a current client, as the company had done another website for him previously. Dr. Hobar is a plastic surgeon, but also specializes in Craniofacial surgeries in pediatrics. His main site for Plastic Surgery was still on asp.net and was not mobile friendly, which as most know is a must now with the growing percentage of users using mostly their mobile devices to surf the web on a regular basis. I was the UX Designer for the new site and had to focus my efforts on mobile UX heavily since that was the client’s main concern.
We began by doing a content inventory of the current site. This enabled us to see a better snapshot of what we were working with and figure out how we wanted to organize the information we had. This is very crucial to the design of a website. You must know how you want the content organized before you can truly decide how you want to design it.
Design Part 1 – Style Tile
The client wanted a website that portrayed a vibrant and youthful feel, as that is how one would like to feel after plastic surgery most often times. To make it feel vibrant, I incorporated shades of blue, green, and yellow into the style guide. Color has a predictable and quantifiable physiological effect that can influence perception and can influence behaviors. This is why color is so important in my designs. The cool blue tones were used to give a sense of tranquility, trust, and confidence. The yellow was to give a certain energy of happiness and grab attention. The green was used to evoke an impression of health and vibrancy.
Design Part 2 – Sketches
The sketches for the site were very important for this project because the website was so large and there was an enormous amount of content to consider when doing the information architecture. I sketched out several different single page, archive page, and homepage options as we were developing a custom wordpress site for the client. After getting lots of feedback from my team and doing several iterations I was able to move onto low fidelity mockups in Balsamiq.
Design Part 3 – Wireframes in Balsamiq
When designing the wireframes for the site having the user needs and the client’s business objectives in mind was the UX process I used. I wanted to design a very functional website that made the engagement of the users with the website seamless. Great experiences are invisible and simple. That was the big challenge on this project because of the large amount of content to organize and how to do it.
I was able to do low fidelity wireframes of the home page (multiple versions), single pages, special page templates, and desktop and mobile versions of the wireframes.
I communicated the hierarchy, functionality, placement, layout, and detailed interactions in the low fidelity wireframes. Ideally I would have moved onto high fidelity prototypes after this stage, but the client wanted to be cost effective by moving onto the development after approval of wireframes.
My team worked very hard to make my designs come to life across the new site. We delivered a modern, clean, and vibrant website that targeted mostly female patients who elect having plastic surgery. We were able to deliver a user flow that was easy to use for the patient to find what they were looking for on the site whether it be specifics about a surgery type or how to prepare for surgery.