Uline webpage
redesign
ui redesign
project info
project team
9 ux undergrad students
role
UI Designer, Team Lead
duration
January 2024 - May 2024
tools
Figma
project overview
Uline is the leading distributor of shipping, industrial and packaging materials to businesses throughout North America. In collaboration with Purdue UX, Uline asked our student team to redesign their Settings page. The page had been created for functionality and had not been thought about from a design perspective.
Redesign Uline's Settings page using design thinking
project goal
Employees who make purchases through Uline on behalf of large businesses
user group
-
Competitive analysis of competitor's Settings pages
-
High-fidelity interactive prototype of the team's redesign suggestions
final deliverables
milestone 1
How might we gain a foundational understanding of core use cases and stakeholders?
click analytics
Our sponsors were able to provide us with click analytics of the Settings page. This data outlines which buttons on the page are clicked the most, along with total page visits. There was no correlation between location and click rate.
competitive analysis
In order to gain insight to how other companies structured their Settings pages, we conducted a competitive analysis. Our sponsors provided us with a list of their competitors, including Grainger, McMaster-Carr, HD Supply, Global Industrial, and more.
We analyzed each Settings page based on a specific set of criteria. Some aspects we looked at included the layout of the page, and the presence specific settings like text message notifications.
Findings
-
Overall, almost all competitors followed the same page layout (different from Uline’s)
-
Vertical sidebar that contains the main setting categories
-
-
All of the pages grouped settings into categories
-
Many pages used boxes to create visual distinction between settings that fell into different categories
milestone 2
How might we evaluate Uline’s current Settings page? Does it currently align with user wants and needs?
heuristic analysis
In order to analyze the usability of the page, the team conducted a heuristic analysis. We wanted to discover successes and pain points of the page and its design, enabling us to identify areas of improvement. To complete this, we evaluated the page used Nielson's 10 usability heuristics.
Findings
-
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
-
Very minimal design, nothing unnecessary that distracts the user
-
-
Pain Points
-
No organization of settings
-
Radio buttons may be perceived as visually unappealing
-
card sorting
We had found evidence from both our competitive and heuristic analysis indicating that grouping the settings may be beneficial. The team wanted to discover how users would prefer to have the settings grouped and categorized, so we conducted a card sorting activity.
Unfortunately, we did not have access to our direct users so we conducted this activity with other college design students.
Participants grouped each setting on the page into categories they came up with, and then regrouped them into given categories. A photos from this activity can be seen below.
Findings
-
Categories based on functional similarity were often grouped together
-
For example, "Payment/Checkout", "Account Management", "Purchase Orders", and "Notifications"
-
-
Participants lacked context for some of the settings
milestone 3
How might we use our findings, along with design thinking, to redesign the current page for a better and more efficient user experience?
low-fidelity wireframing
After gathering our research, the team felt ready to start compiling our design ideas together. Each team member created a low-fidelity wireframe (9 total). We then discussed our favorite aspects and how we could combine them into one wireframe, which can be seen below.
mid-fidelity wireframing
Once the team had agreed on a design to move forward with, we began wireframing in Figma. Our mid-fi can be seen below.
Sponsor Feedback
-
Provide additional context on each setting
-
Increase the font size of the main category heading so it shows the user different categories
-
Bold the headings within the boxes so they stand out
-
Previous testing with users proved that they preferred the current location for Manage Multiple Accounts, so this added feature can be removed
-
The cards look unbalanced going from a row of 3 to two rows of 2
final redesign
Key Differences
-
Using boxes to visually separate different settings throughout columns
-
Columns help reduce amount of scroll
-
-
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
-
e.g. the back button on this page was inconsistent with other Uline webpages
-
Our team then conducted efficiency testing with some of our peers to determine if our proposed redesigned was actually more efficient than the original webpage. We found that our design reduced time spent on tasks by 38.25%.
current state
Key features to note:
-
Majority of settings use radio buttons
-
Hovering on the "?" located on some settings shows a pop up with additional information
-
Items are listed in a single column, requiring the user to scroll to view all items
1
milestone 1
2
milestone 2
3
milestone 3
4
final design
1
milestone 1
2
milestone 2
3
milestone 3
4
final design
1
milestone 1
2
milestone 2
3
milestone 3
4
final design
1
milestone 1
3
milestone 3
4
final design
2
milestone 2
limitations
1. style guide
Our team kept in line with Uline's current style guide. We use the same color scheme and maintained consistency with their other webpages.
2. access to user group
Our biggest challenge throughout this project was not having access to our user group. Due to this, we resorted to asking other design students to test with us. We also relied heavily on other forms of research like our competitive and heuristic analysis.
3. participants lacking context
As previously stated, we did not have access to our users and conducted research with design students instead. This was very helpful, but we did notice that these students lacked context on some of the settings (e.g. purchase orders) which could have affected our findings.