Bob Liu

Library Signage System

2025-12-01T00:00:00Z

In 2025, my team partnered with the Collection Services department at the University of Arizona Libraries to redesign the library’s collection signage system. We brought creative problem-solving to the interesting challenge of creating a design system for physical signs.

Library signs are unhelpful, if not confusing

As college students increasingly access information in digital formats, locating physical materials in the library has become an intimidating task. The University of Arizona Libraries, which are academic libraries at a public institution, need new signs to solve this problem.

Before starting the project, our team interviewed undergraduate and graduate students, library staff, and student shelvers. Each shared their different perspective of using or working at the library.

Signs are outdated, complicated, and neglected

Wayfinding signs, door signs, and collection signs at the library are managed by different teams. Starting in the beginning of the project, the teams decided to focus on the collection signs.

Many collection signs in the libraries are old, with some being suspected to have been printed shortly after the library first opened in the 1970s. Shelves and containers of different sizes are used for library materials, while there isn’t a consistent standard or workflow for producing the signs.

Legacy microfiche signs

Legacy poster signs

Most books are placed on stacks that only had a sign that indicates call number ranges. This index card-sized sign is placed in a “flag” that sticks out on the top of either end of a stack, so we called it a “flag sign.” We realized the flag is too tall (about 6 ½ feet or 2m) to view from a wheelchair, making the flag sign inaccessible. Additionally, other than the call numbers, it doesn’t indicate what subject the stack holds.

Most library stacks only had a sign that indicates call numbers

Not everyone knows how to use a library

Many participants the team interviewed don’t know how to use the library. Out of the ten undergraduate and graduate students we interviewed—not including student shelvers—only three have checked out a book from the library.

The University of Arizona Libraries uses the Library of Congress Classification system. Only one participant knew the term “call numbers,” while many others think the numbers are simply dates. All participants think call numbers are confusing since they don’t explicitly say the subject.

Collections shift often

There are frequent changes in space and constructions in the University of Arizona Libraries that causes collections to shift. Each time the books are moved, signage on the stacks needs to be updated too. This adds burden to the library’s Print & Collaborative Collection Initiatives Unit, the team that manages the stacks.

Cost awareness

In the planning phase of this project, I spoke with various stakeholders at the library including the leadership. Budget was a common theme for these conversations, especially when people picture any collection shifts in a bigger scope.

Goal

We want to design signs for regular stacks, which include the majority of books at the library, and the library’s curated collections.

We want a signage system that:

makes browsing more intuitive
makes it easier to update collection signage
is cost efficient

To meet our budget limitations for the signage system, I also designed with the following restrictions:

Use common office supplies.
For installation, use easily accessible tools instead of specialized equipment.

The design

I created two types of signs. Both signs are installed on both ends of each stack (“stack-ends”):

Eye-level signs: printed on US letter-size papers (8.5 × 11 inch or 216 × 279mm) and installed at 48 inches or 1.2m for the lower edge.
Flag signs: printed on index card papers (3 × 5 inches or 76 × 127mm) and inserted in the card holders near the top of the stack-end.

Editing & printing

The Print & Collaborative Collection Initiatives Unit team that manages the stacks has been editing existing signs in Microsoft Word and printing them using a black & white printer. To minimize disruptions to their day-to-day work and avoid introducing new tools, I created a new but familiar workflow for printing the signs.

I created prototypes for the templates using Figma but finalized them in Google Docs. This allows Collection Services members to edit call numbers, subjects, and collection names in a tool they know well.

Editing the sign in Google Docs

I created a two-step process for printing the signs. My team, the UX team at the library, have access to a color printer, so we batch-print the color frames. Then, we hand off to the Print & Collaborative Collection Initiatives team so they can layer the actual content on top of the frame using a black and white printer. This reduced the stress of adopting a new setup, and printing less with a color printer helped save cost.

Printed eye-level sign and frame for regular stacks

Printed eye-level sign and frame for curated collections

Printed flag signs and frames for regular stacks

Printed flag signs and frames for curated collections

The flag signs are printed in groups of three using the Avery #5388 index card template. This template has perforated lines that makes separating easy.

Installing

