YaleMedicine.org | a human approach to healthcare

August 2016

YaleMed Homepage.png

In 2014, the Yale School of Medicine came to Adoptive, a design agency I worked for in 2016, to rebrand its patient-facing organization at the time known as “The Yale Medical Group”. Yale wanted to grow its patient base and create a more engaging, human, empathetic name for itself among its competitors. Thus, in the early summer of 2016, we launched “Yale Medicine” and yalemedicine.org, a content-driven patient site to draw new and consistent traffic to the organization where users could easily read Yale Medicine patient stories, learn about conditions, and find the best doctors to treat their conditions.

Role: UX Designer

Because I entered the project at a later phase, much of the user research and core design for the patient site was complete. My role as one of two UX Designers on team was to define the responsive footprint and document the usage guidelines around every component for the future Yale Medicine team to reference in the maintenance of the site.


Image A: The ‘Refer a Patient’ responsive page template at every breakpoint.

Because a “mobile-first” approach was not initially followed in the design of the Yale Medicine website, designing for smaller breakpoints was an interesting challenge to take on. We followed responsive design best practices outlined by Google Material Design, and decided to break down our desktop design into two smaller breakpoints of 768px and 480px. The process consisted of the following steps in roughly the below order:

  1. Document all modules and components of the website (Image B; below)

  2. Design the responsive behavior of each component at every breakpoint (Image A; right)

  3. Categorize and prioritize all components from an information architecture perspective (Image B; below)

  4. Outline the responsive footprint and how it scales for every breakpoint (Image C; below right)

  5. Create responsive templates for different page types; i.e.: Department Page, Refer a Patient, Search Results, etc. (Image A; right)

Image B: Categorization of every component within the site.

Image B: Categorization of every component within the site.

Image C: Desktop; Tablet; Mobile footprint, visualizing the Footprint Categories on the left and how they would be prioritized at every breakpoint.

The result of this process was a smooth hand-off from UX to Visual Design to Development. Few questions arose over the behavior of each component, improving our team’s overall workflow and efficiency. This documentation and design process also allowed for sustainable site maintenance once our team was no longer on the project.

Please reach out to me directly for more of my detailed work and designs on this project.

View the live site: