top of page

Zocdoc: The Paper Gown

Updating Zocdoc's patient blog with
a modern and editorial visual identity. 
Role: Sr. Visual Designer
Date: July 2018
UX Lead: Jesse Yuan
Creative Director: Shalimar Luis
Company: Kettle
dark copy.png

The Challenge

Zocdoc wanted to transform their patient blog into an engaging and welcoming experience for readers. The goal was to design a content site that stood out amongst the oversaturated health/wellness market.

Early Concepts

I began by exploring how Zocdoc's UI could be reimagined for this patient space. The priority was to create a friendly look & feel that could also appeal to Zocdoc's target audience of young, busy professionals who use technology to make their lives easier and feel part of a community. This was accomplished with the use of warm colors, playful icons, and editorial photography and illustration. 
moodboard3.png
Art Direction Concept

Design Process

After the visual concepts, it was time to explore how this new look & feel could translate into actual pages.
I was given light wireframes for the article page to
use a starting point. Through a series of UI and layout explorations, we were able to get crucial client feedback early in the process and better develop
the design strategy moving forward in the production stage: keep the overall design simple, while adding playful accents across the UI.
article.png
Article Page Explorations

UI Toolkit

I was tasked with creating a library of all UI components including specs, hover states, hex codes, text styles, etc. The purpose of this was to make sure the new visual system scaled consistently across all platforms.This UI kit was then supplied to Kettle's in-house developers as a guide when building the site. 
GUI 1.jpg
UI Kit Preview

The Outcome

The final product is an engaging editorial experience that feels modern and inclusive. The final UI struck a perfect balance between the playful and serious, in order to stand out while always being sensitive to the community of patients and health topics.
Browser + Shadow.png
dark copy.png
ipad2.png
ipad.png
article desktop.png
article 2.png
bottom of page