I consulted with the university’s sign shop staff and learned about the accessibility requirements for the types of signs I designed. I learned that the eye-level sign needs to be installed at 48 inches or 1.2m for its lower edge. Also, to my surprise, the sign shop doesn’t have a fast and easy way to install the eye-level signs—they recommended using a measuring tape.

Since we need to install hundreds of signs during a collection shift, we need to find a way to speed up the process. I worked with Arshia Amin, our student assistant, to design a cost-efficient tool that serves as mounting guide. We combined a mailing tube that measures 48 inches long with a 3D-printed piece that sits on one end of the tool.

Custom-designed mounting guide tool

Lining up a sign using the guide tool

To install an eye-level sign, first put double-sided on all four corners of a printed sign. Then, line up the mailing tube with the edge of a stack-end. Finally, line up the sign with the corner on the 3D-printed piece, and press firmly to attach the sign.

Result

Redesigned signs on the Education stacks

My role

Throughout this project, I:

designed the signage templates using Figma and Google Docs
created the printing workflow and documentation
partnered with library staff to interview library users and staff
partnered with library staff to test prototypes through usability testing
partnered with UX Student Assistants to create the mounting guide tool
partnered with UX Student Assistants to install signs for the pilot project

UX Manager’s 6 Tips to Make Your Portfolio Stand Out

2025-01-03T00:00:00Z

Over the last five years, I mentored twelve students and early-career UX designers. As they prepared their professional portfolio for the job search, many of them asked the same questions:

How many projects should I include in my portfolio?
What if I only have class/side projects?
What tool should I use to build my website?

I had some answers as I reviewed candidates’ portfolios when hiring for positions on my team. Here are my six quick tips for your work-in-progress UX portfolio:

Tip #1: Engage your audience in 10 seconds

As UX practitioners, one of the first things we learned is to design with our target audience in mind. When creating a UX portfolio, our primary audience should be potential employers who only have ten seconds. That’s how much time they might spend on each candidate’s portfolio when reviewing hundreds of applications.

However, don’t feel discouraged! The hiring team coming to your portfolio already means success. Now is a good time to use your UX wisdom to make sure your site visitors can find the who, what, and why in 10 seconds:

Who you are
What you’ve achieved in the past
Why you’re a good fit for this job

Your site should have simple and clear navigation that instantly takes the visitor to a page with all your projects and another page about yourself. Your hobbies, such as side projects, illustrations, and photographs, deserve a place on your website, but they shouldn’t play a leading role. They can wait until job hunting is no longer your priority.

Next, take some time to name the case studies that you’re listing on the projects page. In most cases, your portfolio is a one-size-fits-all thing for all jobs you’re applying for, which means most potential employers come to your website with no context about the products you designed before. So, you should avoid naming your case study after the product. Instead, use the motivation, purpose, or outcome of the project.

For example, imagine that I redesigned a library space management platform called CalendLib and the goal was to improve the visitor’s experience of reserving a library meeting room. It’d be a missed opportunity if I called the project “CalendLib,” because 9 out of 10 people reading my portfolio wouldn’t know what that is, so they wouldn’t even click on the project. Instead, I’d call it “Library room reservation system” or “Redesigning the library room reservation experience.”

Tip #2: You might not need a fancy setup

You may have heard this: your portfolio is the first project people will see. Yes, you should put some thought into designing your portfolio, but don’t overthink it.

Before trying to throw something fancy on your website, ask yourself: does it answer the who, what, and why? Again, they are:

Who you are
What you’ve achieved in the past
Why you’re a good fit for this job

Let’s say you want to design a cool interaction on your portfolio website that hides and reveals some of its menu items. If you are applying for front-end engineer or animation designer positions, great! That shows some relevant skills. But if you’re applying for UX researcher positions, it probably won’t help much.

Portfolio built with Notion. Credit: Riley Zuckert

For most UX jobs, a simple blog setup that lets you add images and text should work just fine. If you only have limited time, spend more of it crafting your case studies instead of building a website from scratch. Here are two platforms I recommended to my mentees:

Notion: document sharing tool that lets you publish pages on the internet. You have the freedom to add images, videos, code, spreadsheets, and even embeds on any page. Free Plus plan for students.
Cargo: try this site builder if you want more customization options. It has a simple WYSIWYG (what you see is what you get) editor that has plenty of typesetting and styling options. You can also build your own site structure and add a custom domain. Subscribe to their weekly newsletter to get inspirations.

