Ricoh-USA

Support & Downloads

Project Summary

To reduce help center call volume requests for equipment support, drivers, manuals, and brochures, a page had been recently been added to the website.

After 18 months, it was still unsuccessful.

Analytics and user testing revealed the search experience was difficult.

The new smaller search field, clear messaging, and progressive filtered search created a more elegant, usable, and compact feature—about half the size of the original—which also worked on mobile, unlike its predecessor.

The redesign reduced call center inquiries about drivers, manuals, brochures, and other assets
by 30%.

The Goal

Reduce calls from customers requesting manuals, brochures, and drivers and increase downloads of these same items.

The original experience was optimized for desktop, but did not adequately support mobile usage, prompting a responsive redesign.

Timeline

10 months

Collaboration

Product Manager

Product Owner

Developers (2)

Front End Developer

Junior UXA

Visual Designer

Tools

Axure

Usertesting.com

Fireworks

Illustrator

My Role

UX Lead
Research Lead

To support Ricoh's eco-friendly goals, product brochures, manuals, and driver information are no longer printed or delivered with equipment.

However, user feedback and high call volumes revealed customers struggled to find these materials online.

The Problem

Ricoh had an existing search and download page for product materials. While some suggested putting more energy into promoting the page, inline feedback and remote testing showed that users struggled to use the widget and couldn’t find useful results despite easily locating the page.

This version was not scalable for a mobile experience. This also had to be designed.

I conducted a heuristic review and a user test to identify usability issues.

Inline feedback

Before

After

Identifying Issues

Why was the current experience unsuccessful?

The search bar

The original search bar

Testing found that users avoided and expressed confusion about the search bar.

The length of the bar was unnecessarily long

Our product names and model numbers are short. users assumed something other than their model number belonged in the search.

The placeholder text mentioned only drivers

discouraging users seeking brochures or manuals assumed they were elsewhere and didn't feel that they could search for them here.

The lengthy instructions were often ignored

Prompt text

The search bar used lengthy placeholder text. As part of the Ricoh UX pattern library, I defined a rule to avoid placeholders as prompts, since they disappear while typing, strain memory, create accessibility issues, and increase errors. Persistent external labels were specified instead, following Nielsen Norman Group best practices.

The improved search bar

The search field length was adjusted based on typical product name and model number lengths, making expected input clearer to users

Labeling was updated to reflect a broader set of searchable items beyond drivers, aligning the experience with user expectations.

Instructional text was shortened from eight words to three to reduce cognitive load and improve comprehension.

Placeholder text was replaced with a persistent title, aligning with accessibility and form usability best practices.

Reduced instructional text improved scannability and reduced cognitive load.

The new search bar

Instructional text

The original instructional text was verbose and inconsistent with the placeholder guidance.

While the search field referenced drivers only, the supporting text also mentioned software and manuals, creating confusion about what content could be searched.

The improved text

The search bar was retitled using the more inclusive term Downloads, and the instructional text was given a clear heading, Support & Downloads, to reflect the full range of available resources. Supporting copy now directs users to enter product details to access relevant materials.

To reduce cognitive load and improve scannability, the total instructional text was reduced from 16 words to 10, a 37.5% decrease. This reduction made the guidance easier to read at a glance, lowered memory burden, and helped users more quickly understand what to do next.

The new instructional text

Reduced instructional text improved scannability and reduced cognitive load.

Dropdown filter issues

The original dropdown system created several usability problems due to the differences of our product offerings.

All four dropdowns (Category, Sub-category, Model, Download) were displayed simultaneously rather than progressively revealed, overwhelming users and obscuring the intended hierarchy.

Inconsistent dropdown behavior caused confusion. Some categories included sub-categories while others did not, resulting in dropdowns appearing or disappearing unexpectedly as users made selections.

Changing a selection in an upper dropdown sometimes caused lower dropdowns to reset, appear, or vanish without clear feedback, making the flow feel unpredictable.

Users could not easily adjust selections without fully resetting the widget, increasing time on task and repetition.

Only one asset type could be downloaded at a time. Users needing multiple assets (such as a driver and a manual) were required to restart the entire process, repeating all dropdown selections.

Disappearing menus confused users.

The Go and Reset buttons were given equal visual weight, making it difficult for users to quickly identify the primary action.

The Go button was also misleading, as it did not navigate to a new page.

Results were displayed below the fold. Many users concluded nothing had happened after clicking Go.

When no results were returned, the messaging appeared below the fold in small text, making it easy to miss and difficult to read.

Results and results messaging were missed by users who assumed that without feedback, the widget was broken.

Progressive reveal

Progressive reveal was explored to reduce cognitive load and guide users through a complex selection process step by step.

By showing only relevant options at each stage, the interface would become more predictable and easier to understand, minimizing confusion caused by unnecessary or changing inputs.

Progressive reveal solutions often improve efficiency and accessibility by reducing visual clutter and ensuring users receive immediate, meaningful feedback as they make selections.

Wireframes for the desktop experience

Wireframes for the mobile experience

WCAG Mapping

Some of the WCAG standards the progressive reveal improvements redesign met.

Perceivable

WCAG 1.3, 1.4

Results and status messaging were surfaced above the fold.
Text size and hierarchy were improved for readability.
Distinct icons and clear document titles supported faster visual recognition.

Operable

WCAG 2.1, 2.2, 2.4

Progressive reveal reduced visible controls and simplified navigation.
Automatic results removed unnecessary actions and interaction steps.
Users could adjust selections without resetting the workflow.

Understandable

WCAG 3.2, 3.3

Inputs were revealed in a predictable, logical sequence.
Inconsistent menu behavior was eliminated.
Immediate feedback reinforced clear cause-and-effect.

Robust

WCAG 4.1

Persistent labels replaced placeholder-dependent guidance.
Clear, structured results improved screen reader compatibility.
One-line accessibility summary
Progressive reveal improved accessibility by reducing cognitive load, increasing predictability, and ensuring clear, perceivable feedback.

Search and filter results

Returned search results issues

In the original experience, search and filter results were communicated through a single text link displayed below the fold. Returned results showed only a model number, with no indication of asset type, while “no results returned” messages used the same placement and visual treatment. This made it difficult for users to quickly distinguish between results and system feedback or understand what to do next.

Because both success and failure states were visually identical and positioned out of view, users often missed critical feedback altogether.

The lack of differentiation between links to assets and system messaging increased uncertainty and forced users to scroll, reread, and interpret the interface before understanding whether their search or filter had worked.

This ambiguity added unnecessary friction to a task that users expected to be fast and straightforward.

The results were often missed by our users.

To address this, I redesigned the results and messaging to appear above the fold and closer to the model dropdown menu, ensuring immediate visibility after a search or filter selection.

The null results state was given clear visual prominence and distinct styling, making it immediately recognizable as system feedback rather than a clickable result. The message also explicitly repeated the searched model number, for example, “Your search for [model name and number] did not yield any results,” reinforcing clarity and reducing doubt about what criteria had been applied.

When results were available, assets were displayed with clear visual hierarchy and supporting icons that identified the asset type, such as driver, manual, or brochure. Each result included descriptive link text that combined the asset type with the model number, making the content immediately understandable and scannable. This approach improved feedback clarity, reduced user effort, and helped users quickly recognize and access the resources relevant to their specific equipment.

Redisigned returned search results

Search results returned with assets for this model - desktop and mobile views

Search results returned with no assets found for this model

After redesign

Users found the sleeker layout to be more approachable and easier to use, and less mentally taxing and frustrating than the previous design.

Success!

Final Outcomes and Impacts