top of page
Top Hat Events Page 

July - September 2022

The purpose of adding a net new events page to tophat.com was to showcase our expertise and authority in the higher education field. Displaying our past and present events will build trust with customers and prospects as well as provide easy access for anyone looking to see what Top Hat is doing, including employees.

Process

During the course of a two-month period I was the lead designer working on adding an events page to our corporate website. This meant I developed the implementation strategy as well as led the research, wireframing, user experience, high fidelity design, oversaw the development and QA process to build this section from scratch. 

 

I worked with the goal of having educators understand & utilize the value of our (new) products and features, as well as create a hub for events  intended to drive revenue.

 

I did this by breaking my work into three sections: 

  1. Understand and idenfity the problems

  2. Generate a wide breadth of potential solutions through research and inspiration 

  3. Identity concepts for high fidelity exploration

Understand and
Identify the problems

The major problem is that there is a disconnect between marketing and revenue departments. Our own Top Hat employees were unaware of which events and training sessions are available for prospects and customers to attend. Creating an easy to nagivate single source of truth would not only help our internal teams but also our prospective and existing customer base with resources to support their unique use case.

 

This lead me to a few HMW (how might we) statements to help define a solution. HMW: 

  1. Enable users to quickly access our events page?

  2. Create a clear hierarchy of events, including distinguishing between future and past virtual events that are hosted on our website?

  3. Make this experience dynamic considering our user base ranges from employees to current users to prospective users?

Generate a wide breadth of potential solutions through research and inspiration

In order to create a wide breadth of ideas I began by finding inspiration. I didn’t keep this first search specific to industry or even type of project. I looked at design systems, UI patterns of e-commerce websites, blogs, event print work often sparks an idea. For this phase of projects I like to create a master document to share with key contributors. In this case the SEO manager, Shannon,  and I did a lot of competitor research we reviewed the higher education landscape to identify what was industry standard and where there were gaps to differentiate. To complete the discovery phase I collaborated with our Growth team to to ensure all CRO best practices are understood and met.

 

To wrap this phase of design I made digital sticky notes of everything that needed to be included in my wirefame(s) for a successful experience.

Identify concepts for high fidelity exploration

To me, identifying concepts for high fidelity design means a lot of trail and error. My goal for this phase was to narrow down my ideas into concepts that I could render in high fidelity and take to my larger team to continue research on. 

 

I did this by wireframing as many solutions as I could using the ideas from the previous phase. From here I presented these ideas to my Creative Director, Copywriter, Content and Events, Growth Marketing and Development teams. The feedback from this call helped confirm categories, updated my hierarchy of events based on importance from the Events team, and solidify metrics for testing from Growth. From this presentation came a defined direction to continue and answers to my HMW statements.

HMW enable users to quickly access our events page?

The simplest solution to this was to add an events tab to our main navigation with the goal of increasing visibility increase likelihood of organic traffic.

HMW create a clear hierarchy of events, including distinguishing between future and past virtual events that are hosted on our website?

The beginning of an answer to this statement came from my research and inspiration phase. I worked with the Content and Events team to create categories for our past and future events, ensuring this was a general exercise that we could complete only once. But the questions remained: How could we visually connect and divide these events depending on the user? And how could I ensure flexibility in the top of the page to ensure interaction with our most upcoming and important events? Visually I was able to do this through category headlines and iconography. However, this simple visual solution and category updates made things complicated functionally. The complication came from updating our 100+ past events to fit our new system. This made my developer and I  work and publish in two phases to be able to complete the third HMW statement. 

 

Phase one included:

  • Adding Events to the main navigation 

  • Creating a hierarchy for general events as well as

  • Develop categories and a tagging strategy 

  • Allow flexibility in the top of the page for most important events (directly below hero) 

 

I was able to release phase one as a static page. This allowed me to manually manipulate the events into their correct category without having to go into the backend yet. Phase one is live while we continue to detangle the data for a phase two release. 

 

Since releasing this page in early September 2022 we have had a 400% increase in organic traffic to individual webinar registration pages.

HMW make this experience dynamic considering our user base ranges from employees to current users to prospect users?

The answer to this question came from the same answer as our HMW statement 2 - future proofing categories for our events and ensuring our backend was up to date. Our backend was not up to date so this meant the developer and I had to re-work and update the tagging system of our website. This work ensured correct functionality but now I had to go back to section 2 of this process (Generate a wide breadth of potential solutions through research and inspiration) to add an interactive piece to the hero section. Because I broke this project into two phases I repeated sections two and three with the same team. 

 

Based on the performance of phase one so far I was able to use that data to influence and validate my thinking for phase two. 

 

By giving each user the option to filter the information to their preference we gave them the opportunity to have a unique experience.
 

Once this phase two is live I will work with our growth team to continue measuring as well as adding in new metrics such as:

  • Length of active time on page 

  • Setting up active goals for specific users and tracking their completion rate (i.e. We know a new top hat user is on the page, do they interact with our top hat training or certification categories?) 

  • What % of first time users register for an event with us? 

  • What % of those users book a demo or create an account after coming to an event?

​

Phase two design is currently in development. When the page is live I will add creative.

bottom of page