Tip #3: Focus on quality, not quantity

How many projects should you include? It depends on what jobs you’re applying for, but definitely not the more, the merrier.

Remember, your portfolio needs to answer why you’re a good fit for this job. If you’re applying for more than one type of job, consider including at least one project to represent each. For example, if you’re applying for both product designer and UX researcher positions, you may want to have one case study about applying a design system and another about conducting user interviews to understand pain points.

Class projects are OK to include in your portfolio. Some mentees didn’t feel confident doing so because class projects are often based on an imaginary scenario and not actually implemented. However, for those who just got started in UX, this might be the only option. Class projects aren’t necessarily weak ones, as they’re often good evidence of your collaboration skills and attention to detail. More on this next.

Tip #4: Tell a story of where things went wrong

When writing about a project, make sure you’re telling a good story — and it doesn’t always need a happy ending. Let’s admit it: UX work is messy. There’s always something going wrong, and less than one in ten projects comes out exactly as we expected. However, too often I’ve seen case studies where everything went like strawberry cotton candy from start to finish. In these case studies, the stakeholder never asked difficult questions, everyone did their job right, and the design had no issues whatsoever when tested with the user.

That’s a shame because the skipped parts are often the most interesting ones. When reading case studies in candidates’ portfolios, I always find myself enjoying the part where designers tried to explain mysteries. Why was a project challenging, and how come no one else did it right? If a project failed, why did it fail, and how would the designer handle it differently? And if the designer weren’t part of it from start to finish, what previous mistakes did they correct, and what happened after they left?

Have the courage to show your audience what’s under the rug — if the client or employer lets you.

Tip #5: Show your work as part of a team

UX work is never done alone. We’re always depending on someone: may it be the stakeholder, user, engineer, or someone in the leadership. Therefore, when hiring for a UX position, I always look for signs of collaboration in the candidates’ portfolios. These are good evidence that they could fit a UX position.

I read some case studies in which one person appears to have done all the work. Granted that it’s possible to have UX teams of one, the person would still need to seek support or approval from someone who tasked them with the project, and in the meantime, validate the ideas with the users.

Communications, negotiation, decision-making, and compromises are always happening, and you should document them in your case study. Also make sure to clearly indicate your roles for each project.

So, what if you’re writing about a class project? Collaboration can still happen! If you assigned tasks to others, kept track of deadlines, or presented your deliverables, you can focus on your project management skills. If you wrote the code or partnered with someone who did it, focus on the design-development handoff and explain how you went back and forth to get the details right.

Tip #6: Zoom in on your wireframes

When writing a case study, it may be tempting to throw a giant Figma embed or screenshot that shows lots of components, frames, and prototype spaghetti. Some people think it’s a cool way to show off their design skills. On the other side, as the reader of the case studies, I often feel overwhelmed and don’t know where to look.

As the storyteller, we can and should narrate our design by zooming in on where the reader should pay attention. Maybe it’s a button label that went through multiple iterations, an input field that checks all boxes for accessibility, a search bar that did well in usability testing, or a set of icons that blends into the design system. Try to extract small details from your big Figma file and tell the story behind them. No matter how big or small your design is, there’s always an opportunity to show your attention to detail.

Don’t do this: show your spider web Figma spaghetti (screenshot from my work)

Do this: zoom into UI elements that are relevant to the context. Credit: Rachel Schmidt

Now that you have some good stories on your portfolio website, you should still create a slide deck when presenting at a job interview. A slide deck shows that you have presented to stakeholders in a professional setup and that you care about the job. It also helps you structure your presentation better than a portfolio article.

Wrapping up

Best of luck putting together your portfolio! If you need more specific advice, check out UX@UA’s free mentorship program.

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:

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

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

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.

The UX Cookbook

2022-02-01T00:00:00Z

The UX Cookbook is a collection of guides for UX research, design, and strategy. The UX team at University of Arizona Libraries started the project in 2020 and made it open and free to anyone in the UX community.

The project started as the Libraries’ UX team’s internal design and user research documentation. The loosely-organized documentation was used to train new team members and provide consultation for staff and faculty at the University of Arizona. In 2020, the Libraries’ UX team began restructuring the documentation and made it open to the public.

