Zocdoc Rebrand
Redesign of Zocdoc’s brand system and its extension to multiple applications
Prologue
Zocdoc began as an online medical care scheduling service. Many patients loved the product, and doctors and their staffs found the service helpful. An especially popular aspect of the product was its mascots, an illustration of two doctors, Ollie and Bea, who were presented as warm and caring avatars of the medical profession. For a long time these two mascots worked well to represent Zocdoc, but the time soon came for the company to explore its own identity, and in doing so we had to change fundamental design aspects of the product and other platforms.
The old design
When I joined the team in 2013, there were multiple challenges inherent in the existing visual system across all touchpoints:
The strongest brand element, the illustrations, were not scalable.
The other elements were generic compared to the illustrations.
The system didn’t have solid standards for adoption across multiple applications.
Overall, illustrations of doctors dominated the Zocdoc platforms, contrasting with the company’s patient-centered stance. Yet ironically, these illustrations proved to be incongruous with provider-facing products and materials, as they were too frivolous for the serious medical professional. However, once the illustrations were removed, the designs lacked necessary branding and personality, taking on a generic appearance.
On the interface level, design inconsistencies and incongruities affected optimal function. Different styles of gradients, button treatments, and typography existed across the site. The seriousness of the Helvetica font contrasted with the cartoonish illustrations, and, when combined with generic-sounding copy, led to a discordant tone. The strongest element, the illustrations, were designed in complex and conflicting styles, making sitewide reproduction difficult. Finally, the dark teal and orange color palette simply came across as dull.
These issues were not isolated problems, but instead were connected to the brand. To fix any one or number of them, required us to start at the root of the problem, and as a result, what we thought might be a quick fix turned into a complete makeover of our visual identity.
The new design
A year-long rebranding journey gave us Zee: the new face of a better healthcare experience. A dynamic line drawing of the letter Z, with eyes evoking a patient’s face, Zee is always full of life and motion, communicating the patient journey.
The desaturated teal and orange gradients were replaced by an optimistic and warm yellow color palette. The brand elements became more versatile and flexible, resulting in an easier scalability. Putting all of these elements together further solidified the idea that Zocdoc was now centered and designed around the patient experience.
So, how did we get here?
It started with a repositioning of the core mission.
In the fall of 2014, Zocdoc retraced its steps. Over the past 7 years, Zocdoc had grown beyond a simple transactional platform that helped patients book appointments with doctors, to an all-encompassing system dedicated to extending the life of patient care. Give power to the patient: the evolved mission was designed to put patients and their needs first.
The brand attributes were solidified as well. “Caring, smart, and simple” became the work’s unified values. During the months following this perspective shift, communication and design teams aligned the new mission throughout the office, printing t-shirts, hanging posters, and distributing brand cards so all employees could properly articulate these new values.
This new mission informed all future decisions, prompting my team to wonder: how can we design for a caring, smart, and ultimately simple experience?
Setting a design guidance
Over the next few months, our design team defined what each of the attributes meant to us and shared practical examples of each idea within the context of brand, experience, and visual design. We researched other brands, created mood boards, and analyzed ways to put these qualities into practice. This process also included listening to real users’ perspectives of their own caring experiences.
At the end of the day, the team made the new attributes less subjective, determining which aspects of the existing system were working, and which ones needed to be improved. Our research confirmed that “caring” is the most important attribute for Zocdoc, and the best way to visualize this trait is through the use of an illustration that patients could identify and empathize with. We needed a face.
But we already had faces. Two of them. Our mascots Ollie and Bea, warm and kind-hearted doctors, conveyed the message of caring and empathy with their open and pleasant smiles. Yet, they represented the limited physician-centered perspective. This was why we needed to design Zee, a new brand identity that provided the attributes missing from the current system, and spoke to the patient’s point of view.
Developing a visual identity
Bringing in an expert was a necessary part of the rebrand journey. After a couple weeks of mood-boarding and brainstorming with our in-house team, Wolff Ollins proposed several logo directions. Out of all of them, we liked the concept of the faithful friend: the face of modern healthcare who will always be on the patient’s side.
After going through many iterations, we have our new logo: Zee.
The new typography, blobs, and color system were developed to complement the new logo. The shifting yellow blobs in the background are a great way to give some structure to the Zee without having to delve into more realistic human head shapes. The wordmark is a nice geometric sans. The blobs continue throughout the applications as a background, giving the layouts an unexpected structure.
Extending new system
Once the logo and the new visual system was locked, our in-house team embarked on extending these designs to all products and touch points. This was an important phase, testing identity applications into real products to determine if these new designs could work across all platforms. This new visual system needed to function within a specific context of functional elements and rules, creating an experience that was grounded, practical, and concrete.
I worked closely with one brand designer and 3 product designers to experiment with our new visual systems. First, we went broad with our explorations, experimenting to see which themes emerged, and which combination of elements generated the most excitement, and in doing so the focus shifted to refinement and consistency. The challenge was to strike a balance between consistency and creative expression of the brand across the website, app, services, and other platforms. Some elements were suited better to certain environments than others, so it was important to be constantly looking at how each piece fit in the whole system.
Creating signature moments with animations
We strived to show “Caring” through small interactions of Zee’s animation, appearing at key moments on the product. A painful and sick Zee would be used as a loading animation, while a happy and satisfied face emerged once the booking was completed.
Bringing patient story into our voice
Refining the voice that reflected the brand narrative was an integral part of the process. We built a system that allowed the patient story to interact with all levels of the Zocdoc platform. From website to business cards, opportunity was made to weave both employee and patient story together into a seamless iteration of the new brand identity.
Looking back...
In hindsight, it was important to constantly reminding ourselves of our initial problem. One of the challenges in the old system was a reliance on illustration because we lacked a robust system. As previously said, these illustrations were problematic to fully implement because they were not scalable. But even with these newer flexible brand elements, we still were dependant on illustrations to solve the ambiguity and uncertainty in many design challenges. As a result, the time spent nailing down the new illustrations should have been spent first establishing a strong foundation of core brand elements.
Ultimately, the rebrand launch was successful, and Zee was welcomed with open arms. The process gave the whole team a sense of growth and proud, and as an individual, it taught me that every meaningful change begins with delving into one’s identity.
