uline webpage redesign

WEBPAGE REDESIGN

project team

9 ux undergrad students

duration

january 2024 - may 2024

tools

Miro

Figma

contribution
overview

team leader

secondary research

competitive analysis

heuristic analysis

card sorting activity

low-fidelity wireframing

mid-fidelity wireframing

high-fidelity prototyping

OVERVIEW

background

Uline is the leading distributor of shipping, industrial and packaging materials to businesses throughout North America.

Uline asked our team to redesign their current Settings page using design thinking.

our users

Employees who make purchases through Uline on behalf of large businesses.

final deliverables

1. competitive analysis of competitor Settings pages

2. high-fidelity interactive prototype incorporating our redesign suggestions (using Figma)

the current state

Pictured above is the current state of Uline's Settings page. Some key features to note include:

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

final design preview

UNDERSTANDING THE PROBLEM SPACE

leading question

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.

Findings

No current correlation between a setting's position on the page and its click rate
Most clicked to least clicked: text messages, invoice alerts, credit cards, purchase order, duplicate PO warning, shipping confirmation email, express checkout

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:

Zoro Industrial
Grainger
McMaster-Carr

HD Supply
Global Industrial
Webstaurant Store

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. Our final competitive analysis chart can be viewed below, as well as a breakdown of our key findings.

Findings:

Overall, almost all competitors followed the same page layout (different from Uline’s)
- Vertical sidebar that contains the main setting categories, along with the pages that fall within them, an example of this can be seen below
All of the pages grouped settings into categories
- Common categories: Account, Orders
Many pages used boxes to create visual distinction between settings that fell into different categories

Screenshot of HD Supply's Settings page, displays vertical side menu

EVALUATING FUNCTIONALITY & AESTHETICS

leading question

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 activity

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. Photos from this activity can be seen below.

Card Activity: participant categories

Participants grouped the settings into categories that made sense to them

Card Activity: given categories

Participants were given set categories to organize the settings into

Card Activity: participant categories

Participants grouped the settings into categories that made sense to them

1/2

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

DEVELOPING REDESIGN SUGGESTIONS

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 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 DESIGN

final designs

After incorporating sponsor feedback, our team moved forward with creating high-fidelity prototypes. We also used the prototype feature in Figma to make them interactive. See video below for our final design.

Key changes:

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

efficiency testing

Our team hypothesized that introducing columns and grouping would increase the efficiency of the page. To test this, we conducted efficiency testing between the current page and our redesign

We tested with three design students due to limitations in reaching our user group.

Tasks given during the test included enabling and disabling certain settings, updating user phone number, and looking for more information on a setting.

Our redesign:

Total average time to complete tasks: 18.42 seconds
Comments:
- Increased visual hierarchy

Current page:

Total average time to complete tasks: 29.83 seconds
Comments:
- Organization is random

Results:

Our design reduced time spent on tasks by 38.25%

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. 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. Since our project focused on a settings page, which is pretty universal, we still felt confident in our design decisions based on the data we were able to obtain.

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.