Aligning the Event Websites for HDI & ICMI

I was asked to develop a flexible design system that two similar parent brands could use to ‘standardize’ their event websites – allowing them to build sites quicker and more efficiently. Built on the content management system Sitecore, the system I developed was constructed using the principles of atomic design, and was a huge improvement on previous design cycles that involved building each event website from scratch on an annual basis.

Role

UI/UX Director
Product Design Lead

Skills Applied

UX Research
Wireframing
Prototyping
UI/UX Design

Tools

Octopus.do
Adobe XD
Adobe Photoshop

Timeline

May – August 2020

HDI and ICMI

Problem Statement

HDI and ICMI, two of Informa’s Tech division properties, work with help desk and customer support call center industries, respectively. Though their industries aren’t perfectly aligned, within the company a great deal of overlap exists between staff and ongoing strategic initiatives. However, there was little consistency between their processes and their event websites. They approached my team to fix this.

My task was to develop a design system that would be compatible with HDI and ICMI’s .NET content management system, Sitecore, and align both their event website designs and their processes. Instead of designing and building every event site from scratch, I needed to create a system that provided a solid foundation upon which the marketing, development, and design teams could build.

HDI ICMI Page Progressions
Page design progressions for HDI & ICMI

Project Goals

Conduct an audit of HDI and ICMI’s existing event websites to determine where features overlap and where discrepancies exist. Interview HDI and ICMI marketing and content staff to determine pain points, content strategy, and upcoming initiatives that need to be accounted for.

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 compatible with Sitecore.

Develop a library of page layouts and component designs. Provide documentation and work with content creators to ensure that policies are understood, and maintained. Train staff on policing themselves and their team members to maintain consistency.

Migrate HDI and ICMI’s event websites to their new design system by ‘skinning’ the approved wireframes with event branding. Work on iterative improvements through user testing and ongoing development of new components.

HDI & ICMI Whiteboarding exercises
Whitboarding / Brainstorming Session for HDI & ICMI

UX Research

Site Audits

HDI and ICMI have approximately one dozen separate conferences and events annually, not including their traveling symposiums. I looked at each website, catalogued their sitemaps, defined where overlap existed, and then proceeded to index the content and components featured on each shared page. I spoke with stakeholders from each team to determine what would be vital for the initial launch of this project, and what would need to be included as part of the post-launch product roadmap. I also took this opportunity to determine what pages weren’t helping their sites when included, through both staff interviews and analytics on user behavior from the past three years of events. We were able to institute rules around which pages would be required on every site, and which pages should never be included as standalone items on an event’s sitemap.

Staff Interviews

I facilitated both individual interviews and group workshops when determining what was needed for these sites, and also what kind of training would be required when the initial system was designed and implemented on Sitecore. I found that the staff was very open to a new system, and desperately needed guidance on content, as few of the marketers had web-specific content experience. This led to a focus on the content map and corresponding content strategy throughout the build.

Market Research

There were few direct competitors in this field, with many of them being vendor-specific events that didn’t need the breadth of topics that these industry events would require. This was encouraging as it gave me more freedom for exploration, but it necessitated that I shift my focus to discover best practices and inspiration for new functionality.

Starting the Design

Sitemaps + Content Strategy

From my audit, I moved on to developing a unified sitemap that featured a limited number of standard pages. This required a lot of back and forth with both teams, as these standard pages would be a limit on their navigation structure initially. Octopus.do sitemaps allowed us to talk through an initial content strategy as well, and allay any fears about content limitations and needed variation between websites.

Wireframes + Components

Wireframes were created in Adobe XD, translating the sitemaps and content strategy into page layouts and an initial component guide. I was able to create a component library from these wireframes, which later formed the basis of the atomic design system. Low-fidelity prototypes showed basic interactivity and allowed us to address concerns around mobile resolutions and the translation of the design system to various screens and devices.

HDI and ICMI Components
Components defined in Adobe XD

Defining our Design System

With wireframes completed, and components roughly defined, I began applying atomic design principles in the creation of a more robust design system. I broke down the catalog of existing components into their most basic elements (atoms) – typography, color, buttons, margins, padding, iconography, image treatements, etc. – and reconstituting them into increasingly complex components (molecules, organisms, etc.). Continuing to work within Adobe XD, I developed a large collection of components, some of which were needed for the initial launch of this system, and others that were anticipated or defined as ‘nice to have’ for later iterations of this project that the developerment team could schedule for build at a later time. Adobe XD functionality allowed me to set up these files to quickly and easily ‘skin’ the elements with changes to the base components, which could better reflect the branding of individual brands.

ICMI Contact Center Expo Homepage
ICMI Contact Center Expo's initial homepage mockup

The System in Action

With the design system completed, my first test case was ICMI’s Contact Center Expo Wesbite. We were lucky that ICMI’s brand designers had recently completed a rebrand which included elements that would be featured on the website. We were able to coordinate directly with them to integrate their rebrand into our new design system – providing feedback on the versatility of their rebrand while also testing the flexibility of our own design system. It took a matter of days to implement the new designs within our design documents (a process that previously took several weeks), and made the handoff to developers very quick and efficient.

Results and Next Steps

The HDI and ICMI teams were both incredibly pleased with their new system. Turnaround times for new sites were greatly reduced (from 13 weeks to 3 weeks), the marketing teams had a much clearer picture of what content to produce and how to incorporate their content onto the website, developers were able to standardize their codebase and focus on iterative improvements and expansion of functionality rather than starting from scratch with each website, and designers were able to concentrate on evolving and improving the design system rather than treating each project separately.

From a site performance standpoint, our updated wireframes and layouts performed incredibly well; we were able to reduce the load times of our sites by an average of 60%, while markedly increasing customer engagement, retention, and conversions across the board. Our new process also led to increased testing and better decision-making – we no longer have individual marketing associates overriding designers and developers on a whim, and instead test any and all assumptions through the system before moving forward. We are also able to better establish and implement best practices, as any changes that are adopted to the system are carried over to every site within the system.

Takeaways

This project’s core difficulty was in the structure of the teams we were working with; it’s incredibly difficult to manage the feedback and expectations of dozens of stakeholders spread across two teams. We mitigated this in two ways. First, we asked that feedback be provided and vetted through a funnel – having each team dedicate two ‘key’ stakeholders that were responsible for communicating their team’s feedback to the designers and developers. If the designers or developers needed to follow up on feedback, we would coordinate our questions through those stakeholders. This cut out a lot of noise, politics, and confusion in the process.

Secondly, we designated certain ‘decision milestones’ throughout the project, and framed them in the context of agreements. Since these teams needed to work together, we needed them to have skin in the game and understand that once we moved forward with a decision, we wouldn’t rehash it again until after the new system was in place and the first website was launched. Having concrete decisions and their rationalizations recorded allowed us to point back to our documentation when our stakeholders were getting off track. It was the only way we could move forward to meet our deadlines.

Scroll to Top