The UX Cookbook’s logo with its brand elements

The UX Cookbook is a project I led while working on the UX team at the University of Arizona Libraries. It began with the need to document the team’s UX research and design methods for internal training and consultation purposes. As the team launched its DesignOps and ResearchOps efforts in 2020, we created The UX Cookbook as essential documentation for scaling design and UX research work.

See it live  ↗

Everyone can cook UX

The team wanted The UX Cookbook to be fun and approachable, simulating the experience of preparing to cook something in the kitchen. I named every article in The UX Cookbook a “recipe”, so the reader becomes the “cook” trying to cook up a real-life project using a UX research or design method.

The UX Cookbook’s homepage
The UX Cookbook’s homepage

I chose Notion as The UX Cookbook’s content management system. The team started adopting Notion at the beginning of 2020 and soon realized its potential for hosting a content-focused website. Notion allows us to invite others to create and edit content collaboratively, while its page components gave us plenty of options to design a flexible layout.

A look inside the recipes

The UX Cookbook launched with just two recipe categories: “Research & testing”, and “Prototyping & visual design”. Over time, we added another two categories, “Content strategy” and “Data & analytics”.

The User interviews recipe
The User interviews recipe

Each recipe includes some or all of the following sections:

  • Nutrition profile: A short description of the method
  • Cooking time: Estimated time to complete the method
  • Perfect for: Projects or settings that fit the method well
  • Ingredients: What tools and software are needed, and where to get them
  • Prep work: Preparation before starting the method
  • Directions: Step-by-step instructions for carrying out the method in a project
  • Plating: Guidance on presenting research findings or design artifacts
  • Gallery: A showcase of finished work from the library’s UX team or members of the UX community
Inside the User interviews recipe, including its “nutrition profile”, “cooking time”, “perfect for”, and “prep work”
Inside the User interviews recipe, including its “nutrition profile”, “cooking time”, “perfect for”, and “prep work”

Branding: Berries on a stick

The UX Cookbook launched in 2020 without formal visual branding. When the team revisited The UX Cookbook’s branding in 2022, we wanted one that echos the project’s fun and approachable theme. In addition, I also hoped that the branding complements the website’s content while disappearing within it.

I was inspired by a Chinese snack called Tánghúlu (糖葫芦), which is essentially hawthorn berries covered in sugar on a stick. The circular shapes filled with a single color, red, inspired me to explore different variations of a circle using my imagination.

Tánghúlu, a Chinese snack. Image credit: Khaneeros
Tánghúlu, a Chinese snack. Image credit: Khaneeros

I quickly realized some user interface elements are either in a circle or could be converted to an abstract version in a circular shape. Radio buttons, checkboxes, dates on a calendar, time on a clock, emojis, the “like” action, etc.

Abstract and representational UI elements, formed by circles
Abstract and representational UI elements, formed by circles

Then I tried challenging myself to create visual representations of UX terminologies in The UX Cookbook. I like creating with limitations, so I started by sticking with two rules:

  1. Fitting the visual representation on the right 1/3 of a rectangular card while placing the terminology name on the left 2/3.
  2. Using approximately the space of three circles in a column to recreate the “berries on a stick” shape.
Recipe covers that include method names and visual representations formed by circles
Recipe covers that include method names and visual representations formed by circles

To my surprise, a lot of information could be conveyed with just three circles, or even less. The outcome of the creative challenge was a unique cover for each recipe in The UX Cookbook.

I then moved on to design a set of logos for The UX Cookbook to be used in different scenarios. In addition, following the inspiration from Tánghúlu, I also outlined a monochrome-ish color palette.

The UX Cookbook’s logos, brand colors, and typography elements
The UX Cookbook’s logos, brand colors, and typography elements

Result: More than just an internal help guide

Since The UX Cookbook launched in November 2020, it has outgrown its initial goal of being internal documentation and become a tool that many in the UX community love and share. The website now has monthly visitors from Africa, Asia, Europe, North America, and Oceania. In addition to the library’s UX team, members from the UX@UA community also contribute to its content.

My roles

I designed The UX Cookbook’s layout in Notion, planned for its content, designed its branding, wrote some recipes, and reviewed other authors’ contributions.

←  Go back to homepage