Adam Ruf • January 2021 • ~6 hours across 2 weeks

• Design Tools

Why did I do this?

I run a contest for UX designers. As part of the way I support contestants, I demonstrate the activities involved in entering the contest. Contest 14 focuses on exercising visual design skills, testing competing visual designs, and constructing case studies that communicate visual design changes.

Contest Goal

Apply a new visual language to the SF Zoo website in order to improve the UX, including

• Accessibility
• Affordances
• Aesthetics

Desired Outcomes

• A general audience will prefer to use my website design over the current design
• My design will be perceived as
  • more intuitive
  • more modern or
  • more aesthetically pleasing

Overview: Homepage redesign

Current homepage

Homepage redesign that I tested

Let's take a closer look at some of the changes I made and my thinking behind those design decisions...

Color

• For text colors, I selected a gray palette to provide color contrast that meets WCAG2.1 minimum contrast requirements
• I leveraged the high contrast colors of the logo to define colors to use for buttons

• I selected a few accent colors (not to be used for text) that are brighter and more saturated than the current visual language's accent colors.

Top: current site's accent colors are pulled from nature, and are also fairly muddy; Bottom: the accent colors I selected to help inject energy into the site

Typography

I spent less than 5 minutes on fonts.google.com looking for a font that met the following criteria:

• Sans-serif
• Optimized for digital Display