I designed The UX Cookbook’s branding and structure. I also wrote and edited guides.

Goal

When members of the Libraries’ UX team collaborated and consulted with faculty and staff members at the University of Arizona, we realized common user research and design methods, such as usability testing, card sorting, and prototyping, sounded intimidating to those who weren’t familiar.

The team hoped to create a set of UX documentation that simplifies UX jargon and helps people easily apply UX methods in their work. We developed content based on our existing internal documentation before making it public. We pictured the target audience being those who:

Work in higher-ed, government, or non-profit organizations
Want to apply UX methods in their work
Usually don’t have dedicated UX team members

Because of this, we wanted the documentation to be fun, approachable, and easy to get started with.

The “recipes”

I proposed calling the documentation a cookbook so its articles become recipes. To spice it up even more, each recipe can include all or some of the following sections:

Nutrition profile: a short description of the method
Cooking time: how long the method takes
Perfect for: what the method does
Ingredients: what tools are needed
Prep work: what to prepare before starting
Directions: step-by-step instructions
Plating: how to present research findings or design artifacts
Gallery: a showcase of finished work from the UX community

To validate the feasibility of this structure, we started a crowdsourced recipe-drafting project. Members of the Libraries’ UX team, along with collaborators from other parts of the University of Arizona, contributed recipes about different UX methods in three categories: user research, design, and content strategy. After a few iterations, we agreed on a structure that covers the must-haves in a UX guide.

I selected Notion as the content management system for The UX Cookbook. This was largely because contributors who did editorial work in Notion and liked its flexible structure that suits text-heavy content. The contributors also liked Notion’s ease of maintenance as a document-sharing platform.

Notion natively supports publishing any document as a live webpage, but the page’s URL isn’t customizable. I used Super to publish the pages with friendly URLs and add the pages to our custom domain.

Brand

I designed the UX Cookbook’s brand two years after its launch. I was inspired by a Chinese snack called tánghúlu (糖葫芦, “sugar bottle gourd”), which are hawthorn berries covered in sugar and put on a stick. It’s a popular childhood snack in northern China and often consumed around Lunar New Year because its auspicious meaning.

I created a monochrome color palette based on tánghúlu’s color, red. Then, based on the berries’ shape, I designed circular illustrations of a variety of UI elements, such as radio buttons, checkboxes, calendar days, and hearts for like. These shapes became building blocks of the logo and recipe covers’ design.

Each recipe cover includes the recipe’s name on the left 2/3 of a rectangle. In the remaining space, I did a creative challenge by combining 2-3 circular UI elements to visualize what the UX method does.

Result

Shortly after its launch, The UX Cookbook became a free UX reference loved and shared by many. Every day, the website records visitors from all continents of the world (except Antarctica).

The UX team at the University of Arizona Libraries actively maintains the documentation and adds new recipes.

Now, The UX Cookbook is a popular open educational resource that instructors use in classrooms. It is also frequently shared by folks in the government sector and higher education through mailing lists and intranets.

UArizona Library Hours

2020-03-01T00:00:00Z

The University of Arizona Libraries has six locations on campus that each operates during different hours. The hours change throughout the year, and can be different depending on the visitor’s affiliation to the university. In 2020, the Libraries launched a new library hours module to address the limitations with its previous library hours page.

I led the project’s UX design and research work.

Main Library’s door sign

Research with users

I designed exploratory user research to learn about pain points with the previous library hours page, then worked with other members of the Libraries’ UX team to conduct interviews with 21 students, faculty, and staff at the university.

Tiny Café, lightweight user research setup at the Main Library

Pain point 1: complicated access

“The website is confusing … I’d rather walk to the library and try to get in. I can at least read the sign on the door.” — Participant #4, undergraduate student

Many library locations operate in two schedules because they provide after-hours access to university affiliates with a CatCard (campus ID). Among all locations, the Health Sciences Library has the most complicated access because only those considered Health Sciences Affiliates can access the building after hours, but not everyone with a CatCard is considered a Health Sciences Affiliate.

Pain point 2: confusing language

“On Sunday, the hours are ‘24 hours’ and ‘opens at 9.’ Aren’t they contradicting each other?” — Participant #11, graduate student

