The Making of The UX Cookbook

Putting berries on a stick

Bob Liu
uxEd
Published in
7 min readNov 4, 2022

--

The UX Cookbook’s promotional graphics, with its logo and branding elements

The UX Cookbook (https://theuxcookbook.com) is a collection of guides for UX research, design, and content strategy created by the UX team at the University of Arizona Libraries. It’s open and free, so anyone can start learning about UX at no cost.

The UX Cookbook first went live in November 2020. Shortly after its launch, I co-wrote a journal article with my then colleagues, Rebecca Blakiston and Lara Miller, to introduce how it functioned as essential documentation in our DesignOps workflow for scaling UX work (Blakiston et al., 2021). Since then, the UX team has made several changes to its structure, added more content, and updated its branding. This article revisits how we started with the Cookbook while highlighting what’s new.

Motivation

Being part of the small UX team at the University of Arizona Libraries, I am amazed at how our colleagues appreciate good user experience. Many build design thinking and UX research methods, such as user interviews, usability testing, card sorting, and prototyping, into their everyday workflow.

We have always felt proud to support our colleagues. However, we often had to reinvent the wheel when offering UX consultation for folks in the library and on campus. We sometimes scrambled to find online tutorials and how-to articles, then later realized we could have just walked them through our past work on a similar project.

The pandemic made synchronous collaboration even more challenging, and our small team struggled more to keep up with the growing number of consultation requests. So we thought, what if we create our guides for UX research, design, and content strategy? Let’s make them available 24/7 and include real-life examples we worked on in the past.

And that was the beginning of The UX Cookbook.

Everyone can cook UX

The team wanted the guide to be fun and approachable, starting from the name: The UX Cookbook. We named every article in The UX Cookbook a recipe, so the reader becomes the cook who plans for a real-life project using a UX method, just like preparing a meal in the kitchen.

We chose Notion as The UX Cookbook’s content management system. The team started using Notion at the beginning of 2020, and soon after that, we realized its potential for hosting a content-focused website. Notion lets us easily invite others to create and edit content collaboratively, and its versatile page components gave us plenty of options to design a flexible layout.

The UX Cookbook’s homepage on an iPad
The UX Cookbook’s homepage on an iPad

A look inside the recipes

The UX Cookbook launched with just two recipe categories: Research & testing and Prototyping & visual design. We started with recipes for the most frequently-requested methods, such as User interviews, Surveys, Personas, Card sorting, Wireframing, and Usability testing.

Over time, we added two more categories, Content strategy and Data & analytics, that include more popular recipes such as Web analytics and Writing for the web.

The User interviews recipe showing its title, cover image, and the “nutrition profile” section
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: what to prepare before starting
  • Directions: step-by-step instructions for carrying out the method in a project
  • Plating: ideas for presenting the research findings or design artifacts
  • Gallery: showcasing existing work from the library’s UX team or members of the UX community
More inside the User interviews recipe, including the “nutrition profile”, “cooking time”, “perfect for”, and “prep work” sections
More inside the User interviews recipe

Branding: berries on a stick

The UX Cookbook did not have a complete branding strategy at its launch. The team hoped to see a food-related theme echoing the “cookbook” idea, so I randomly chose s’mores as the theme, then made covers for the recipes with circles and rectangles in three s’mores-inspired colors: beige, gold, and brown.

The s’mores idea didn’t work well because it lacked a creative framework with specific branding elements. With colors and shapes being the only guidelines, it was hard for the rest of the team to create any promotional materials in scale while maintaining a consistent look and feel. The result was the recipe covers looked a bit messy when put together.

The UX Cookbook’s pre-2022 s’mores branding with recipe covers made with geometric elements in gold, beige, and brown colors
The UX Cookbook’s pre-2022 s’mores branding

When the team revisited The UX Cookbook’s branding in 2022, we wanted to see one that reflects the project’s fun and approachable theme. Before starting the design, I also hoped to find branding elements that complement the website’s content while disappearing within it.

I was inspired by a Chinese snack called tánghúlu (糖葫芦), which are hawthorn berries covered in melted sugar then put on a stick. People, especially kids, like to eat it in winter, as its auspicious red color fits the celebratory theme for a new year.

A painting of tánghúlu, a Chinese snack. It looks like four red circles on a stick.
Tánghúlu, a Chinese snack. Image credit: Khaneeros

The circular shapes in a consistent red color were like a blank canvas that encouraged me to paint something within them. I realized some user interface elements are either in a circle or could be represented by an abstract version in a circular shape, such as a radio button, a checkbox, a day on a calendar, the time on a clock, an emoji, the like action, and so on.

Abstract representation of UI elements, such as the close button, checkbox, radio button, clock, and calendar dates, in red circles
Abstract representation of UI elements in circles

Then I started a creative challenge for myself: creating a visual representation of Cookbook recipes with these circles. I like creating with limitations, so I started by sticking with two rules (pun intended):

  1. Only use 2–3 circles in a column to represent the layout of berries on a stick
  2. Fit the visual representation on the right 1/3 of a rectangular card while placing the recipe name on the left 2/3
Redesigned recipe covers of surveys, wireframing, tree testing, card sorting, user interviews, and writing for the web
Redesigned recipe covers, including recipe names and visual representation

To my surprise, I could convey much information with just three circles, or even less. For example, when I connected three randomly-placed circles with lines, they looked like a line chart with discrete data points. 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 for different contexts. Following the inspiration from tánghúlu, I also picked a monochrome-ish color palette.

The UX Cookbook’s branding cheat sheet, including its logos, brand colors, and typography elements
The UX Cookbook’s branding cheat sheet, including its logos, brand colors, and typography elements

Now: more than just internal documentation

Two years after its launch, The UX Cookbook has outgrown its initial scope 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 members of the library’s UX team, folks from the UX@UA community also contribute to content in The UX Cookbook, such as the Impression testing recipe.

In the meantime, The UX Cookbook keeps playing an important role in the library’s DesignOps setup, one that helps us magnify the impact of our design and research while reducing the barrier and maintenance efforts. The library’s UX team uses it to onboard new team members, train content managers, and plan for collaboration in projects. The recipes also became a more useful reference during UX consulting hours than some other online articles we used in the past.

Some instructors at the University of Arizona have started using The UX Cookbook in classes as an open educational resource (OER) that replaces costly textbooks. An example is Professor Ann Shivers-McNair’s ENGL 430: User Experience Research course.

My 3 takeaways

Good things are meant to be shared. If we hadn’t decided to make The UX Cookbook free and open, we wouldn’t have had the amazing contribution from the UX community or helped folks at other institutions scale their design and research efforts. Perhaps a next step could be submitting The UX Cookbook to the Open Educational Resources (OER) commons?

Think inside the box. Not to discourage creativity — quite the opposite. Consider establishing design guidelines upfront if a creative project has multiple contributors. It’s easier to ensure consistency and quality of work if everyone knows the limitation and boundaries.

Take a walk every day, but don’t let your eyes take a break. Pay attention to things around you and notice they’re not the same every time you look at them. The small pieces in your life could bring big inspirations.

References

Blakiston, R., Liu, Y., & Miller, L. (2021). DesignOps in an Academic Library: Reducing Barriers, Improving Efficiency, and Scaling Impact of Design and Research. Journal of Library Administration, 62(1), 31–46. https://doi.org/10.1080/01930826.2021.2006984.

--

--