Client
LearnQuest
Project type
UI Overhaul and Promotion
Discipline
Web Design
UI Design
Graphic Design
Role
Lead Designer
Overview
In 2018 I was brought onto LearnQuest (training partner to the world’s leading companies, organizations, and government agencies) to not only overhaul their catalogue of classes web pages, but to also create promotional material for their advertising and email marketing initiatives.
Though my time with the company was short, I was able to bring organization to the product with revamped web page templates that LearnQuest could use across their entire class library and helped create numerous graphic design pieces for their ad and marketing plans.
Research
Before I could begin any research, I first needed a thorough understanding of the product library and how each class was organized within the backend.
From there I began the process of researching how each was currently set up and then create a list of similar layouts, CTAs, and navigation to breakdown how best to create as few templates as possible.
These were the following:
• Simple customization to header (logo, background image, and copy text)
• Sub sections consisting of an icon, header text, sub text, and a text link to enroll in the class.
• Minimum means of contact.
Challenges
• The product library was incredible extensive and spanned over 10 years' worth of material. Condensing all the material into uniformed templates would be a daunting task.
• Align overall vision of how information should be presented to the user.
Goals
• Create a small collection of web site templates that could be used across the entire product library to create visual consistency and a cleaner UI experience.
• Develop icon library that could be easily implemented in the templates.
• Design a series of promotional assets for ad and email marketing initiatives.
My Solution
With the research completed, discussions were had about if there were any new functions and/or new information the company was looking to see in these templates.
I determined that the following be including:
• A dropdown menu within the header for quick navigation
• The duration time of each class
• CTA's replacing text links
• Intermittent breaks in course selections for resources and/or the ability to contact customer service representatives.
Taking these new features into account, the research, and the goals I was able to narrow the templates to three that could be used across the entire library.
Wireframes
To start, I created a series of wireframes incorporating exiting specifications and new features to purpose what the templates could look like and how they would flow.
Idea 1 - Course Focused
Designed to highlight the training and certifications available with no other distractions, only one image (in the header) and minimum amount of icon usage. The reasonming behind this one was to elimate as much potential friction as possible between a user learning about a course and purchase.
Idea 2 - Section Focus
Clear distinction between sections with images for each one and a switch in layout between sections to further emphasize the focus.
Idea 3 - Sticky Side Bar
An variation of the first idea but with a contact section always available on the side of the page to give a user quick means of communication and assistance with their selection.
Final Designs
Through discussions with project managers and the c-suite, it was decided that a blend of the first two ideas would be the best approach to take. Course focused overall with the Header section from the "Section focused" option. Rather than include a sticky contact form, intermittent about the page would be two versions of contact, a form for email contact and a link section with multiple options for contacting a representative.
From there three different templates began to take shape; a full training and certification template, a landing page template, and a brand centric template.
Landing Page Template
Designed to incorporate more branding (logos, color palette, header image, icons, etc.) to create visual consistency for the brand the training is for and the course pages.
Course Template
Occasionally a brand who we were offering courses and certifications for would request a more page more tailored to their product than LearnQuests. This template was designed to mitigate those requests.
Brand Centric Template
The Result?
Templates Created for a Library of Over 1000 Courses and Certifications.
The templatization of the LearnQuest library led to not only a unified look and feel across the entire product line, but also to greater sales due to easy to navigate UI, better conveyed links through buttons, and access to various forms of contact.