UX/UI for Yale Medicine’s Global Site Search

Who
Yale Medicine was re-imagining YaleMedicine.org and needed help developing their final site-wide search UX and UI Design.

What
Low fidelity mockups to explore several search return layout directions

Final UI design for filtering and search returns

Additional page-level art direction and information hierarchy  for Departments section

Tools
XD, Photoshop

Using a card based design and powerful filtering, Yale was able to make search friendly while still being highly functional.

A color system was implemented to denote the four major content areas. Colors were on brand with the Yale design system, and slightly tweaked to adhere to WCAG 2.0 contrast standards.

The search bar drives the majority of the user experience. Several versions of hint text and call to action button colors were A/B tested. Site search usage spiked after the new bar was implemented.