Almost all participants said hours on the library website were confusing, inaccurate, or misleading. For example, on any Sunday in the Fall 2019 semester, the Main Library is open to the public 9am-9pm. However, the building provides after-hours access from 9pm-9am everyday except Saturday, so CatCard holders can enter the building anytime starting 9pm on Sunday through 1am on the following Saturday.

Because of this, the previous library hours page displayed Sunday hours as “24 hours, opens at 9:00am” which confused many participants.

Pain point 3: not mobile-friendly

Moreover, the previous library hours page dates back to 2009. It had an outdated look and was not designed for mobile, which became another barrier for those who check hours on the phone.

Design studio with stakeholders

Our team interviewed the stakeholders from the Libraries’ Access and Information Services team to gather project requirements and success criteria. While working on this project, I created a design activity called Design Studio, which was an effective way of getting stakeholder input from an early stage of the design process.

Design Studio is a one- to two-hour freeform activity where stakeholders, designers, UX researchers, and developers gather in a room. Each contributor gets a sharpie and a couple of index cards then follows the same prompt: “In 3-5 minutes, sketch or jot down features you’d like to see in the new product or service.”

During the Design Studio activity for the library hours project, project team members visualized the following features:

A library hours page with weekly and monthly views
An hours widget on the Libraries’ homepage
Clear helper text that explains after-hour access for affiliates

At the end of the activity, I captured, organized, and grouped the responses to summarize top features, then worked with the project manager to draft requirements to guide the design process.

Design & validation

I created wireframes based on input received in the Design Studio. Many sketches contributed by stakeholders hinted at a similar layout, which includes seven squares arranged horizontally to represent a week. I constructed the desktop wireframes based on this layout.

I led the Libraries’ transition to Figma as its primary design and handoff tool. As part of the transition, I built a component library for the Libraries’ Drupal 7-based content management system used at that time. I started this project’s design with the existing component library and added project-specific components and patterns along the way

Wireframes

Component library

As I had learned from preliminary research, microcopy design was one of the most challenging parts of this project. Specifically:

how to indicate that a location is open beyond midnight on a day, and
how to indicate who is eligible for after-hours access

Because of this, I made several versions of the prototype with different microcopy design with which our team conducted usability and preference testing. Our student assistant, America Curl, also discovered a handy roaming testing setup — she put sticky notes with different microcopy designs on a small whiteboard, then walked around in the library lobby and elsewhere on campus asking random students for feedback. In return, she gave them snacks and beverages.

America Curl with her roaming microcopy testing setup

After rounds of testing, we found “stays open” was the pattern most people understood. On a weekly calendar that starts on Sunday, the hours can be displayed as “Opens at 9am (stays open)” on Sunday, “24 hours” on Monday through Thursday, and “24 hours (closes at 1am)” on Friday.

I also added an audience switcher in the UI to indicate different hours for different user groups. In a later iteration, our team also added helper text to the audience switcher to clarify eligibility. Usability testing showed 88% of participants understood who are eligible for after-hours access and what the extended hours are.

Revised microcopy

Audience switcher for indicating different hour for different user groups

Result

The new library hours module was launched in Spring 2020. Shortly after the launch, most library buildings were closed due to the COVID-19 pandemic. However, the new library hours page received very positive feedback later in 2020 and 2021.

Web analytics data in 2021 show the new library hours page had a 60% bounce rate, up from 48% in the previous version. While lower bounce rates are often desirable, the library hours pages are considered an exception — we want the user to come to the page, get the information they need, then leave. So, a higher bounce rate means less users had to navigate to other pages on the Libraries’ website to find the hours.

Our project team decided to open-source the project so more libraries can use our solution to improve their user experience. Below is the same design and source code implemented by the Indiana University Bloomington Libraries.

Indiana University Bloomington’s Libraries & Hours page using the same design

UX@UA Brand Identity

2019-10-01T00:00:00Z

UX@UA is the largest community for UX professionals and learners in Arizona. The community is based at the University of Arizona (UA) and hosts regular in-person events in Tucson, as well as virtual events and consultation services online. The community was founded in 2018, and as of 2023, over 1,400 members joined the community from all over the world through events and social media channels.

In 2019, I became an organizer of UX@UA and was invited to design the community’s branding.

Goal

