Clearcom

Re-platforming the existing digital product to create a more user-friendly interface, optimize performance, and align with WCAG's AA standards for accessibility.

Type
UX consulting, Design systems, Accessibility

Team
Nagasai Vardhan — UX Designer
Fernando Acevedo — Supervisor
Emma Rizzo — UX Writer

Agency
ITX Corp


Overview

Technologies that connect teams

Clearcom empowers customers through market-proven communication technology, providing broadcast solutions globally

Problem

The website hosts technical information about their products and also provides downloadable manuals, datasheets, and software updates but the experience of accessing the data did not meet user expectations.


Process

Empathize


Define

Ideate

Design

Usability analysis
Stakeholder interviews
Analyze pain points
Synthesize and document
Present to client

Problem statement


HMW statements
Lo-fi designs
Technical feasibility
Present to client


Design systems
Information architecture
Hi-fi design for web and mobile
Present to client


Empathize

Usability analysis and
stakeholder interviews

User insights

Issues

Users are professionals & familiar with clear-com products

Seeks quick and straightforward website experience

Easy support access for a seamless user experience


Users were not able to navigate through the website

Difficulties accessing and downloading product-related files

Complex content filtering system

The website is not compliant with WCAG 2.0 AA Standard


Strategy

Building a scalable style guide that is accessible

Making intuitive user flows and choosing the right UI pattern

Rearranging the information architecture


Design

01

Information architecture

Pain points

Certain links were strategically placed under multiple menu items to address the user’s difficulty in locating them within the menu

Inadequate menu structure posed challenges for users in recalling and locating menu options

02

Resource filtering page

Pain points

The page had a dual filtering system, but users could not utilize it

Users struggled to identify the page location and found excessive and confusing tags

03

Download center page

Pain points

Users struggled to filter search results by content type, resulting in a time-consuming browsing experience

Despite having a search bar, users had to manually scroll through multiple pages to find specific product versions, causing frustration

Users encountered difficulties accessing and downloading product-related files when offline or in areas with limited internet connectivity


Approach

Design system

Atoms

Elements that ensure consistency and style for a seamless user experience

Molecules

These UI components systematically combine atoms, creating cohesive and functional structures

Organisms

Pre-built interface blocks composed of molecules, providing ready-to-use components for a consistent design


Atoms

Grids

Color System

Updated the color system to adhere to WCAG AA standards, ensuring accessibility for a wider range of users with varying visual abilities.

Type System

Visual hierarchy is created using type weights, effectively emphasizing important elements. For smaller-sized text, the Inter typeface is recommended due to its broader and taller letterforms, enhancing readability and legibility


Molecules

Buttons and links

Filters


Organisms

Mobile menu

Cards