Making an Event Website Builder for Marketers

I was tasked with designing a system and process that would allow marketers – many of whom never worked on a website before – to build their own event websites using Adobe Experience Manager’s drag and drop interface. Over the span of a year, my team and I developed a modular design system, based on atomic design principles, and a process that could accommodate the needs of hugely variable teams of marketers, designers, developers, and project managers in building their event websites quickly, efficiently, and flexibly.

Role

UI/UX Director
Product Design Lead

Skills Applied

UX Research
Wireframing
Prototyping
UI/UX Design

Tools

Octopus.do
Adobe XD
Adobe Photoshop

Timeline

June 2019 – Ongoing

Adobe Experience Manager Case Study

Problem Statement

After acquiring United Business Media (UBM), Informa Markets faced the daunting task of unifying their event website systems on a single platform – Adobe Experience Manager (AEM) – for both their legacy event websites and their newly acquired properties.

My task was to develop a design system and supporting processes that would allow marketers to build and maintain their own website pages using pre-defined components within AEM, while allowing each website to look and function as a unique entity. The system needed to have a small footprint, with minimal design and development support for each website, as the development team was small (12 mostly back-end developers), the website volume was high (over 300 websites), and the design infrastructure for ‘skinning’ the websites was decentralized (a combination of internal designers, a specialized internal design group, and outside contractors could be tapped to design individual websites on this platform).

Adobe XD Screenshot
Component library created with Adobe XD

Project Goals

Conduct deep-dive user interviews, workshops, and an intensive event site audit of Informa Markets’ top event websites. Compile a comprehensive list of components, features, and pages required by marketing teams. Prioritize list for launch of new system and ongoing post-launch improvements.

Develop a modular design system based on atomic design principles that would comprise a ‘menu’ of components and functionality that marketing teams could access in building their websites. Provide page design guidance and coordinate with developers to ensure components are responsive and customizable.

Develop effective training and documentation to guide users on using the system to customize their websites. Document components, develop examples, and put process in place for external teams (such as design agencies) to work within the shared system.

Migrate all 300+ event websites in Informa Markets’ portfolio to the new system, customizing as time and resources allow to reflect branding and best practices, while fine-tuning the process and coordination among stakeholders.

Whiteboard
Card sorting and whiteboarding during workshops

UX Research

User Interviews

I coordinated eight deep-dive interview panels with users from various marketing teams and brands that would need to use the AEM system. I uncovered common pain points within the existing systems, learned how users incorporated these systems into their workflows, and documented what features they wanted to see carried over into the new system.

Workshops

We facilitated five two-day workshops, which were held at various points during the process to present prototypes, test assumptions, and refine our product offering. We were able to use this time to flesh out our proposed sitemaps and define top-level pages to be considered as part of the process. We stumbled upon a ‘cooking’ metaphor during a thought exercise, that was found to be incredibly helpful in relating this idea both to users and management teams.

Site Audits

An intensive audit of over 40 Informa Market websites was undertaken with the goal of identifying and cataloging both common components found on existing sites and common pages that we could pre-define for marketing teams. Since these sites were event-focused, we were able to identify thirteen commonly used pages that we could build with our pre-defined components. The hope was that defining the layout of top-level pages would assist marketers in writing their content and building their pages, akin to people cooking a meal from ingredients and a recipe.

Market Research

In an effort to go beyond our own websites and event industries, I conducted site audits of some of the most successful events in the world outside of Informa Markets. Performing these audits helped us refine our proposed navigation structures, and offer up some ideas for new functionality to include in our page designs. It also allowed us to make a better case for the importance of mobile-compliant and responsive designs, as many sites put an obvious focus on these increasingly relevant considerations.

Octopus.do Sitemap
Sitemap created with Octopus.do

Starting the Design

Sitemaps, User Flows + Wireframing

Using information gathered from our UX Research, I was able to develop a generic top-level sitemap. We found that everyone responded well to the visual style of Octopus.do sitemaps and enjoyed collaborating through their interface. With our sitemap and feature list in place, we were able to hash out user flows with our marketing stakeholders, and begin wireframing top-level pages to work out generic layouts.

Low-Fidelity Prototyping

I used Adobe XD to turn low-fidelity wireframes into interactive prototypes. This allowed us to collaborate with our developers in discussing intended behaviors and interactions, and because of the low-fidelity nature of the prototypes, we could iterate quickly. Marketing teams appreciated seeing behaviors, even in their rough state, early in the process.

