A new DEMA Show 2019 homepage turns the tide
My Role
UI Designer
Agency
CSG Creative
Year
2019
Browse the case study
Background
Client: National Trade Productions, Inc. Events (NTP Events)
Stakeholders: Diving Equipment & Marketing Association (DEMA)
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 4-day event attracts 6,000+ diving professionals from all over the world.
Challenge
How might we add more value for users on the homepage?
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 homepage UI design 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.
Team
Me, UI Designer
Matt Hamilton, Director of Digital Design
Lisa Stazewski, our client’s representative for the stakeholders, DEMA
Tools
Platforms
Figma • InDesign
Deliverables
Wireframes, from low- to high fidelity
Process
Prioritizing above-the-fold content
The client explored several iterations of different sizes and placements for the carousel ad. They explained the stakeholders, DEMA, wanted to sweeten the deal for advertisers with a more prominent ad on the homepage.
Unfortunately, the prominent size and position of this animated ad slideshow was commanding a lot of attention from users — desirable for the advertisers, not so much the users, who now have to look harder for the event info.
Exploring new layouts
I started with lo-fi wireframing to tackle the information hierarchy. This way I could ensure that the design ultimately resolves DEMA’s pain points and iterate quickly without distracting details.
I experimented with:
- ad size and placement, which needs to be prominent but non-competitive;
- whitespace to increase readability;
- highlighting the primary slideshow; and
- adding kicker copy that introduces the show.
I then worked with my supervisor Matt 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’s 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!
Desktop
Mobile
Winning everyone over
However, I was able to turn the tide with a new hero section UI. I led a compromise with the client on keeping the ad still high up, but reducing the navbar height and adding an attractive, full-screen hero image that centralizes the event’s most important details.
Results
Conclusion
The new homepage UI design is more user-friendly while honoring the stakeholder’s request for prominent advertising.
Now, users can:
- dive into the main content sooner due to a shorter navbar and large hero image;
- read new kicker copy that introduces who DEMA is and what DEMA Show does;
- see real-life show photos for a better understanding of the event; and
- stay informed by responding to a prominent Mailing List CTA.
Reflections
This project required me to practice a lot of communication. We had different people from different companies playing different roles, and we all wanted the best version of the homepage.
Sometimes, the client and my team at my company agreed but the stakeholders envisioned something different. Other times, I advocated the stakeholders’ point of view while the client was advocating another. Furthermore, I needed to also advocate for the users themselves.
The final product has something for everybody and achieved total buy-in. After the initial launch, we can continue iterating and conducting user research to perfect it.