Launching the SpaceCom 2022 website from a new design platform

My Role

UI Designer

Agency

CSG Creative

Year

2021

Background

Client: National Trade Productions, Inc. Events (NTP Events)

Stakeholders: Global Commercial Space Conference & Exposition (SpaceCom)

The Global Commercial Space Conference & Exposition, also known as SpaceCom, is the leading annual event supporting professionals in the commercialization and business of space. The event connects private and public sectors enabling new, lucrative opportunities in space-earth ventures, advancing the business of space, and protecting the planet.

SpaceCom is managed by National Trade Productions, Inc. (NTP) Events in partnership with NASA, the NOAA: Office of Space Commerce, and the Department of Energy (DOE) Office of Technology Transitions. NTP Events partners with my company, CSG Creative (CSG), to market the event. As a result of this partnership, CSG re-brands SpaceCom’s website every other year with new creative.

The SpaceCom website is the primary source of info for the latest event developments. Here, users read about the event’s educational and commercial opportunities. They may also register to attend as an attendee, exhibitor, or sponsor to make full use of SpaceCom’s networking and promotional advantages.

Therefore, the SpaceCom website is the best place to foster these relationships and create partnerships to further earth-space advancement.

Challenge

How might we make it easier for attendees and exhibitors to engage with the website?

SpaceCom was experiencing a lot of growth:

The virtual SpaceCom 2020 was a record-setting year: the event attracted 5,000+ attendees from 59 countries and achieved a 21% increase in exhibiting companies.
The subsequent expo in 2022 returned on-site but to a new location: Orlando, Florida, a competitive location that’s home to many space projects.
The client switched to a more modern platform for their website, a powerful WordPress + Elementor combo with greater customization options, mobile-friendly layouts, and even animation.

The client and stakeholders wanted the 2022 website design to highlight their recent growth and share the opportunities attendees and exhibitors can take advantage of for education, shopping the show floor, and networking.

Website users need to stay longer to gain a better understanding of SpaceCom’s latest offerings.

Team

Me, UI design, CSG Creative

Courtney Lopes, art direction, CSG Creative

Michelle Lee, SpaceCom account, CSG Creative

Lisa Staszewski, event management, NTP Events

Stacie Davis, engineering, 48^th Avenue

Tools

Platforms

Figma • InDesign

Deliverables

Wireframing, from low- to high-fidelity

Process

Prioritizing work for a fast turnaround

SpaceCom 2022 wasn’t only accelerating space business—it also accelerated the website launch schedule. The client furthermore held to a hard deadline. So CSG must make up time for external delays as well.

Despite the rigorous review process and multi-agency collaboration, I completed the website design from initial concepts to final deliverable in just 5x days of work!

Additionally, I was able to execute the look to the client’s satisfaction with minimal edits, just 6x iterations across 4x companies.

Embracing change

The client was actively revising the event’s main visual identity and branding guidelines when website production kicked off. While my colleague, Courtney, handled those updates, my wireframes must stay current with the evolving creative theme.

Applying my web development experience to inform my UI designs

I knew the SpaceCom website uses the CMS WordPress and the page builder, Elementor — and I have years of experience with both, plus quite a bit of hand-coding. I could plan ahead for technical features and limitations in my wireframes.

I capitalized on Elementor’s built-in features and worked them in. For example, these included:

parallax animations on scrolling,
diagonal shape dividers,
animated stats counters, and
customizable hover state changes.

Furthermore, I also worked around looks that I knew would require excessive work for the web developer and/or client to implement and maintain. I avoided limitations such as:

different backgrounds for every speaker,
custom iconography (instead opting for Font Awesome), and
custom navigation positioning on widgets like carousels.

Iterating from initial concept to final wireframes

While the original event visual identity and branding was minimalist with lots of breathing room, the client preferred a compact website. We reduced whitespace throughout, added background photos, and enlarged show photos to epic proportions.

Homepage Draft #1

Homepage Draft #2

Internal Page Draft #1

Conclusion

With much collaboration, we successfully designed a homepage and an internal page with several engaging elements for users. This year’s UI design highlighted useful B2B statistics, showcased real show photos, and animated elements to help guide users through the content.

We delivered the wireframes to engineering for web development and website launch.

Final Homepage

Final Internal Page

Reflections

This project felt crazy-fast due to kick-off delays, branding changes in the midst of our iterations, and the fast deadline quickly approaching. However, with much collaboration and each team member doing their part to focus on the have-to’s before the want-to’s, we delivered an amazing product.

However the fast-turnaround also resulted in very client- and stakeholder-driven UI design this year.

Given more time, I would’ve liked to pursue more user research such as journey mapping and usability testing. Since the virtual expo prior enjoyed record-breaking success, I wanted to talk to users what they enjoyed for the virtual expo and what we could continue in-person.