Bob Liu

Fifty Services, One Voice

2025-12-22T00:00:00Z

From 2021-2025, as the designer and product owner of the University of Arizona Libraries website, I led the Web Refresh project that revamped the library’s online presence.

Problem: too many websites

As of 2021, The University of Arizona Libraries system directly operated four locations:

Main Library
Weaver Science-Engineering Library
Special Collections
Health Sciences Library

These libraries lacked a single online presence. Among the various public-facing websites they operated, the first two libraries shared the same website, while the third and fourth each had a separate website. In addition, Data Cooperative, a data support services group within the library, also operates its own website.

Each website lived on a different content management system and had inconsistent branding, design, and content strategy. This created a gap when the user searches for library resources, as they often had to switch between websites. Also, the site search on one site couldn’t index content everywhere, causing findability issues.

Legacy Main Library website (2018)

Legacy Health Sciences Library website (2017)

Legacy Special Collections website (2018)

Legacy Data Cooperative website (2025)

In 2021, the library leadership sponsored the Web Refresh project, one that aims to create a unified online presence for all libraries. As a core member of the project, I led a collaboration between the libraries’ User Experience (my team), Development, Project & Portfolio Management, and Marketing & Communications teams, along with stakeholders from other departments.

Begin with a design system

In 2021, a group of designers, developers, and project managers in the University of Arizona community collaborated on Arizona Quickstart, a centrally-maintained, Drupal-based content management system that seamlessly integrates the university’s brand and web component library.

As part of the group, I contributed to the design of Arizona Quickstart’s component library, which is based on Bootstrap, and translated most elements into a design system in Figma.

Components in Arizona Quickstart's design system

Before Web Refresh, due to the fragmentation, the Libraries independently maintained several custom-developed Drupal instances for the public-facing websites. The project team saw the potential of the new campus-wide content management system and decided to build a unified website on this new platform.

Engage stakeholders through interviews and workshops

In-person workshop for designing the library homepage, May 2024

Online workshop for designing the library's technology lending service, April 2022

Throughout the project, I designed, organized, and led or co-led:

8 rounds/18 sessions of stakeholder interviews
8 design workshops
10 other UX workshops, including card sorting, journey mapping, and content planning

In total, 47 stakeholders from all eight library departments participated in the stakeholder interviews and design workshops.

The stakeholder interviews aim to understand the needs, requirements, and pain points of the departments involved in the project. They also serve as a channel to introduce the project’s background and communicate the timeline and proposed technical changes.

The design workshops utilized various design thinking, prototyping, and content strategy methods to effectively create consensus between implementors and stakeholders.

The next four sections will break down some of the methods used in these workshops.

Visualize the user journey

One of the project’s goals is to move multiple websites under one umbrella called the “multi-site.” To get there, the project team wanted to understand how users navigate within an individual element, a “sub-site,” and between these sub-sites. Some common website modules that are shared among sub-sites were also considered as part of the user journey—for example, the library hours and room reservation modules.

For each product , the team identified a group of stakeholders who ran a service, managed a team, or interacted with patrons directly. I led a journey mapping activity with 3 stakeholder groups. Each activity was uniquely crafted for the service, while all of them shared some common prompts that include:

how the user interacted with the service in the past
how stakeholders want the service operated in the future
how the user will find the service on the multi-site
what the gaps are

Journey map of the Health Sciences Library website, October 2022

Journey map of the Special Collections website, April 2023

As an example, the Health Sciences Library website was chosen as the pilot for the sub-site on a multi-site structure, even though it had always existed as a standalone site on a separate domain. Therefore, the journey mapping activity with the Health Sciences Library’s stakeholder group focused on analyzing:

who the main audiences of the website are
how the online traffic moves from and to the other library websites
which services or resources are unique to the Health Sciences library, and which are shared with other libraries

In the activity, a consensus was reached that the sub-site requires a secondary navigation pattern to differentiate content that’s specific to the sub-site. This decision was subsequently implemented as an information architecture strategy for other sub-sites.

