Reimagining Grainger’s Cutomer Set up form
Role
UX designer
Tools
Figma
Duration:
3 months (Jun 2025 - Aug 2025)
Client
Grainger
As part of my UX Design Internship at Grainger, I redesigned the Customer Setup Form by identifying privacy risks in mirrored in-branch workflows and introducing a system-driven solution to protect sensitive data and streamline customer verification.
Over 80% of data breaches are caused by human error.
In Grainger branches, employees create customer accounts on mirrored screens—where sensitive information can be unintentionally exposed during entry.
Privacy protection relied on inconsistent manual behavior.
Employees were expected to turn off the customer-facing monitor when entering sensitive information—but during my branch visit, I observed this was not consistently practiced.
This created:
High risk of exposing confidential data
Constant back-and-forth between screen on/off
No clear moment for customers to review their information
Redesign the workflow to protect sensitive data without disrupting in-person collaboration.
The solution needed to:
Maintain a smooth, conversational experience
Reduce cognitive load for employees
Standardize privacy practices across branches
A guided privacy flow that separates sensitive input from customer verification.
Measuring Success
Redesigning just one platform didn’t make much sense, so I decided to combine all three platforms instead. This way, I could pull in the best features from UM-GPT, Mi-Maizey, and the UM-Maizey, cutting out redundancy and creating a more streamlined, unified AI tool for students.
To understand the issues with the latest UM AI model (Mi-Maizey), I conducted a usability test on it with 3 current UM students.
So, how might we design something that…
Empowers students through clarity, personalization, and seamless interaction?
Putting it into perspective
Along with the issues Michael Hess pointed out, it’s just as important to look at what real U of M students are saying about the current models and what they’d like to see improved.
AI is a huge part of college life now, so it’s important to create tools that actually work for students. Check out these stats:
I also asked a few friends and current students attending UM their thoughts on the current UM AI platforms. Here’s what they said:
To view the full usability report, click here:
Issues Identified
Based off the insights I gathered from Micheal Hess, fellow UM students, and testing on the current website, I created a problem statement, and for each part of the statement, I came up with as many solutions as I could to solve that part. Below is the problem statement split into 3 main issues, and solutions to solve each of those 3 main issues in the same highlighted color.
User Flow
To effectively plan the app's structure and ensure a seamless user experience, I began by creating a detailed user flow diagram. This allowed me to map out the app's navigation and interactions, providing a clear foundation before progressing to the design of low-fidelity wireframes.
Lo-fi Wireframes
After finalizing my design decisions, I started by creating low fidelity wire frames to perfect the basic structure of the pages. During this project, I was taught how to use autolayout in Figma to make the design responsive.
Action-based response to streamline processes.
Multi-modal options to interact beyond text.
Indicate which sources are used per response, rate response, and show confidence levels.
Add personal sources and view current sources.
Chat with other UMich students and send chat strings from personal history.
I also created mobile versions of these wire frames to ensure accessibility across devices.
Usability Testing
We conducted usability testing with three users over a 30-minute session, using the Mi-Maizey prototype as the focus. Participants were given four tasks to complete, allowing us to observe their interactions and gather valuable insights.
Key Findings
2
User misinterpreted the + icon to be a read more button instead of an add source button on the sources page.
I moved the + icon outside of the box so as to not confuse the user of its purpose to add a source.
3
The user found the instructions for the learning tools unclear, particularly regarding what happens after the icon is placed in the search bar.
Added a overlay to explain to the user how the flashcard learning tool works before they use the tool.
1
The user was confused about the information displayed on the sources page and found it to be overwhelming.
Utilize a drop-down arrow for text to limit the text on screen.
Walkthrough of Final Design
Here’s the final prototype of Mi-Maizey. Press play below to watch a complete walkthrough of the app!