Pain Points We noticed

Here are the main pain points we uncovered from analyzing Uline’s original product detail page (PDP):

UI of the Additional Info Tab

• Can be hard to find the “Additional Info” tab, it’s currently just a hyperlink at the bottom of the page.

• It isn’t noticeable, and feels like key product details are being hidden.

Add Button Confusion

• The “Add” button doesn’t add the item to the cart. Instead, it just increases the quantity.

• This led to confusion and disrupted the user flow.

Pricing Issues

• We only saw the total price once the item was in the cart.

• Quote pricing is only visible when logged in and doesn’t appear in the cart.

• Pricing on mobile was disorganized and harder to find.

Shipping Information

• Unclear delivery expectations, specifically shipping dates and estimated arrival.

• Shipping costs varied by product but weren’t listed on the PDP.

• Handling procedures weren’t clear.

Missing Product Details

• We were not able see information like the country of origin and whether the product was recyclable.

• Several details are only available on the desktop version.

• Product dimensions and assembly instructions were hard to locate.

Takeaways

The main issues were determines from our own walk through and based off of reviews were

• Visibility and usability of the “Additional Info” tab

• Confusing or hidden pricing and shipping details

• Missing product information, especially on mobile

These insights helped guide our focus for secondary research and will inform future design decisions aimed at improving the user experience on Uline’s PDP.

Secondary Research

To strengthen our understanding of the user experience and business context, we turned to secondary research pulling insights from reliable articles, academic studies, and ecommerce industry reports.

Cognitive Walkthrough and Heuristic Evaluation

We conducted a cognitive walkthrough with 4 Purdue students on Uline’s Product Detail Page (PDP) and evaluated usability using Nielsen’s 10 heuristics to uncover friction points and guide the next steps in our design process. The evaluation highlighted five main areas where users encountered challenges:

Add to Cart and Error Handling
Users struggled with unclear messaging, forced quantity adjustments, and poor or missing feedback after actions.

Navigation and Page Flow
The user flow felt rigid, navigation was inefficient, and important information lacked hierarchy.

Product Information and Presentation
Critical details were hidden within tabs, descriptions were vague, and product availability was sometimes misleading.

User Guidance and Help
Instructional tooltips were absent, and error messages were unclear or missing.

Interaction and Visual Design
Visual hierarchy was weak, clickable elements were often too small, and unnecessary steps slowed task completion.

Sample Tasks for Testing
Participants were asked to:

• Locate model S-13287 on a product subpage

• Identify savings per unit during an overstock sale

• Choose a product color

• Determine savings when purchasing three or more gloves

Desktop and mobile sessions were analyzed separately, and insights were organized using affinity diagrams to identify patterns and trends.

Key Insights

Desktop

• Users struggled to find content hidden in expandable sections

• The “Add to Cart” button was difficult to locate

• Bundled quantities caused confusion with pricing and selection

• Images showing products in context helped understanding

Mobile

• Users wanted access to customer reviews

• Small font size and spacing affected readability

• Contextual images were valuable for understanding product scale

• Forced bundle quantities caused confusion, similar to desktop

Summary of Findings
Across both platforms, users had difficulty navigating the PDP, finding critical information, and understanding pricing for bundled items. Visual aids like contextual images consistently helped users. Mobile specific challenges included text readability and the lack of customer reviews. These insights directly informed our follow up interviews and guided design decisions to improve usability, clarity, and user confidence.

Interviews

Next we conducted interviews to dive deeper into customer experiences and priorities when using Uline’s product pages. These conversations helped us understand the practical challenges users face and what they expect from the platform.

Research Question

How might we understand current Uline customer wants, needs, and challenges with the current PDP design?

Methodology

We interviewed three Uline customers with varying levels of experience. Each interview focused on how users navigate, select, and purchase products in their day to day roles. The goal was to complement our usability testing with authentic context and usage insights.

Participants

Interviewee 1

• Occupation: Lab Safety Officer

• Experience: 16 years using Uline across multiple jobs

• Usage: Previously daily, now around four times per month

Interviewee 2

• Occupation: Shipping Manager

• Experience: 2+ years

• Usage: About once a month

Interviewee 3

• Occupation: Makerspace Manager

• Experience: 1+ year

• Usage: About once a month

Key Insights from Interviews

1. Search & Navigation Efficiency

• Experienced users rely on the search bar rather than browsing categories

• Filtering search results often requires manual effort

• When product names aren’t known, users search by shape, category, or material

2. Product Information & Hierarchy

• Users want specifications grouped for easier side-by-side comparison

• Price breaks, order limits, and availability should be clearly displayed

• The “Additional Information” tab is often overlooked or hard to access

3. Ordering Process & Friction Points

• Automatic quantity rounding creates storage and budget issues

• Users frequently toggle between Uline and third-party procurement platforms, which interrupts the flow

• Discounted prices for account-holders aren’t shown until after signing in, leading to confusion

4. User Preferences & Shopping Behavior

• Users appreciate next day shipping but are frustrated by unexpected delays and lack of communication

• Free promotional items are viewed positively but are difficult to locate during checkout

• Users dislike the volume of printed catalogs and want an option to opt out

5. Product Comparison & Discovery

• Users often compare by serial number, but want easier ways to filter by color, material, and size

• Improved filters could help users who don’t know exact product names

Interview Takeaways

These interviews helped validate the usability issues uncovered in our earlier evaluations and brought additional clarity to user needs. Key takeaways that will guide our next steps include:

• Clearer pricing communication: Show discounts and price breaks more transparently, especially before sign in

• Better visibility of order limits: Make minimums, maximums, and bundle logic more obvious to avoid frustration

