Introducing DEMA Show’s first design system to help users dive into the B2B trade show website
My Role
UI Designer
Agency
CSG Creative
Year
2022
Browse the case study
Background
Client: National Trade Productions, Inc. Events (NTP Events)
Stakeholders: Diving Equipment & Marketing Association (DEMA)
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
How might we make the website more consistent across web pages and from year to year?
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 confusing experience that might have resulted in users quickly leaving the website.
The challenge this year was we needed a new way of reskinning the website that would be more consistent.
Team
Me, UI Designer
Rich Skibinski, Sr. Account Executive
Tools
Platforms
Figma • InDesign
Deliverables
Heuristic evaluation
Design system
UI component library
Hi-fi concepts for 2x landing pages: Home and Attend
Responsive desktop and mobile web design
Process
Evaluating existing inconsistencies
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)
Proposing the design system
The client wished to perform a small-scale “reskin” of two key landing pages with simple color and copy swaps.
However after reviewing their issues, I proposed implementing a design system this year as well.
The client had a history of reskins in which components largely stayed the same but the styles changed year to year with each trade show’s new theme. Sometimes changes were missed here and there, causing components to look and/or behave differently than users would expect.
A design system would centralize styles into one source of truth would further make it easier to implement consistently throughout the website. As a result, these swaps would be easier to maintain.
Plus, stakeholders would save time and money on “reskinning” the website every trade show.
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.
Results
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.
Conclusion
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.
We launched the design system and the new website homepage. This design system made it much faster and easier to implement the new trade show’s homepage and other landing pages. The new pages are already benefitting from longer user stays, so it seems a win-win all around.
We will also continue to use and maintain the design system to iterate each trade show’s website going forward.
View on Figma
Reflections
This design system made it much faster and easier to implement the new trade show’s homepage and other landing pages. The new pages are already benefitting from longer user stays, so it seems a win-win all around.