Bob Liu

Bring Teams Together With a Design Studio

2024-06-05T00:00:00Z

Imagine presenting a prototype you spent two weeks designing to your stakeholders. You tried to address as many pain points as possible based on your interview with 20 users. You drop your mic on the last screen and expect a standing ovation, only to hear comments like the margins are off, buttons are misplaced, and key features X and Y are missing. We’ve all been there.

As UX professionals, we learn what our users want and reflect it in the design. But stakeholders, who may have different goals, are often looped in once a draft prototype is ready, which causes a gap in expectation and unpleasant surprises. The question is, how might we improve the design process — so user needs are aligned with organizational priorities, and stakeholders become your allies?

In 2019, I started experimenting with a new workshop format that aims to include the stakeholders early in the design process. I named it “design studio.” Over the years, I used it with seven project teams at the University of Arizona Libraries, and it delivered the expectation every time.

The workshop is so simple that anyone can run with their own teams. Here’s how.

What’s a Design Studio?

Design studio for the University of Arizona Libraries Special Collections, April 2023

Design studio is a lightweight workshop for understanding design goals and mindfully including stakeholders in the design process. The outcome is a list of goals that informs the project requirements and product design.

At the core of the workshop is a fully analog sketching session. This structured activity encourages project contributors to share their vision and empathize with the users. The rest of the workshop has several interactive activities to help build trust between the implementors and stakeholders.

Who Should Participate?

A design studio is good for groups of all sizes and doesn’t require the participants to have any previous design experience. That said, I had better success running the workshop with groups that include:

1-3 key stakeholders: those who make important decisions, such as product owners, sponsors, and department heads.
2-12 collaborators: members of the project team, such as UX researchers, product designers, developers, and content providers. You might also want to invite customer service professionals who have direct experience working with your users, or even the power users themselves.

Depending on your group size, plan on having 1-2 facilitators who are familiar with the steps of the workshop.

What Do I Need?

Supplies for a design studio

To run a design studio in person, all you need are basic office supplies, including:

Index cards: the ideal size is 4x6 inch (about 10x15 cm). Prepare 2-3 per participant.
Markers: Sharpies or thick pens. Prepare 1 per participant.
A roll of tape
Stickers (optional): small dot stickers are the best. Prepare 3-6 per participant.

In addition, book a space with a whiteboard, wall, window, or another large vertical surface where you can put tape on.

Steps

The design studio is a 5-step process that takes about an hour. Everyone, including the facilitator, should participate in all steps. Participants should be seated around tables. Consider breaking bigger groups down into several small ones. If possible, provide refreshments.

Step 1: Intro

The facilitator introduces the workshop and shares context of the project. Participants go around the table for intros as the facilitator hands out workshop supplies.

Step 2: Sketch

Design studio for the University of Arizona Libraries News page, February 2023

Design studio for the University of Arizona library homepage, May 2024

Each participant spends 5-7 minutes to sketch something they’d like to see in the final design. The scope doesn’t matter as long the idea fits on an index card. For example, they can draw something as small as a button and as big as the whole page. They can also choose to jot down their idea on the index card instead of sketching.

Keep in mind — the index card is a rather small canvas for a Sharpie. This is intentional as it forces the participant to focus on the features that matter the most to them. Follow these guidelines:

The key stakeholders can choose to have three index cards while others have two.
Draw or write down only one idea per index card.
Use only one side of the card.
Do not tape two cards together to make a bigger card.

Once done, ask the participants to tape their sketches to the whiteboard.

Step 3: Gallery Walk

Design studio for the University of Arizona Libraries News page, February 2023

Design studio for the University of Arizona library homepage, May 2024

Once everyone’s done sketching, participants walk closer to the whiteboard to review others’ work. They can put dot stickers on sketches they like, agree with, or are interested in.

Step 4: Share

Participants take turns to share what they sketched with the group. Others can ask clarifying questions. The facilitator takes notes of features or patterns they noticed.

As the participants continue to share their sketches, the facilitator should call out any repeated designs. This helps reinforce the shared goal and build consensus for the group.

Step 5: Recap

Design studio for the University of Arizona library hours, July 2019

Once every participant has done sharing, the facilitator starts a recap. Describe designs that received many votes, had the most agreement, or led to an active discussion. At the end, put these features or patterns in a “wish list.”

Before and After the Design Studio

As the facilitator, it’s a good idea to come to the design studio prepared. The right amount of research will help you narrow down to the right scope for the workshop. Before the design studio, consider:

Conducting user research. Interview the users to understand their journey, and run usability testing to probe what is and isn’t working.
Talking to the stakeholders. Know their roles and have an initial understanding of their goals, needs, pain points, and capacity.

Once you wrap up the design studio, make sure you share findings, including whiteboard snapshots and the final “wish list,” with the project team. Then use the “wish list” as a starting point for drafting project requirements and wireframes.

