XYZ Medical is a fictional medical supply company who is looking to develop a new website to elevate the online presence of their new suite of employee, visitor, and patient identification products.

Given wireframes, my task was to provide a brand new look and feel and make UX recommendations.

Preliminary Branding: Colors

Blue is popularly used for graphic elements in the healthcare industry because it conveys knowledge, credibility, trust, and professionalism.

 However, standing out in a sea of blue can be tough. As a result, I’ve chosen a more sophisticated color palette, utilizing teal as the primary brand color rather than an “out of the box” blue.

In addition, the accent colors are very different from some of XYZ’s largest competitors (i.e Cardinal Health, McKensson, and Medline). This allows XYZ to stick with blue (and the positive connotations that it carries) while standing out from their competitors. In addition, these colors were chosen with accessibility in mind. The main color palette was tested to ensure color combinations comply with WCAG AAA or AA accessibility standards.

Preliminary Branding: Typography

Sans serif typefaces are clean, modern and convey a sense of approachability. Within the context of a B2B brand, all of these aspects apply to XYZ Medical.Oswald is a sans serif typeface with character. With websites like XYZ medical, much of the content can feel bland pretty quickly. As a result, the brand needs a font that can add a little zest to the site without sacrificing readability.With that in mind, it’s important to choose a simple font to pair with Oswald in order to create a type system with fonts that don’t compete with one another. As a result, Open Sans was chosen as a suitable font pairing for Oswald.

UX Strategy & Recommendations

I wanted to write up a few paragraphs to discuss some areas where the following mockups stray a little from the layout provided in the initial wireframes provided to me.

1. Moving the “log in” call to action a little further down in the hierarchy of the hero section.

There are likely plenty of areas within the architecture where the site will prompt users to login (i.e at checkout, log in to view wholesale pricing, etc). As a result, the prime real estate in the hero section could be used to promote something of high priority. I’ve used it to promote identification products at a glance, something that was identified as a high priority/specialty for the organization. 



Side note: The design puts a huge focus on identification supplies but makes sure to include other products they offer as well. During some preliminary user research, I learned hospitals prefer to limit their vendors to 3-4 suppliers in order to make ordering and reordering easier on staff. As a result, it’s smart for XYZ to demonstrate their breadth of products on the homepage.



2. Navigation

. I know that much (if not all) of the information architecture work is done in the initial discovery phase of a project. However, I wanted to rethink how item categories are grouped as it’s generally best practice to limit main navigation items to 5 items.



As a result, the following mockups propose a content-rich menu layout that groups ideas into 1) Product-focused solutions and 2) More granular product categories. Because this menu is more content-rich then your average dropdown, the entire site moves downward as the menu expands. This behavior is more crucial to the mobile experience because with a longer menu like this we wouldn’t want the user scrolling all the way to the top of the page to close the menu. That is a usability problem I’ve identified in some of XYZ’s competitor sites (Medline, Cardinal Health).

 In addition, this menu layout brings to life the content on the site. The “Featured Post” section in the menu allows us to feature a product or blog post that relates the the category a customer is currently browsing. Strategically adding featured posts would add to XYZ’s credibility within the medical community and may lead to longer session durations per unique user. Increased session durations may also lead to a user completing some desired interactions (i.e Signing up for the newsletter, creating an account, or completing a checkout flow). Thus establishing a relationship with XYZ Medical.



3. Search

. Rather than a simple search bar in navigation, I imagine a more robust search feature. A user would click the icon and an overlay would appear giving the user the ability to 1) filter search results (i.e search in Medical Imaging). In addition. we’d be able to add some “Popularly Searched” items to the search overlay.







Final Mockups: Desktop

Final Mockups: Mobile