MedVoxel
Focus
Branding, UI/UX Design, Interaction Design
Deliverables
Visual Identity & Brand
High-Fidelity Mockups
MedVoxel is a medical company that specializes in Cardiac MRI post image analysis. Their tools and algorithms reduce existing clinical work flows by 1/4 of the time required by other tools with accuracy and reliability.
Overview
The clients needed a new brand identity as well as a UI/UX refresh of their existing web application.
Their current one was out-dated and difficult for medical practitioners to use due to inconsistent design and a complicated interface.
The Challenge
How might we improve the user experience of the web app and make it more intuitive for physicians to use?
A professional brand identity
This product is geared towards physicians and those that work in the medical field. When I was created the brand identity, I kept these 3 key words in mind: Reliable, Clean, Intuitive.
The final logo was constructed to represent two core elements of the company. The first are the “waves”, they symbolize the connectivity of technology and the power they hold. Once two of the waves are combined you get the “fingerprint”. The fingerprint pays tribute to the companies focus on people.
Reduce clutter and clean up the navigation
The previous navigation was anchored to the top of the screen with a multi-tab file cabinet design. This style of navigation may work for real life but it does not work in the web space! Users were unable to distinguish the information hierarchy due to too many tabs.
Together, the clients and I narrowed down it down to 6 main pages. I went with a slide out menu from the left, which would collapse when not highlighted.
Streamline the flow of content
The initial interface was broken into many different sized containers. This made the screen very hard on the eyes and users became unclear about where to start.
I improved this by reorganizing the containers so their sizes were even and fit perfectly into one another. With the help of sizing, icons, and colours; I was able to improve the visual flow of this screen.
Button management at its finest
The number of buttons visible on the screen was a big pain point for consumers. They were colour coded differently, sized differently and sometimes located in different areas.
I started by grouping the most commonly used buttons together. I then collapsed the uncommon ones into a “more options” button. This way it is still accessible, but does not clutter the screen. I added stylized icons for each button and also established a consistent location for the buttons. Now the buttons would be legible, clear and easy to find.
Hierarchy of content matters
Not all content should be treated the same! It is so important for businesses to get clear on the hierarchy of their content. This means establishing the primary, secondary and tertiary functions of your product. Knowing this will help your digital products scale when more features get inevitably added.
The power of colours and patterns
Wow! To see this interface transform from what is was previously was truly amazing. I had fun giving this interface a face lift. It really goes to show, humans are very visual and our brains need consistency in colours and patterns to understand what we are looking at.