Underwriters Laboratory Webinar Library Redesign

B2C Webpage Redesign

Introduction

Company: UL Solutions Inc.

My role: UX Researcher and Designer

Device: Web and Mobile Web

Audience: B2C

Timeframe: June 2022 - July 2022

This project was carried out as part of my role as a UX researcher and designer with Underwriter’s Laboratory. The aim of this project was to identify and correct usability issues within UL’s Webinar Library. The project also called for visual updating of many parts of the website to reflect brand style standards and heuristic best practices.

This project was carried out by a UX team of 3 people. In this team, I gathered the project’s requirements, brainstormed design solutions, produced new designs, and presented the designs to internal stakeholders.

Stage 1: Requirement Gathering

I began this redesign by interviewing internal stakeholders to identify any existing pain points, user complaints, or proposed solutions to the issue presented.

Stakeholder Interview

I conducted informal interviews with members of the content team responsible for ownership and publishing of webinar content, as well as management across the UX and Content teams to identify the scope of the project and create concrete goals for the redesign.

The main issues with the Webinar Library were that there was no consistent design language or organization across webinars, webinars were difficult to find on the website, and webinar accessibility (transcripts, screen reader optimization) was nonexistent.

Goals

• Increase webinar accessibility

• Standardize webinar page design

• Improve SEO of webinars

• Update visual language of webinars

With the goals of the project identified, I could begin the research phase of the project.

Stage 2: Research

I then researched webinar best practices and usability heuristics to identify design patterns and practices to implement in the redesign.

Best Practices for Video Use

• Supplement, Don’t Replace: Videos should support text, not replace it.

• Placement Matters: Videos at the top of pages are more likely to be watched; those at the bottom or in sidebars often go unnoticed.

• Segment Videos: For complex processes, short videos for each step are more effective than a single long video.

• Display Duration and Thumbnails: Users prefer to know a video’s length before watching and benefit from visual thumbnails that set expectations.

• Include Captions: Many users appreciate videos with captions for accessibility and ease of understanding.

Best Practices for Webinar Libraries

• Choose the Right Platform: Select a cloud-based webinar platform that minimizes barriers for attendees, avoiding the need for downloads or plugins. Ensure it's mobile-friendly and can handle varying internet speeds.

• CRM Integrations: Opt for a platform that integrates with your CRM to streamline registration and personalize user experiences. This allows for pre-populated forms, enhancing efficiency for returning attendees.

• Consistency: Maintain consistent messaging, branding, and call-to-action design across all promotional materials and during the event. Familiar colors and shapes help attendees navigate and remember key elements.

• Use Whitespace: Incorporate ample whitespace in your slides and landing pages to reduce distractions and highlight important information, creating a more focused environment for attendees.

• Verbal and Visual Cues: Since attendees may multitask, use both verbal and visual prompts to guide them through actions you want them to take, such as accessing resources or providing feedback.

Key Findings

• Providing as much user control as possible is the highest priority.

• Webinar content should not be gated behind logins or access requests.

• For effective video use and webinars, ensure that videos supplement text, are prominently placed, and are segmented into shorter clips for complex content.

Stage 3: Competitive Analysis

After researching best practices and heuristics for instructional content and web libraries, I evaluated UL’s closest competitors webinar offerings to see what features were frequently used.
Analyzing UL’s competitors provides insight into opportunities to provide unique or necessary features that competitors fail to include.

Stage 4: Design Review

I then used my research and competitive analysis findings to find weak points, inconsistencies, and usability issue that would prevent the user from accessing UL’s content.

In my review, I found that UL’s biggest problem was a lack of consistency across all webinar pages. UL did not employ a consistent design pattern and feature implementation and visual design varied greatly between pages.
Further, UL’s webinars lacked critical accessibility, hierarchy, and user control features that could improve the user’s experience.

Design Review Findings Summary

Strengths:

• Accessibility: Many webinars are accessible without an information request page, which enhances user experience by keeping CTAs for after the content.

• Content Clarity: Brief descriptions and section markers on pages help users navigate and control their pace.

• Navigability: Sorting features aid in finding relevant webinars.

Areas to Improve:

• Accessibility: Improve accessibility with summaries, descriptions, and skimming features.

• Hierarchy: Ensure videos are prominently placed with clear titles and descriptions.

• Captions: Videos should include captions and transcripts for better usability; if transcripts aren't feasible, provide summaries or timestamps.

• Content: Allow downloads of materials used in videos and make CTAs for further engagement more visible immediately after the video.

Implementing features like transcripts may incur costs, but prioritizing video placement, consistent organization, and concise descriptions can enhance usability effectively.

Stage 5: Redesign and Implementation

I then took the research, competitive analysis, and design review findings and incorporated them into our new design. Key features included are:

• Accessibility adjustments for many sensory and cognitive impairments

• Improved look and feel

• Standardized design pattern

• Adherence with brand guidelines across the rest of the site