top of page
Top Hat Pages case study

September 2022 - Present

Top Hat Pages is a feature on the Top Hat application that was not previously highlighted on our main corporate website. Our team built this campaign to highlight the highly personalized content you are able to create within Top Hat through pages with the goal of generating $560,000 to our Fall 24 pipeline.

Process

I was the lead designer working on the Pages campaign. In terms of web creation and development I  led the research, wireframing, user experience, high fidelity design, oversaw the development and QA process. I managed our small design team to create assets for email, organic and paid social, in-app pop-ups (pendo), video, and our blog resources related to Pages.

 

I worked with the primary goal of educating prospects on the value of using Pages as well as creating a unique and modern visual language. 

 

The steps I took to achieve this goal were to: 

  1. Understand the context and define the problem 

  2. Brainstorm, Validate & Iterate 

  3. Visual Identity

  4. Polish and Measure 

  5. Refine based on new data

Understand the context
and define the problem

The main problem with Pages was a lack of user understanding and clarity in our messaging. I worked very closely with our Product Marketing Team to understand the key differentiators of Pages compared to the current market and how we can highlight these aspects through design. These conversations lead to defining my HMW (how might we) statements for research. 
 

HMW:

  1. Accurately show simplicity of the personalization aspect of our Pages feature? And how can we make this very personal feature connect to anyone in any discipline?

  2. Let users interact with this feature without creating a Top Hat Account? 

  3. Create interest in our users booking a demo of our platform?

  4. Create an innovative experience that still feels like it is inside of our application?

Brainstorm, Validate and Iterate

The brainstorm section of this project was different than most based on my second HMW statement: How might we let users interact with this feature without creating a Top Hat account? My team and I worked with interactive demo software in the past but we were looking for something that had more design customization capabilities. The stakeholders from Growth, Product, Development and myself (design) researched different platforms we could use to tell the story of pages in an interactive way. 

 

Based off of competitive research lead by Product Marketing we were able to confirm that our product had a unique fit within the higher education space. We are able to update content in real time to react to our ever changing world and provide students with accessible, inclusive and relevant content. In tandem with software research myself, a copywriter and Product Marketing used the information gathered to brainstorm how we could tell the story of Top Hat Pages.

PAGES- WIREFRAMES.png
Visual Identity

This section of the project was focused on branding and campaign identity. I wanted the product to shine as the main visuals but I still needed to incorporate a more modern and vibrant feel. When working to push a brand forward I like to collect past assets and see the natural growth as a place to start. Looking to continue on this evolution is when I started to add in new pieces of inspiration. For this project visually, I was inspired by band posters and duotone screen prints. I wanted to convey the same energy on this page as what you felt looking at an event poster you were looking forward to. I wanted the user to feel excited by what they were able to do next. Functionally, I was inspired by our app. I wanted to show old static courseware we we’re all used to and using Top Hat the user is able to change that same content into something dynamic and relevant. 


A key messaging component of our Pages feature was that a user was able to create current, relevant and inclusive course content. I really wanted this to be obvious in the visual design and an impactful way to do this was through imagery. During my inspiration phase I came across the illustrator Chidiebere Ibe. His work is featured in many publications for promoting diversity in healthcare, and he is the artist of one of the first series of medical illustrations of Black bodies. I knew we had to showcase his work in telling the story of Pages.

The copywriter on our team, Warren, and I brainstormed to tell the story of Top Hat Pages inside Top Hat Pages. We used different forms of media, like videos and gifs to represent being current. We displayed an old medical illustration being swapped with Chidibere Ibe’s work to showcase the idea of being relevant and we showed our accessibility features to convey being inclusive. This helped in answers my HMW statement 4. (Create an innovative experience that still feels like it is inside of our application) I lead the video project and hired a very talented motion designer to bring Warren and I’s storyboard to life. 

 

Based on the idea of using our app to tell the story of Pages myself and another designer used the visual language I created to build paid and organic social ads, email banners and other Pages related visual resources.

Ad-2-General.png
Ad2-Economics.png
Polish and Measure