The community’s organizers hoped to see a versatile branding that fits various use cases such as event signage, social media posts, slide decks, and websites. The brand elements should be familiar to those affiliated with the University of Arizona, and instantly recognizable for event attendees and social media followers.

In addition to the digital brand assets, the organizers also wanted to use the new branding to produce marketing swags to give away at in-person events.

Brand research

I surveyed UX@UA members on Slack to research the identity of the community. Then I worked with the other organizers and outlined the community’s brand voice, which impacts not just the branding but also the way the organizers communicate with members:

Cheerful, but not silly
Organized, but not retro
Experimental, but not rebellious
Educational, but not scholarly

We also gathered adjectives that describe and don’t describe UX@UA’s voice. People think the community is welcoming, active, colorful, resourceful, collaborative, and clear. They think words like dense, wordy, scattered, and jumbled don’t describe its voice.

Design

Because of UX@UA’s affiliation with the University of Arizona, I chose the two primary colors (Arizona Red and Arizona Blue) from the university’s brand, and paired them with an accent color (Sky).

The subject of the logo are four letters in the community’s name. The @ sign was positioned in a playful way to break the alignment of the letters, leaving an impression that matches the community’s brand voice. All characters use UA’s brand typeface at that time, Milo.

The characters in the logo can be arranged in two ways: wide and square. The wide logo are used in banners, slides, or large printed materials. The square logo fits social media profiles and can be adapted to create stickers, pins, or other small marketing swags.

Craft Design System

2018-04-01T00:00:00Z

Craft is a web design system created for the State of Minnesota Department of Human Services. As the state government’s first web design system, Craft’s name came from its five design principles: consistent, reusable, accessible, familiar and trustworthy.

I performed visual design for the components, developed live prototypes using React, and conducted research with stakeholders and end users.

Goal

In 2017, the State of Minnesota Department of Human Services (DHS) started its Systems Modernization project, which aims to rebuild online public service platforms with newer web technology.

Style governance became a challenge as the project teams set on a journey to build the new platforms. Developers chose from several front-end frameworks, and without a consistent design standard, the style, visual design, and accessibility differed from project to project.

As a member of one of the project teams, I wanted to build a library of usable and accessible components that match the State’s brand, voice, and tone. In the meantime, I hoped that the component library is shared with the other modernization projects for a consistent user and developer experience. So, I teamed up with contributors from other projects, including designers, developers, and marketers, and started the collaborative project to build Craft.

Colors & typography

I used the State of Minnesota’s 2017 brand guide for printed materials as my visual design reference. First off, I created a color palette in which most colors meet WCAG AA color contrast when paired with black or white foreground text.

Following the marketing advisors’ guidance, I selected Source Sans Pro as Craft’s default typeface for headings and Open Sans for body copy. Both are open-source fonts served by Google Fonts.

Components & patterns

Craft was designed to be a system that streamlines both design and development processes. From day one, each component was designed in Sketch and developed in a React framework.

We hoped developers using other front-end frameworks to also have access to Craft components’ style, behavior, and interaction without building from scratch. So, the team created a fallback option using plain HTML/CSS and jQuery.

Following the Atomic design methodology, I first designed basic components, then used them to assemble common UI patterns in government web applications. Below are some examples.

Buttons

<h4>Primary buttons</h4>
<Button>Blue</Button>
<Button type="green">Green</Button>
<Button type="red">Red</Button>

<h4>Outline buttons</h4>
<Button type="outline">Blue</Button>
<Button type="red outline">Red</Button>
<Button type="dark">Dark</Button>
<Button type="light" class="bg-dark">Light</Button>

<h4>Inactive button</h4>
<Button type="inactive">Inactive</Button>

We used the styled-components library to package style variations with the component. For example, the developer can easily apply styles for a Button component by adding classes such as type="outline" and type="dark".

I also adjusted the color of each button’s three states to ensure the color contrast meets or exceeds WCAG AA.

Form validation

Government websites tend to leave an impression of being unusable and inaccesssible, and webforms often take the blame. The Craft Design System aims to improve the usability in government webforms starting with displaying helpful error messages.

The Social Security number field was one of the common fields in the State’s webforms. It was also one of the trickiest when it comes to form validation, since formatting and error prompts were different by platform.

Craft comes with webform patterns that include the Social Security number field. Using one line of code, the developer can insert the form field combined with its auto-formatting and validation features.

