Kim Luong – Portfolio

Overview

Role

Lead UI/UX designer, product design, design systems, UX writing

Context

As part of my promotion to Senior Media for the Computer Room Consultant (CRC) team, I led a capstone project focused on improving the Computer Lab Management (CLM) applications. These internal tools—including the Training Database, Lost and Found Database, IT Prob, and Knowledgebase—are essential for daily lab operations, but their fragmented and inconsistent interfaces made them difficult to use efficiently.

The Problem

The objective of this project was to research, redesign, and create a unified design system for CLM applications, streamlining workflows for both student consultants, admin, operational support, and lab managers.

Team

Joe Castillo / Project Manager

Timeline

10 weeks

Tools

Figma

Solutions
PREVIEW

Research

👩‍💻 Competitor Research

My first step was to understand the constraints of the Computer Lab Management Design Library System (DLS) and find components I can leverage. I began by cataloging interface elements such as inputs, data display, feedback, and navigation. I researched in-class examples of existing React component libraries, such as Shadcn and Tailwind UI.

💬 Interviews

I conducted user interviews with student consultants, supervisors, and admin to learn more about how they used existing CLM applications. They revealed that they learned to navigate these platforms through in-person coaching, trial & error, or did not use certain features at all.

“When I’m logging an IT issue, I sometimes avoid the search or report features because they don’t really give me the results I need. It’s faster to just scroll through the list, even if it takes longer.”
- Computer Room Consultant Trainee

“The Lost and Found database gets cluttered quickly. I usually focus only on the item, date, and location columns—everything else feels like noise and slows me down.”

- Computer Room Consultant Media Supervisor

👤 Behavioral Testing

I conducted behavioral testing by observing each user group interact with the existing CLM apps while performing real tasks, such as logging IT issues or searching the Lost and Found database. During these sessions, I noted differences in task completion times, navigation strategies, and which features were used most or overlooked, uncovering specific pain points and inefficiencies unique to each role.

Synthesis

Personas

I recognized that the applications serve distinct user groups: student consultants, admin, and IT staff. Each group interacts with the tools differently and has unique priorities:

Student Consultants are the primary day-to-day users, needing quick access to data, intuitive navigation, and minimal friction in completing tasks like logging IT issues or checking the Lost and Found database.
Admin focus on oversight and reporting, requiring clear dashboards, aggregated information, and easy management of workflows across multiple consultants.
IT Staff rely on accurate and complete problem reports and documentation to troubleshoot issues efficiently.

Information Architecture

I mapped out the structure of each CLM application to uncover redundancies, gaps, and inconsistencies in their design. I created an information architecture (IA) framework by breaking down each tool into its core functions and categorizing them into logical hierarchies.

Affinity Mapping

Based on the affinity mapping of my research, user feedback revealed key usability issues across the four applications, primarily in navigation, information presentation, and discoverability of features. These insights highlighted the need to streamline cluttered interfaces, implement consistent navigation, and improve the visual hierarchy of information to enhance the overall user experience.

Redesign

Knowledgebase

While the Knowledgebase (KB) was relatively easy to use, users noted that critical information was not always visually clear. This made it difficult to quickly scan articles for urgent details. My solution was to apply a clear visual hierarchy. I maintained the strong search functionality while using bold text, larger fonts, and strategic spacing to highlight key information within articles. I also added collapsible sections to reduce scrolling. The redesign made the KB a more reliable reference by making vital details easier to access at a glance.

IT Prob

IT Prob was the central hub for IT support tickets, but it was plagued by confusing buttons, excessive scrolling, and underused search features. Users struggled to find information quickly and found the interface frustrating. To fix this, I redesigned the page with clear, updated buttons, and reorganized tables to prioritize recent items. I also made filtering options more prominent. The redesign led to a clearer, more efficient interface and faster task completion.

Lost & Found Database

The Lost & Found DB was cluttered with too much information, making it difficult to find items quickly. My research showed that users found scrolling faster than search and filtering functions. I simplified the layout by highlighting only the most important columns (item description, location, and date) and hiding secondary information. I also improved sorting tools and added tooltips to guide users. This redesign reduced frustration and enabled faster item lookups for both students and staff.

Training Database

The Training DB lacked basic navigation support, which made moving between screens inconvenient and frustrating for new student consultants. The biggest pain point was the absence of a back button. I addressed this by adding consistent navigation elements, including a prominent back button and a clear header hierarchy. I also simplified workflows to minimize clicks and user error. This improved the overall navigation and provided a smoother onboarding experience for new hires.

Usability Testing

Validating my designs

I conducted usability testing and A/B testing to evaluate whether the new interfaces improved efficiency and clarity for consultants.

For IT Prob updates, I redesigned the split view into a threaded layout showing issues, stats, and past updates together, with edit options directly below. Testing showed consultants found information faster and felt more confident when making updates.

For Lost & Found edits, I replaced a multi-step form with a pop-up modal to keep users in context. Consultants completed edits more quickly and with fewer mistakes, since they no longer had to switch pages.

Design System

Branding

My goal for our design system was to modernize the UI for a better user experience while maintaining core functionalities. I used Shadcn components to streamline development, added subtle drop shadows and rounded elements for a contemporary look, and used a bright blue to highlight key interactions while incorporating the existing UC Davis colors.

💎 Component Library

I designed my project to scale it as a reusable component for the Design Library System for teams across the Computer Lab Management to adopt in custom solutions. I detailed development notes and handed-off an organized final Figma file to allow the engineer to jump in and implement without needing to ask for much input from design.