The purpose of this page was to drive awareness but ultimately increase revenue. The Growth team and I decided to use the basics of a wireframe from our top converting page and update it based on the interactive demos. Our best performing page used common but effective elements to drive conversion such as CTA and value proposition above the fold, product images and social proof for validation. Once we confirmed the elements needed and best practices to result in conversion I put these ideas into a wireframe. The whole process up until this point had been very collaborative - Myself, Warren, our copywriter, Product and Growth Marketing had been working as a team to ensure all statements of opportunity were met in the design. 

 

Refresh on HMW statements: 

 

1- Accurately show simplicity of the personalization aspect of our Pages feature? And how can we make this very personal feature connect to anyone in any discipline?

 

To accurately show the highly personalized features of Top Hat Pages we will build out 3 interactive demos for users to engage with using a platform called, Arcade. We will use google analytics and the data we have collected through users and outreach to serve discipline specific ads to those users. Users who enter the Pages journey through those discipline ads will be served a personalized landing page with language and content specific to their teachable. Net new users or users we do not have saved data with will experience more generic content.

 

2- Let users interact with this feature without creating a Top Hat Account? 

 

These 3 interactive demos are surfaced as an ungated asset, as in a user can interact with these features without prodiving us with any personal information.

 

3- Create interest in our users booking a demo of our platform?

 

By giving users a personalized and interactive experience I expect they will be more interested in booking an indepth demo of our platform with our revenue team. 

 

4- Create an innovative experience that still feels like it is inside of our application?

 

The UI I created utilizes our application as a visual language. We are giving the user a concentrated experience by using vibrant and directional frames for each demo.

Refine based on new data

After 6 weeks of the page being live we learned from google analytics that: 

​

  • The time on page is well above industry standards with the average time being 5 minutes 44 seconds

  • Users spent the most time on the first interactive demo, with an 80% completion rate (10 interactive elements total including final CTA to book a demo)

  • In total of all interactive demos the final CTA was only clicked by 1 user total (1.2K page visits as of Jan 2022)

  • 35 users total have clicked any CTA on the page but of those 35 users only 8 have completed the form to book a demo with Top Hat

  • 9% of users make it to the bottom of the page where as 79% of users interact with the top 25% of the page - this includes the hero section and first interactive demo. 

 

Our customer engagement manager and I also conducted 3 user interviews to continue to test messaging, discuss the actions they’d like to take after engaging with the page, thoughts on the demos and overall experience. 

 

From those conversations we learned: 

  • Users were unclear that pages is a feature inside of the top hat app, they were under the impression this was the entire application

  • Only one user clicked all three demos and they did not make it to the end. The other users only interacted with one.

  • All users said their next steps would be to compare Top Hat to other options, google reviews/ if they were really interested try to find a video with their specific solution or speak to a colleague

  • All users requesting pricing information

  • Users noted this felt targeted toward people who weren’t using technology already (that is not just from this page but after going to our educator stories as well)

 

What does this mean? How can I improve the experience based on these metrics. And what are my next steps? 

 

The first thing we know is that three interactive demos are too many. Majority of users are only engaging with the first demo and also not making it to the bottom of the page. I am currently collaborating with product marketing to rework the three demos and combine them into one. The key being this one master demo has to be less than 8 clicks to maximize engagement. 

 

The second thing we can confirm based on the above is that booking a demo for Top Hat does not resonate with users. I have a few thoughts on why this might be and some alternatives:

 

  1. We are giving away too much information in the interactive demos. By the time the user completes the demo they have gone through our entire pages feature, there is no need for them to go through another walk through of the product. 

  2. Some users interacting with this page aren’t ready to commit to Top Hat yet, what are some alternative more low stakes options for them to engage with that will teach them more? The team and I have been brainstorming and some ideas could be webinars or events, a free account with a course pre populated inside for them to get familiar with on their own time, a simple gated asset to download and read more, a link to our pricing or comparison pages. We will run experiments through our growth team to test all options.

 

This results in two very actionable steps for phase two:

  1. Only show one interactive demo for the user to engage with. This means combining the three we show currently into one. 

  2. Update the offer across all CTAs and ideally A/B test different offers outlined above to confirm our thinking. 

  3. Update our messaging so it is clear that Top Hat Pages is a feature and not the whole application 

  4. Showcase the student experience

bottom of page