Can I Do It Online?

Yes! The design studio is flexible enough to be tweaked for fully-remote teams. All you need is an online whiteboard tool — I use Figjam but other online whiteboards, such as Miro and Freeform, work equally well.

Online design studio for the University of Arizona Libraries' tech lending project, April 2022

While the whiteboard is virtual, the sketching activity stays analog. As the facilitator, you would still ask the participants to sketch on physical index cards (or index card-sized paper). Once complete, each participant takes photos of their sketches and uploads them to the online whiteboard. All the other steps remain the same.

Your Turn

I’d love to hear how your design studio goes! Feel free to get in touch via email or on Mastodon and share your experience.

What the Board Said

2024-04-23T00:00:00Z

My team at the University of Arizona Libraries uses whiteboards to capture feedback from library users. We leave questions or prompts on the whiteboard and invite library visitors to respond with sticky notes. We call them “talk-back boards.”

Talk-back boards are often displayed in museums or libraries to capture free-form feedback as a part of visitor study projects. Museums also use them for interactive programs where visitors can participate.

We set up the first talk-back board at our library in 2018. Over the years, more than 40 boards were displayed with topics including website feedback, book recommendations, space evaluation, and creative projects. We captured responses for 37 boards in the library’s UX Research Repo.

Here’s a recap of four of my favorite talk-back boards.

February 2024: “What Brings You to the Library Today?”

Our team want to know what motivates people to visit the library in person, so we often post the same question in different library locations. This board was set up during the week of Valentine’s Day in 2024, and we prepared pink, orange, and red sticky notes to celebrate.

In the instructions on the board, we asked the participants to add new answer with a sticky note and vote on existing answers with a smaller sticker. The same instructions were included for most talk-back boards we set up.

Answers that received more than 3 votes:

“gaslight myself to think that I’m studious” (+6)

“bc then I can get a silly little coffee :)” (+5)

“To cry” (+5)

“TO LOCK TF IN!” (+4)

“To be Studious” (+3)

“To take a piss” (+3)