Atomic Design
Atoms that form the Atomic Design System

Defining our Design System

With high-level wireframes completed, it was time to start designing the components that would make up the ‘ingredients’ of each page layout – these would be the tools that marketers would ultimately end up using within AEM. Guided by atomic design principles, and in collaboration with our developers, I broke each feature we had planned into its most basic ‘atoms’, defining each atom and using those to build increasingly complex components and functionality. We coordinated with our development teams to establish a naming convention for each atom which would actually be used to name classes within the code; this language became our shorthand in developing and refining new components and features.

We developed a master component library within Adobe XD that would allow us to quickly edit and update components and functionality for the entire system. Copies of this component guide would be provided to designers so they could ‘skin’ their components quickly and easily, allowing them to match their website to the brand within the boundaries of the larger design system as necessary.

The System in Action

With our component library in place, and our sitesmaps and wireframes completed, the next step was to put together a proof of concept for stakeholders. So as not to bias anyone’s reactions towards our proof of concept, we decided to make a version of the site completely free of any branding that we would otherwise apply. Essentially, we created an ‘unbranded’ version of an event site, using the components and page layouts we had developed in previous steps. This was very well received, and we were given approval from our stakeholders to proceed with building our first event websites using our new system.

Design Documentation
Extensive documentation for marketers, designers, and developers

Documentation and Training

Marketing Documentation

In order to help our marketers get up to speed on how the new system worked, we created a website ‘cookbook’ that detailed not only the components, but the suggested sitemaps and page layouts they could begin working towards for their site. We also had Marketing Engagement Managers working directly with marketers to provide training on the AEM system, and to coordinate the process with their specific project stakeholders.

Design Documentation

As mentioned, the design landscape in Informa Markets was highly decentralized. On any given website, a marketing team could choose to work with their own internal designers, outside contractors or agencies, or a specialized team that I led within the company. We created copies of our component libraries for designers to use, so they could both design within the parameters of the system and provide consistent deliverables to the development team.

Developer Documentation

Our development team used our proof of concept as a testing ground for subsequent enhancements and new features, but they also adapated that concept to their own documentation by creating a series of pages that organized and listed components in their ‘standard’ states. With some help from me, they were able to build a system that allowed them to index and catalogue the component library for quick prototyping and experimentation.

Results and Next Steps

The new design system and build process was a major success within Informa Markets. The UX research I was able to undertake showed our stakeholders a first-time look at how disparate our practices and standards were across the company, and encouraged a more unified set of best practices and KPIs to hold our web teams to. The design system we developed ultimately standardized and expanded upon features that were available within AEM, unlocking new potential for our marketers and designers while also allowing developers to remove redundancies and inefficiencies in their code base.

Because of the new system, we’ve reduced the average time to build a new site from 12 weeks to 3.5 weeks. The sites we build have been better received, and are testing better across the board among our end users – with conversion rates seeing an average uptick of 35% over previous years and websites. We are in the process of migrating all 300+ event websites in Informa Markets to this new system, with plans to have these efforts completed by 2022. Because of the robust training and documentation provided as part of this project, multiple teams can be tapped to work on different projects at once, allowing for much greater overall productivity.

We will continue to experiment and evolve the design system – refining existing components, adding new components and functionality, and introducing new Javascript libraries to extend the functionality of sites built on this system. We will also continue to coordinate with our marketing teams to develop new ‘standard’ page layouts that better reflect their needs and agreed upon best practices.

Takeaways

This project, more than any other, has reinforced my belief that it is absolutely vital for designers and developers to work closely together. Developing a naming convention and a shared language allowed this project to go so much smoother than it otherwise would have, and has been instrumental in continuously testing and improving upon our component library. No web designer is, or should be, an island – working closely with those that are building your vision is important not only because it allows you to better achieve your goals, but also because it allows you to take advantage of the skills, experience, and wisdom of your colleagues.

This project also made me realize the importance of training and documentation in getting buy-in for a design system. I’ve found that going through the process once with marketing teams has the effect of evangelizing them – they become advocates for the system, and police it themselves. Because we’ve taken their concerns into account, and involved them in the process (as opposed to dictating to them what the process will be), they have a much higher rate of buy-in, and they’re more willing to train each other and hold each other accountable. This has made my job easier, and will make the job of any future designers working within this system easier as well.

Scroll to Top