• Improved PDP layout: Group key specs like dimensions and materials together and make tabs like “Additional Info” more accessible

• Stronger communication around fulfillment: Let users know about shipping status and stock delays earlier in the process

  
  

Activities and Goals

Copy to Learn Workshop

• Analyze how B2B websites structure their product pages

• Practice rebuilding layouts using Figma

• Identify layout and information display patterns that can inform our redesign

Crazy 8s Sketching

• Rapidly generate eight different design solutions in eight minutes

• Explore multiple approaches to solving PDP usability issues

• Review and refine sketches as a group to identify themes and standout ideas

Paper Sketching

• Translate selected ideas into full-page wireframes

• Begin organizing visual hierarchy and layout structure

Wireframing in Figma

• Build low-fidelity wireframes based on paper sketches

• Begin exploring potential interaction patterns and layout improvements

High Fidelity Prototype (Hi-Fi)

Designing our high-fidelity prototype involved reflecting on initial wireframe decisions to create a visually polished and interactive design.

Key Features of the Redesign:

• Upper Product Info:

  • Additional info link centralized on the page

  • Redesigned pricing chart localized near the add to cart section

• Lower Product Info:

  • More visual pricing features

  • Redesigned quantity input field

  • Subtotal features

  • Add to list bookmark

• Additional Info:

  • Page catalog referencing info

  • Additional shipping info

  • Recategorized additional info tabs

Users can now browse product detail pages (PDPs) redesigned to guide them through the buying process with less confusion, more descriptive features, and a minimalistic information presentation.

Product-Specific Features:

• Upper Product Info:

  • Pricing chart containing info specific to the product

• Lower Product Info:

  • Size selection feature

  • Color selection feature

• Additional Info:

  • Description field information relating to the specified product

Features and descriptions are tailored to each product, enhancing the user experience by providing relevant information in a clear and organized manner.

Insights

• Utilized user centered design and highly desirable features to improve site composition.

• Reformatted wireframe decisions to accommodate user needs with visually appealing practices.

• Integrated much-desired features based on sponsor and user feedback to resolve prior issues.

Takeaways

• Refined iterative practices to improve system presentation.

• Rationalized design decisions based on research and interview insights.

• Finalized the high-fidelity design system.

Usability Testing of the redesign

Usability testing evaluates a design by observing users interact with it to identify issues and improve the user experience.

How might we validate that our design is intuitive, efficient, and effective?

Methodology

Purpose: To evaluate the effectiveness, clarity, and usability of the redesigned PDP by observing users' task performance and gathering feedback.

Testing Structure:

• Mixed-Method Approach:

  • A/B Testing: Participants are shown both the original and redesigned PDPs without knowing which is which.

  • Usability Testing: Participants interact with the redesigned PDP and complete structured tasks to assess interaction clarity and information hierarchy.

• Participants: 2 Uline B2B users, both familiar with the Uline website.

• Timing: Each testing session lasts approximately 30 minutes.

• Task Design:

  • Participants are assigned tasks related to locating product details (model number, dimensions, stock status, pricing tiers, SDS sheet, etc.) and completing basic actions (e.g., adding items to a saved list).

  • Tasks are based on 2 different products (3x3x3 boxes and Heatgard gloves) to simulate realistic shopping scenarios.

Data Collection:

• Behavioral Observation: Task completion success, navigation paths, errors, and notable behaviors (e.g., hesitation, backtracking) are recorded.

• Quantitative Measures:

  • Ease of navigation (scale 1–5)

  • Intuitiveness (scale 1–5)

  • Efficiency (scale 1–5)

• Qualitative Measures:

  • Think-aloud protocol during exploration to capture real-time impressions.

  • Open-ended questions after interaction to gather subjective feedback on intuitiveness, frustrations, and desired improvements.

Evaluation Focus Areas:

• Information hierarchy clarity (e.g., can users quickly find model numbers, SDS sheets, pricing tiers?)

• Overall ease of navigation and decision-making confidence.

• Differences in user experience between the original and redesigned PDP versions.

• Users’ subjective feelings about familiarity, frustration points, and satisfaction with the new design.

Insights

We evaluated both the Box PDP and the Glove PDP. The redesign outperformed Uline’s current design across all categories, with an average score increase of 35%.

• Clearer Navigation: Users didn’t frequently go back, revisit pages, or mistakenly click on unrelated sections.

• Easier Reading: Users appreciated the separation of product information, which clarified the hierarchy.

• Feels Familiar: Both testers agreed that the pages did not feel too foreign to navigate.

Next Steps

To ensure successful completion of this project, we recommend the following steps:

1. Predefined Scale User Testing:

   Conduct further user testing with a predefined scale system (e.g., 1 to 5) to gather more quantitative data for refining design decisions.

2. Beta Testing:

   Conduct testing with Uline customers on the redesigned PDP. Gather insights and iterate based on feedback.

3. Continue Mobile Research:

   Leverage insights from the research to continue designing a more user-friendly PDP on mobile.

My Contributions

As a part of the design team, I contributed across multiple stages of the project, from ideation to the final presentation:

• User Testing: I participated in user testing sessions, helping to identify pain points and improve the user experience. I also took part in the interview protocol, providing valuable insights from real users.

• Wireframing & Hi-Fi Prototype: I contributed to both the wireframing and high-fidelity prototype stages, ensuring the design met user needs while maintaining a cohesive and user-friendly layout.

• Collaboration & Teamwork: I worked closely with my teammates, Raelee and Emily, as part of the Hi-Fi team, and helped refine the project’s style guide and interactivity features.

• Final Presentation & Documentation: I played an active role in preparing and presenting the final project, helping with documentation cleanup and contributing to the overall presentation, ensuring clear communication of our design process and findings.