<FormField type="ssn" />

Special patterns

Craft includes patterns unique to the State of Minnesota’s web platforms. For example, many webforms used by county and state workers include a question prompting eligible or impacted counties.

Minnesota has 87 counties, and the question was usually accompanied by 87 checkboxes, which was overwhelming, inaccessible, and painful to use.

I designed a special pattern called label box to solve this issue. It comes with a single field with the 87 counties’ names built in. Once the user starts typing the name of a county, matching results show up in a list that follows the curser. The user can then navigate with the mouse or keyboard or hit enter to select the first result in the list.

<FormField type="county" />

Similarly, the pattern for selecting counties is a part of the FormField component and can be added to a webform with one line of code.

The label box pattern may also be customized to support other input values.

Common webforms

In addition to individual form fields, Craft has a FormModule that includes common combinations of form fields.

For example, the address form is one of the most frequently-used webform patterns while also laborious to implement. With plain HTML, just the state select menu alone has more than fifty lines of code. Users reported the form had inconsistent validation on different platforms.

<!-- Address form: plain HTML -->

<div class="form-address">
  <label for="add1">Address line 1</label>
  <input id="add1" type="text" class="col-2x required" />
  <label for="add2">Address line 2</label>
  <input id="add2" type="text" class="col-2x" />
  <label for="city">City</label>
  <input id="city" type="text" class="required" />
  <label for="state">State</label>
  <select id="state">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    ...
  </select>
  <label for="zip">ZIP code</label>
  <input id="zip" type="text" class="required" />
</div>

Craft addresses this issue by combining the address form fields and the recommended validation pattern in one component. This approach aims to save time for developers while also improving usability for the end users with a consistent data format and error messages.

<!-- Address form: Craft -->

<FormModule type="address" />

MovieLens Movie Recommender System

2017-07-01T00:00:00Z

MovieLens is a recommendation system for movies built and maintained by GroupLens Research at the University of Minnesota. The user builds a profile by rating movies they have watched, and MovieLens generates new movie recommendations based on their rating.

I designed MovieLens’ movie card component that displays movie information and prompts rating, conducted user research, and developed a prototype in the website’s Angular-based framework.

Goal

Researchers at GroupLens Research use MovieLens to collect movie rating data and train the recommendation systems. They wanted to see a website that encourages the user to rate movies, and helps the user easily find movies they watched. The previous MovieLens interface was designed to meet these needs.

Search results in the previous MovieLens design

The previous design, however, was not favored by users. 12 out of 14 active MovieLens users I interviewed did not like the previous site design. They thought the movie cards, which was a blend of text, icons, stars, and a movie poster in a small space, made pages look cluttered and confusing.

Another pain point was the previous design used differently-colored stars to indicate system predicted rating and the user’s actual rating, but users had a hard time figuring it out.

In the 2017 redesign, I focused on addressing these two pain points and keeping the card-based rating experience.

Design

The size of a movie card is approximately 176 x 320 pixels. However, it displays a large amount of information, including the movie’s poster, name, release year, genres, predicted rating, user rating, rating widget, and additional actions.

The challenge was to present dense information in a clean an intuitive way. I was inspired by belly bands (or obi in Japanese) often used in packaging of books or notebooks. The band moves up and down, covering or revealing information on the book cover.

Belly band of a Japense book

In a similar structure, I created a moving information panel for the movie card. In its default state, the panel stays on the bottom of the movie poster and displays the movie name and predicted rating.

When the user points the mouse at a movie card, the panel moves up to reveal more information, including release year, genres, predicted rating, average rating, and the rating widget. The user can then use the rating widget to add their rating.

Once the mouse leaves the movie card, the panel moves back to its original state, and the rating changes to the user’s actual rating. The user can also click on the movie poster to go to the movie details page.

Result

All 13 participants in a subsequent usability testing preferred the new MovieLens design over the previous one. Participants mentioned the new design “looks cleaner and faster,” “feels smooth,” and “is easy to understand.”

Limitations

During my time at GroupLens Research, I had only tested the movie card prototype above with desktop browsers. The design potentially had usability issues on mobile due to the animated information panel triggered by mouse hovering and UI elements with small click targets.

Another planned next step was to test and optimize the movie card design for screen readers.