“coding HW :( #WOMENINSTEM” (+3)

327 sticky notes were captured in 8 days. We analyzed each answer and extracted the following themes:

Studying/working (100 responses)
Relationship (37 responses)
Restroom (11 responses)
Library technology (8 responses)
Borrowing/returning books (7 responses)
Buying coffee (7 responses)
View/scenery (6 responses)
Bad weather (4 responses)
Reminiscence (4 responses)

In addition to the common reasons of visiting the library such as studying or using the restroom, we were glad to see answers mentioning library technology as a result of the Libraries’ revamped and expanded tech lending program. Interestingly, the Valentine’s color scheme may have led the answers in a certain way, which is why “relationship” became the second most popular theme.

Our student assistant, Linda Lopez, also asked ChatGPT to analyze the answers. When doing so, she found that it could not recognize terms like “lock in” and “grind” as Gen Z slang for studying. She then manually edited some of the data before running the analysis in ChatGPT again, and here are the themes she got:

Study purposes
Specific academic work
Personal activities
Specific tasks
Humor
Interpersonal connections
Emotional state
Physical needs
Miscellaneous

August 2023: “Write a Monsoon Haiku!”

In June and July, people in Tucson anxiously wait for the monsoon rains to bring the cure for the unbearable Arizona heat. That’s also the time of the year when we set up this recurring creative project where library visitors are invited to write a haiku, which are 3-line poems in the following format:

First line: 5 syllables
Second line: 7 syllables
Third line: 5 syllables

Here are four most popular haikus of the 2023 monsoon season:

10 votes:
Why so late Monsoon?
Are you angry at humans
Since we broke the earth?

11 votes:
I like to eat hail
oh it is very yomy
Thank you so much

7 votes:
Welcome monsoon, hi!
We are so happy you’re here.
Thanks for bringing life.

7 votes:
metamorphic rocks
foliated and shiny
with or without rain

When capturing answers on this board, our friend Kevin O’Dea, Platforms Engineer at the Libraries, helped us develop a workflow to quickly transcribe text from photos. He created a Photoshop script that detects sticky notes, crops them out, and exports them to individual images. He then used OCR tools to extract text from the images.

December 2021: “What Stories About Social Justice and Anti-Racism Matter to You?”

In 2021, the Main Library unveiled the new Books that Matter collection that focuses on social justice and anti-racism. We set up this board to learn what books students think should be added to this collection.

Here are seven answers with the most votes:

“JUSTICE 4 PALESTINE” (+7)
“gender pay gap” (+5)
“criminal justice system” (+4)
“how to identify & disrupt white supremacy” (+3)
“non-stereotypical immigrant stories” (+3)
“Maternal health” (+3)
“Anti-capitalist stories” (+3)

September 2021: “How Much Did You Spend on Textbooks & Homework Access Codes This Semester?”

In 2021, our library was ready to implement a flat-fee textbook program introduced by the university’s book store. Two librarians who led the project wanted to learn how much students spent on textbooks and homework access codes prior to this program.

Our student assistant Riley Zuckert, who has a background in data science, designed a talk-back board that visualizes data. She set up the board with two questions:

How much did you spend on textbooks this semester?
How much did you spend on homework access codes this semester?

Under each question, she included a vertical axis to represent cost ranges from $0 to $800+. She then invited students to mark their numbers on the axis.

The board collected 308 answers over two weeks. We then calculated the percentages based on the answers:

How much did you spend on textbooks this semester? (Based on 170 answers)

$0: 22.35%
$1-$99: 21.18%
$100-$199: 27.06%
$200-$299: 15.29%
$300-$399: 7.06%
$400-$499: 2.35%
$500-$599: 0.59%
$600-$699: 0.59%
$700-$799: 0%
$800+: 3.53%

How much did you spend on homework access codes this semester? (Based on 138 answers)

$0: 36.23%
$1-$99: 30.43%
$100-$199: 20.09%
$200-$299: 4.35%
$300-$399: 0.72%
$400-$499: 2.17%
$500-$599: 0%
$600-$699: 0%
$700-$799: 0%
$800+: 0.72%

In the meantime, Lauren Dunn, intern on our team, ran a survey with the same questions on Instagram and collected 20 more answers. Riley then combined the data from the talk-back board and Instagram to created the following histograms to visualize the answers:

Image Credit: Riley Zuckert

Takeaways

Talk-back board at the University of Arizona Main Library, March 2020

The talk-back board has become an essential piece in our UX research toolkit for collecting unmoderated user feedback for websites, services, and spaces. It’s also perfect for engaging library visitors through creative projects that help them de-stress with fun distraction.

As we experimented with a wide spectrum of topics, we developed handy workflows to transcribe written answers to text for analysis. We also learned how to use AI tools for the initial analysis such as identifying common themes.

Since the boards were mostly left unattended in a public space, we inevitably saw inappropriate responses. Our team members as well as the Libraries’ desk staff regularly checked the board to remove those responses. We also refilled the supplies as needed.

Want to Read More?

You can browse more of our talk-back boards in the Libraries’ UX Research Repo.

Welcome to liu.design

2024-02-26T00:00:00Z

Hi there, and welcome to liu.design! Building a new website was one of my New Year’s resolutions. I’m glad to have completed it by March when 2024 can still be called the “new year.”

This post marks the end of my previous portfolio website: bobliu.io, which went live exactly four years ago on March 1, 2020. Here are some changes I made on the new website and things I learned while building it.

New Domain

I launched this website on liu.design. I wanted to stop using bobliu.io mainly because the .io domains became a part of the UK government’s modern-day colonialism^[1]. I had been eyeing this domain for a while and was lucky no one grabbed it before I did.

bobliu.io now redirects to this site. I plan to keep the previous domain for a little longer and wait for the search engines to catch up.

Design More, Write More

I rewrote about my past projects when moving them to this site. It’s always fun to look back at my almost-binary mindset and think about how differently I approach things now. I hope you’ll have fun reading them too.

My previous design portfolio didn’t have a structure to capture my random thoughts that are yet to be full-blown projects. So, as you read this post, I have also committed myself to write a blog. I hope to write about design strategies I experimented with, whether they worked or didn’t, and occasionally share life updates.

Eleventy

If you’re a designer, you probably are no stranger to portfolios sites forever under construction. To me, this wasn’t the first time I went from writing about a new project to rebuilding the entire website.

I like static site generators and have used several of them to build my portfolio since 2017. bobliu.io was built with a Vue-based static site generator called Gridsome. I liked the framework a lot but had to move away from it because the project’s development quietly ended in 2020.

Last screenshot of bobliu.io before it went offline

This site was built from scratch with Eleventy. I like that Eleventy:

has an intuitive file structure
supports any template language
builds in no time for a site of this size

My biggest pet peeve with static site generators is having to fiddle with file paths, and Eleventy was no exception to that. To customize the images displayed on this website, I had to create shortcodes and define where images live in the project folder. Figuring out the following line alone took my whole Saturday morning:

let imageSrc = `${path.dirname(this.page.inputPath)}/${src}`;

(Looks like Eleventy is working on an “almost-zero-configuration” image plugin^[2] with the upcoming 3.0 release.)

Other than that, Eleventy mostly felt flexible and forgiving, and it didn’t get in the way too much. I do wish Eleventy’s documentation was more detailed and included examples, though I found answers to most of my questions from the amazing blog articles others wrote.

Get in Touch

Together with the new domain, I also made myself a new email: bob@liu.design. Drop me a line! You can also find me on social media linked from the bottom of this page. Thanks again for stopping by.