WebMD
DESIGN LEAD + UX + VISUAL
WebMD is the most popular source of health information in the US. But the site's relationship with drugmakers brings into question the ingenuity of the site and it's content. We've all heard the running joke..."WebMD always tells me I have cancer". As designers (in partnership with content developers) it's important for us to do our part in making sure our content is presented in a way that it can be trusted.
The current design
The current homepage relies heavily on imagery and ad placements. However, the images are not extremely relevant to the content and because mostly all of them are stock photos, they are not relateable. A news site with tons of pharma ads and fake images don't really help in the trust department.
Colors and fonts
I first decided to tackle a color palette that was 1. Accessible and 2. Engaging yet still professional/medical. Parsing through tons of medical information can be numbing so I opted for brighter and more uplifting colors that give a feeling of assurance. The primary colors have been tested for accessibililty. Currently there are two fonts used for the entire site and different weights of these fonts. In the redesign, I was able to keep page load time to a minimum by continuing to only using two fonts, but removing or re-mapping the weights that were not in use in use to one of the two choosen fonts.
Designing trust
The homepage already had a structure but that structure was not very clear. While we understand our own organized chaos, our visitors don't. The top of the homepage is one of the first impressions we get make on new visitors. I looked at other trusted news sites and one that stood out to me the most was the New York Times homepage which is structured very much like the first page of their printed newspaper.
I started with the above newspaper layout as the structure for the top of the homepage. I looked at the remainder of the content on the current homepage, such as the videos and the slideshow call outs, and tried to find ways to make them more interactive, while also fitting them into a structured layout.
ADA fixes
The default state for the current tags on the site do not pass accessiblity. While the dark text passes on the light blue button shape, the button shape itself does not pass on a white background. In my redesign I changed the stroke of the buttons to the accessible blue from the new color palette.
Believeable imagery
The current imagery consists mainly of stock photography that uses models in awkward or unrealistic poses. In the redesign, I worked closely with the content developers to ensure that we implement a standard to site imagery which includes scenes that are more realistic and relatable vs images of people that are clearly paid models.
The final designs
A clean layout with featured articles and trending topics. The homepage also features interactive content such as slideshows and immersive videos. The cold and flu map is a very popular tool used on Medly. To give it a make over, I chose a muted map accompanied by poppy red to indicate severe flu activity and purple to indicate mild flu activity. The historical trends infographic allows user to see flu activty of the last 5 years.
