Case Study: Redesign of Webinar Resources
The In-Fusion product line is a cornerstone of Clontech’s offerings, yet materials created by different teams over time looked disjointed and scattered. I initiated and executed an overhaul of various online materials focusing on product webinars, achieving visual cohesion and continuity in addition to optimizing usability.
Planning
I first identified existing materials that would be redesigned and what specifically could be improved. As I soon realized, this meant more than just updating web pages; the videos themselves were in need of revision as well as subsequent materials. The flow ran as follows.
Webinar landing pages
-
Registration landing page
Problems: Content only described product selling points and did not promote webinars themselves.
Cartoon character was from different video series and had no relevance to this page.
Sign-up form did not stand out.
Page was not included in main website navigation, making it impossible to find without a direct link.
-
Webinar selection
Problems: Layout was awkward; no description of webinars.
Illustrations were unrelated.
Page was bland, offering no compelling reason for users to play videos.
-
Video landing page
Problems: “Buy now” buttons and pricing information were poorly used as product could not be purchased from this page.
Table was overpowering while tech support links served no purpose to the page.
Subsequent product pages
-
Selection guide
Problems: Design was uninspired for a page that delivered important information to customers.
Imagery was not unified with previous pages.
-
Pricing page
Problems: Right-side icons were chaotic, unattractive, and not easy to follow.
Highlighted text looked like an error.
Video update
I next worked to improve quality for the videos, as they had previously had received negative feedback.
Original recording
The webinars were originally recorded in standard definition with poor resolution, resulting in an odd aspect ratio that left awkward black bars on either side and made it difficult to read information on-screen.
My approach was to rework the slides in HD format, preserving the soundtrack while offering clearer text and graphics. I also took the opportunity to improve the animation, which had previously been unsynchronized and a bit sloppy.
In the process it became clear that the science itself was not easily understood while the drawings had been made hastily and looked unprofessional. Play original clip
I worked with a writer to visualize processes more clearly and with artistic precision, getting input from product manager and tech support for final approval. Play updated clip
Design
At this point we were able to move forward. By reanalyzing content and collaborating with experts on the technology I offered a new direction in messaging, with focus on promoting webinar content and secondary links to further product information.
Primary landing page: Webinar information
Registration page was migrated to be part of regular website navigation, with introductory paragraph defining benefits of product. Subsequent messaging directed customers to webinars relevant to their area of research. Form was prominent on page and unifying product image, which would be used throughout campaign, was in place. I developed simplified versions of graphics from each webinar to create distinct visual identities.
We retained a link to the other video series featuring the unidentified cartoon character, making it a secondary call-to-action with descriptive text on how it might be relevent to viewers, helping to tie together a broader campaign.
Webinar selection page
Completing the form brings users to the gallery, where they can select a video to view. This page was kept simple; since the customer had already chosen to sign up we didn’t want to add clutter with unnessessary information. As an improvement over previous version we added an introductory paragraph identifying this a a follow-up to form submission, made webinar titles and length of videos clear, and call-to-action buttons prominent. Again, the unifying icon and webinar identity graphics were used for continuity.
Webinar viewing page
I chose not to play each webinar directly on the gallery page as it would become distracting as more videos were added. The subsequent viewing page allowed us to focus content on the specific subject. Video was presented in widescreen format and filled the viewing window without black bars on the sides.
Text links to the related video series and to the product selection guide were included, describing the benefits of each to the viewer.
Product overview page
I revised this page to segment information more specifically. After a brief product overview, the primary table quickly identified areas that might benefit customer (saving time, being efficient, or having flexibility.) Secondary tables received a different visual treatment, offering checklists to help further hone the users’ product selection.
Once again, unifying imagery was used in addition to cleaning up icons (more on this below.)
Iconography
Finally, I updated the graphics that appeared on the final pricing pages. This was the initial trigger that began the whole project and it was satisfying to close it out by creating a unified set of icons. I worked with the project manager to reduce the number of outbound links, leaving us with no more than a recommended four total icons per page. These graphics were clean, modern, and communicated the concepts more clearly than prior versions.
Results
After time passed we found the redesign had produced very favorable numbers. Sign-ups had increased from 147 to 202 over similar six-month periods. Most notably we had measured only five visitors to a single webinar landing page in the two years prior to launch; after restructuring this number increased to 61 viewers in just six months. In addition to obtaining valuable, relevent contacts we greatly improved engagement on these pages. In conclusion, this project was a success and provided a positive benefit to the product, increasing customer awareness and understanding.