Anatomage
A Visual Redesign
Problem
The current Anatomage homepage does not clearly present the two different products Anatomage offers. It’s also hard to navigate and doesn’t reflect the company as well as it should stylistically.
Anatomage
Anatomage is a medical and dental device/software company. I worked for the company for almost 4 years a Research & Development Engineer. Because of my familiarity with the company and CEO, I chose their homepage for a conceptual redesign.
Products
Medical Table: The Anatomage Medical Table is a life-size interactive anatomy tool, and is used by doctors and schools around the world.
Invivo: Invivo software is used extensively by dentists, primarily for implant surgery and the creation of implant guides.
My Role
Sole visual designer
Solution
To redesign the homepage by:
Better displaying the two different departments (Medical and Dental).
Giving more insight into what the products are for each department.
Making the design more cohesive and the site easier to navigate.
This will be done with keeping in mind the company preferences, such as logo, color scheme, and imagery.
Original
Anatomage Original Homepage
The original homepage faces some issues in terms of design and usability:
Lack of navigation: The current header navigation is limited- since product purchase is important a call number should be primary
Lack of Information: The first image doesn’t explain what product is or its capabilities and no information besides department name is provided to the users
Layout: The user can’t see the name of the different products/department with the current page break. The footer can be condensed and the contact section can be linked to new page.
Mobile: For the mobile version about 75% of the page is the footer. It’s a lot of scrolling and it’s easy for the user to get lost. The mobile version has many of the same pitfalls as the desktop version including lack of information.
Click to expand
Click to expand
Design
Redesigning
Although this was a conceptual redesign, I wanted to implement the following design restrictions based on my knowledge of the CEO (primary stakeholder):
The logo should remain the same.
The color scheme will remain as shades of purple.
The website needs to have a purely professional feel.
I also wanted to consider responsive web design and create a mobile version in addition to desktop. As shown in the original screenshots, the mobile version faced many of the same issues.
Design Process
I created a two versions of a low fidelity desktop wireframe and one mobile wireframe in Sketch. These wireframes were very basic, with only blocks, and no color to get a sense of layout.
From those I picked one, and made it a little higher fidelity- adding in text and logos.
I developed a style guide (based on the previously mentioned design constraints) where I decided on the font and colors that I would use in the the high fidelity versions. I then applied these colors to create the mid-fidelity wireframe.
From there I started adding in pictures and text. At this point I realized I felt the layout was too crowded. Also, I felt the site was lacking a personal touch. I decided to add in a section about support, and separate out the sections more.
For the final iteration, I fixed some more issues with crowding in the hero gallery, and resized to font.
Takeaways: One thing I learned from this was to do more paper and pencil prototyping. I think if I had done this in the beginning I would have found the right layout earlier on. Trust the process! Also throughout this process I asked my peers for feedback, and it was invaluable to helping me not only improve the design but my skills as well.
