Partnership with Uline
Evaluation and Redesign of Uline's Settings Page
Original Page
Redesigned Page
Overview
By leveraging research, testing, and iterative prototyping, my team and I were able to redesign Uline's settings page to offer a more efficient experience, making it faster and simpler for users to manage their account settings while staying true to Uline’s established brand identity.
Role
UX Designer & Researcher
Timeline
January - May 2024
Project Type
E-Commerce
UX Research
Brand Design
UI/UX
Key Skills
Prototyping
Wireframing
Design Systems
Brand Design
First Steps
Understanding the Problem Space
Background
The Brand
Uline is the leading distributor of shipping, industrial and packaging materials to businesses throughout the US.
Our Task
Uline asked us to "redesign their current Settings page using design thinking". Since this a vague problem statement, we knew we needed to narrow down and identify metrics of improvement.
User Group
Employees who make purchases through Uline on behalf of large businesses.
Current State
Key Features
Radio buttons
Hovering on "?" icons presents a pop-up with additional information
Single column requires scrolling
Our sponsors tasked us with improving the current settings page on Uline.com.
Evaluation
Research and Identify Opportunities
Competitive Analysis
To identify industry standards and trends, we conducted a competitive analysis of Uline’s top competitors. The competitors were selected based on a list provided by Uline’s team, ensuring our evaluation focused on direct market leaders.
Zoro Industrial
Grainger
McMaster-Carr
HD Supply
Global Industrial
Webstaurant Store
We analyzed each Settings page based on a specific set of criteria
HD Supply (left) and Zoro (right) settings page layouts
Key Findings from Competitors Settings Pages:
Vertical sidebar for easy navigation of settings
Settings were grouped into clear categories such as "Account" and "Orders."
Visual distinction by using boxed layouts for different categories
Heuristic Analysis
We wanted to discover successes and pain points of the page. To complete this, we evaluated the page using Nielson's 10 usability heuristics.
Successes
Additional information is available if the user is confused about the use of some settings
Visual indicators display a notification when a user changes any of the settings.
Design is very minimal. There is nothing on the extra on the page that distracts the user or does not have a specific purpose.
Painpoints
Some information about the setting is written out next to it while some information has to be accessed through hovering over an info icon.
While the system notifies the user when settings are changed, there isn’t a consistent way of notifying the user. The system uses a popup when the user changes certain settings, while only using a text notification for other settings.
In most cases, the description of the option is immediately followed by parentheses or a dash (-), but sometimes the description is displayed by hovering or clicking over the question mark (?) icon. This seems to be functionally inconsistent.
Card Sorting Activity
Discover how users would group and categorize certain settings together to gain insights into mental models and preferences to assist in more intuitive designs
Findings
Emerging Categories: Users tended to group settings by functional similarities, creating categories like "Payment/Checkout," "Account Management," "Notifications," and "Purchase Orders."
Need for Context: Some settings lacked clarity, highlighting the need for concise descriptions to help users understand their purpose.
Design
Developing Redesign Suggestions
How might we use our findings to create a high-fidelity prototype that addresses user needs and improves on existing functionality?
Low-fidelity wireframing
Mid-fidelity
We took note of the most effective features from low-fi's and initial testing. A subset of our team collaborated to generate various frames, exploring the range of possibilities.
Goals throughout this process were:
Reduce scrolling
Stay consistent with Uline’s design system and minimalist UI values
Taking inspiration and UI elements from competitive analysis
High-fidelity
We received sponsor feedback (click here) to help guide our final design. We created interactive high-fidelity prototypes to present our final redesign.
Key Changes
Using boxes to visually separate different settings throughout columns
Columns help reduce amount of scrolling
Grouping settings into categories for easy navigation
Toggles instead of radio buttons to save space and look more visually pleasing
Editing the copy on some settings to provide users with more context
Fixing design inconsistencies
The back button on this page was inconsistent with other Uline webpages
Efficiency Testing
We completed testing to compare our redesign with the current site by timing how long it takes to complete certain tasks such as:
Enabling and disabling certain settings
Updating user's phone number
Looking for more information on a setting
Set invoice alerts to appear 10 days after purchase
Total average time to complete tasks
Original Page
= 29.83 seconds
Redesign
= 18.42 seconds
Our redesign reduced time spent on tasks by 38.25%*
*Data is based on 10 usability tests conducted with users unfamiliar with the site
Hand-off to Uline's UX Team
After completing testing, we presented our final redesign and research results to Uline's team and our peers. View our presentation here.
Reflection
Reflecting on my experience working with the design team at Uline, this project highlighted the importance of balancing usability with brand consistency. Furthermore, it showed me how even small design adjustments can significantly improve user efficiency and satisfaction.
Working alongside Uline’s team and presenting our findings strengthened my confidence in conducting and communicating design work. This experience has refined my design skills and reinforced my commitment to creating intuitive, efficient, and impactful digital experiences.
Collaborating with my team in developing high-fidelity prototypes in Figma further enhanced my skills in rapid iteration and incorporating feedback effectively.