Create information architecture from the user’s angle

The library has a sea of resources and services—and as the product owner of the library website, my vision is for it to provide the user with just the right amount of information so they can quickly reach what they need. With the majority of website content woven into layers of menus, thoughtful information architecture design builds a solid foundation for the website.

A common mistake when designing information architecture for a large organization is to create website menus that mirror the org chart, and we weren’t an exception. Each team owned a section on the website simply because it was easy to manage website content that way. However, this approach often confuses the user because they don’t know (and don’t need to know) which department owns a service or resource.

To ensure easy discovery of information on the redesigned website, our team designed the website information architecture from the user’s angle.

I partnered with the Content Strategist to create cards that include existing and future topics that are relevant to a specific service, then led card sorting workshops joined by individual groups of service and product owners. We invited the participants to represent their user, not their department, and organize content based on how the user interacts with their service.

Card sort for the Health Sciences Library website, October 2022

Card sort for the library's research support content, October 2024

For each service, we then analyzed the card sort results and created a draft menu in Optimal Workshop’s Treejack tool. Then, we invited the university’s students, faculty, and staff to participate in tree tests to validate our information architecture design.

In each tree test, the participant was asked to complete tasks relevant to a service or product in a website menu. The menu they saw includes just the page titles and no other context. The Treejack tool recorded and visualized the path each participant took, time on task, and whether they reached the correct destination. We then iterated on the menu design based on the tree test results.

Part of the Research support menu visualized in Optimal Treejack, October 2024

Results from a tree test for the Health Sciences Library sub-site menu, February 2023

Design the user interface with stakeholders and developers

I like to mindfully include stakeholders and other contributors early in the design process. I often use an approach that I call design studio, an interactive workshop where project stakeholders and implementors join the design process.

Sketching is the core of each design studio session. Each participant is asked to use a Sharpie and no more than 3 index cards to sketch the feature they’d like to see in the future product. The goal is not to create pixel-perfect designs, which the setup intentionally discourages, but to convey the concept. All sketches are then taped to a whiteboard and reviewed by all participants. Everyone votes on their favorite design, then the group ends with a moderated design critique.

Design studio for library news & events pages, February 2023

Design studio for the Special Collections website, April 2023

Throughout the Web Refresh project, the team ran 8 design studio sessions (7 in-person and 1 online via FigJam) for 7 products, including sub-sites and common modules. Service and product owners, subject matter experts, developers, and members of the leadership joined the workshops led by members of the UX team.

For me as a designer, sketches created during the design studio sessions serve as a wishlist from each participant without being too limiting. With the analysis from the design critique, I can easily find the common ground and decide the priority.

Prototype of the Health Sciences Library website, April 2023

For each product in Web Refresh, I first created low-fidelity prototypes based on sketches from the design studio, then assembled high-fidelity mockups using components and patterns within the design system. The team then used the mockups for stakeholder feedback and usability testing.

When designing page templates for the content management system, such as a collection in the Special Collections catalog, I worked with the Content Strategist to pair the design prototypes with content docs, which are spreadsheets that map elements in a design prototype to the relevant data in the technical setup, such as a text field in the content management system. The content docs served as an accurate reference for developers when they customized the content management system.

An individual collection page on the Special Collections website

A content doc that specifies details of page elements, October 2023

Strategize the content

Leading a content planning workshop for Special Collections, April 2023

Consolidating 4 websites into one means a lot of content needs to be migrated, either redesigned or as-is. In partnership with the Content Strategist, I co-led several content planning workshops with relevant stakeholder groups where content was prepared for migration. We focused on reviewing content quality and identify where addition, editing, or removal is needed. Combing through the content also helped stakeholders and project implementors visualize the user journey on the website.

Prior to the content migration, our team established a content inventory for all sub-sites. For each page in the content inventory, we document the following information:

Page ID, title, and path
Content ownership
Platform or format
Migration status
Outstanding issues

After the migration, we sustained the content inventory to ensure content on the refreshed website is always up-to-date. We also developed a search engine optimization (SEO) workflow that creates and records page meta descriptions with AI tools.

