DEMA Show 2019 Trade Show Website Reskin

Work for hire for Diving Equipment & Marketing Association (DEMA) by Lara Lee while employed at CSG Creative with permission for Lara Lee to display for self-promotion.

Preview of the DEMA Show 2019 website design case study,

Background

Every year, the Diving Equipment & Marketing Association (DEMA) launches DEMA Show—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.

DEMA’s 2018 trade show website provided ample marketing opportunities for their partners and advertisers. However, DEMA’s own message was somewhat more buried. Therefore, we proposed a reskin that would clarify DEMA’s core messaging and make the website look as fun and amazing as the event itself.

Two main challenges arose: working within both a smaller budget and technically-constraining trade show CMS platform, a2z. As a result, CSG Creative focused on the branded look, navigation, and homepage design.

My Role

Web Designer

Digital Direction

Matt Hamilton

Agency

CSG Creative

Web Developer

Stacie Davis

Art Direction

Courtney Lopes

The Results

0 +
Show Attendees
0
Organic Visits a Month
to the Trade Show Website
Animation. Scrolling webpage of the new DEMA 2019 trade show website.

Dive into Wireframing: First Steps of a Trade Show Website

The first step to any website design project is wireframing. Wireframing tackles the information hierarchy so I can ensure that the design ultimately resolves DEMA’s pain points.

I experimented with:

  • ad size and placement, which needs to be prominent but non-competitive;
  • whitespace to increase readability; and 
  • highlighting the primary slideshow.

I then worked with my supervisor Matt Hamilton, Digital Director, to condense and simplify initial layouts. Then, with feedback on the initial B&W wireframes, I then created high-fidelity, full-color wireframes incorporating Courtney Lopes’ branded core and visual identity elements.

One of my favorite ideas for the trade show website reskin was decorating the top bar. I took fish from the DEMA Show logo and overlaid them for an extra touch of branding. The client loved this creativity and asked for this in their print pieces as well.

Header & Footer Wireframe Concepts

First Wireframe

The first wireframe for DEMA Show 2019 trade show website reskin.

Final Wireframe

The final wireframe for DEMA Show 2019 trade show website reskin is more condensed.

The final wireframe is more condensed, including a short navbar, text-only news items, and less content in the footer. We also successfully persuaded the client to move the ads down. Now the hero slideshow makes an impressive full-screen above-the-fold display of DEMA Show’s most important messages in their website design.

The Inspiration: DEMA Show 2019 Core Identity

Designed by Courtney Lopes, CSG Creative

DEMA Show 2019 original core, designed by Courtney Lopes, CSG Creative.
Infographic illustrating how the core inspired me for the trade show website reskin.

The Final High-Fidelity Wireframe in the Trade Show Website Reskin

The final, high-fidelity wireframe and mock-up for the DEMA Show 2019 trade show website.
“If you haven’t seen Lara’s web design go live, check it out! Her first site design was a homerun…even the a2z guy that gave us training said this was the nicest design and UI he’s seen from DEMA yet! Nice job, Lara!”
The letter M.
Matt Hamilton
Director of Digital Design