Introducing DEMA Show’s first design system to help users dive into the B2B trade show website content

My Role

UI Designer

Agency

CSG Creative

Year

2022

Background—

The Diving Equipment & Marketing Association (DEMA) annually hosts the DEMA Show. No other gathering in the world brings together the entire professional diving, dive travel, and water sport industry like DEMA Show. DEMA Show remains the only trade-only trade show specific to the diving and scuba industry. This four-day event attracts 6,000+ diving professionals from all over the world.

While many of DEMA’s customers were hit quite hard by the pandemic, they were eager to return to the show floor in 2022 to shop the latest gear to bring back to their shops and scout travel destinations. DEMA relies on digital materials to spread the latest show updates and encourage attendee and exhibitor registration alike with the DEMA Show website acting as a central source of info.

Challenge—

When users visit the DEMA Show website, they may find products and services helpful for growing their businesses. Likewise, DEMA builds relationships with the users and offers professional, educational, and networking opportunities with their registration at DEMA Show.

Unfortunately, analytics reflected that users were not visiting additional pages beyond the first page they entered, at an average 1.68 pages visited. Users also didn’t stay very long—the average visit lasted <1 minute. 

Website users need to stay longer to gain a better understanding of DEMA Show’s offerings.

I began the annual reskin by reviewing two key landing pages. My heuristic evaluation identified several potential barriers to interested attendees and exhibitors seeking more info about the trade show.

The main issue can be summed up as “inconsistency”: inconsistent spacing, visual treatments, and behaviors that broke expectations. The result was a very confusing experience.

Team

Me, UI Designer

Rich Skibinski, Sr. Account Executive

Tools

Figma

InDesign

Solutions—

I created a comprehensive design system that resolves inconsistent looks and behaviors that make it difficult for potential attendees and exhibitors to find content. Then, utilizing the design system, I created two landing pages: Home and Why Attend? 

The design system documentation and hi-fi mock-ups were delivered to the client to provide to their engineers.

Deliverables

Heuristic evaluation

Design system

UI component library

Hi-fi concepts for 2x landing pages: Home and Attend

Responsive desktop and mobile web design

Impact—

In the month since the redesign’s launch, users are indeed staying on the DEMA Show website longer. Both the average number of pages per visit and the duration of each have tripled.

Process—

Evaluating landing pages before the redesign

Before the redesign, I evaluated two main landing pages as-is for the most severe usability issues. These pages were critical to earn attendee registrations. However, I identified a lot of inconsistencies.

I encountered platform inconsistency between static vs. interactive, and desktop vs. mobile experiences.

  • EX#1. Mismatching fonts between headlines
  • EX#2. Many static and interactive elements received similar visual treatments despite behaving differently
  • EX#3. Different experience b/w desktop and mobile, content visible by default on desktop requires horizontal scrolling to access on mobile (see accordion on the Attend page)

I also identified weak visual signifiers, which make it difficult for users to discover and navigate content.

  • EX#1. blue accordion tabs on Attend page which didn’t have a conventional BTN treatment and were even styled similarly to non-interactive, static images
  • EX#2. Homepage content appears disconnected and separated due to unusual sizing and placement of HRs and VRs 
  • EX#3. Latest News BTN to read more is far away from the headline where it’s difficult to find, touch target is too small for easy interaction, and arrow-only BTN lacks descriptiveness telling users what will happen when they click (i.e. they may go to an external URL to read more)

Creating the design system & UI components

I created a design system for DEMA Show 2022 to resolve visual and much of the behavioral inconsistencies people were encountering while browsing the old website.

The design system addressed specs and usage of UI components like:

  • Grid system + spacing
  • Color palette
  • Typography on light + dark backgrounds
  • Sufficient color contrast for web accessibility
  • Active, focus, and hover states for interactive
    buttons, cards, and accordions
  • Primary and secondary navigation
  • Primary and secondary CTAs

 

 

 

Designing the Landing Pages

The landing pages needed to be compatible with the trade show CMS, Personify (formerly a2z), which is built on the Twitter Bootstrap framework.

I used what I know about coding with Bootstrap to neatly align content to a grid, style a sticky Quick Links sidebar, and create stronger visual signifiers on clickable objects.

The navbar and accordion state styles update the user of where they are in the page without strictly relying on color. Shading, underlines, and expand/collapse icons also orient the user.

The design system further caps primary CTAs to one max per page to help users quickly find the most helpful items on the page, like where to register to attend DEMA Show.

The last big visual change is the sticky sidebar which maintains <75 characters of copy per line, and as a result, helping users quickly return to read the next line.