Content inventory for the Main Library, May 2023 (names hidden)

Test, “a-ha!”, iterate

Throughout the Web Refresh project, I collaborated the UX Researcher, Content Strategist, and student assistants on my team to design and conduct more than 50 user research studies, including user interviews, usability testing, and talk-back boards. The user was part of the design process from the beginning to the end.

During the project’s planning phase in April 2021, most libraries were still on a full shutdown due to the pandemic. To find research participants for the project, with the help from faculty members and librarians, I recruited students from several colleges on campus to join an online UX Participant Pool, which is an email list that includes people who voluntarily signed up to receive invitations to UX studies.

As of December 2025, my team still maintains the participant pool that includes 775 students, faculty, and staff affiliated with the University of Arizona. It continues to be an invaluable resource for improving the library’s physical and digital user experience.

Usability testing session for the footer design, July 2024

The Health Sciences Library sub-site's secondary navigation on mobile

Gathering user feedback was often the “a-ha!” moment that made the team fail and iterate quickly. For example, the secondary navigation pattern on sub-sites, one that we envisioned during a journey mapping activity for the Health Sciences Library, turned out to be a significant source of confusion for test participants. Three iterations were created, each undergoing more usability testing, and the team ultimately implemented the design that met our success rate threshold (80% average on all tasks).

Launch checklist and communications

Immediately before launching each new product, the project team followed a consistent launch checklist. This checklist outlines the implementation and communication tasks that need to be completed, spanning from weeks leading up to the launch to weeks after the launch.

Since many products were migrated from a previous version on a different domain, redirect planning is usually a high-priority task. The project team’s meticulous redirect mapping ensured that all previous URLs continue to work, even after content redesign and domain changes.

Launch checklist for the Special Collections sub-site, March 2024

In line with the Project Manager and Marketing & Communications Director, who are both members of the project team, I used a strategy to over-communicate project updates to ensure our messages don’t get buried under a pile of emails. As part of my regular communications workflow, I:

presented project updates at all-staff and department meetings
sent agenda and handout before workshops and summary after
shared timely design updates and UX research reports with stakeholders
sent reminders to workshop and research participants before the event
in addition to Figma comments, summarized design changes in the designer-developer Slack channel

Sustain the impact: answering “who’s in charge of what”

Before Web Refresh, ownership of products, services, or content was often not clear. Library staff wondered “who’s in charge,” and without a single place to find the answer, the result can be a series of questions bouncing between teams.

Working with different library departments during Web Refresh was an opportunity for me to map the ownership of each online product to its owner. With this information, I worked with other website administrators to design a Web Support workflow, where requests related to website features, maintenance, and communications are gathered in one channel and then routed to the right place.

Web Support map for the library website, December 2025 (names hidden)

Since the implementation of Web Support in 2022, the new workflow has significantly reduced the turnaround time for website requests. Additionally, the cross-team issue tracker also helps website administrators collaborating from different departments to break silos.

Result

The Web Refresh project revamped the University of Arizona Libraries’ online presence with a new platform and toolkit. In the meantime, new workflows for design-development handoff, content strategy, and website maintenance were implemented and tested to facilitate a more efficient cross-departmental collaboration.

Multi-site

Four library websites were redesigned, built, migrated, and launched under the multi-site structure:

Health Sciences Library (launched May 2023)
Main Library (launched November 2023)
Special Collections (launched April 2024)
Data Cooperative (launched December 2025)

University Libraries homepage

Health Sciences Library sub-site

Special Collections sub-site

Data Cooperative site

Common modules

Each site’s content managers have access to a set of modules that present information in a more useful, accessible, and intuitive manner.

Landing page of a menu section

Rooms & spaces page

Item in the Borrow technology catalog

Alert

Designing Future Signs for the Past

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.

Spicing Up UX Documentation

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.

Locked In, Around the Clock

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

A Brand That Pops In-Person and Online

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.

Crafting a Government 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" />

Movie Posters as a Book

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.