Get The Guy
Matthew Hussey is a leading dating expert and confidence coach for women. He has helped millions of women get the love life of their dreams.
Project Type
Landing Page Design
Project Type
Dating
Client
Matthew Hussey has built the number one organization in the world that is empowers women to transform themselves and their love lives. The Matthew Hussey organization recently completed a rebrand. The organization was renamed to Get the Guy and a new visual language was developed.
Goal
Beyond just updating the landing page's visual identity, I wanted to optimize the content and layout to increase conversation.
The Problem
Not only was the visual identity outdated, but the landing page's structure and content were convoluted.
When the original design was created, there was no thought about the user experience or optimizing the content for conversation. The landing page’s purpose was not clearly defined and lacked excitement, connection and value.
Solution
I utilized the branding guidelines and image assets that the Get the Guy team provided me to develop a landing page that was focused, clean and modern.
The key component to my solution was to edit the existing copy so that user could connect with the product’s value. An example of the type of copy changes that I made to showcase the value of the product is the hero section’s H1 tag. The original H1 tag said, “Our March 22 Virtual Retreat is Close.” To help drive the user to join the waiting list for the next virtual retreats, I revised the hero section H1 tag to read, “The Most Transformative Event We’ve Every Delivered.”
The Challenge
The Get the Guy team made typographic decisions during the rebranding that are problematic for web accessibility and digital marketing. Utilizing three typefaces overly complicated the typographic pallet and added excessive weight to HTTP Header Requests that a more strategic typographic pallet would have avoided. I also found it particularly odd choosing Kiona as the main headings font because it is an all-caps font, which decreases legibility, accessibility, and negatively impacts the user experience.
Not Christmas, But Accessible
I strive to achieve a AAA color contrast rating on all my web design projects. The Get the Guy team created a beautiful color pallet during the rebranding. However, this color pallet did not meet the WCAG 2.0 guidelines for web accessibility color contrast standards. I developed the AAA compliant color pallet by utilizing the provided teal-inspirated green and magenta-focused red as its foundation. The color pallet has five categories that consist of Neutral, Primary, Secondary, Primary Accent, and Shade. Each color category has at least five variants that range from light to dark.
Typography & Color Pallet
Headings
Kiona
The Historia
Body Text
Avenir LT Std
Color Pallet
Neutral
These colors are used as supporting secondary colors in
backgrounds, text colors, separators, etc.
Primary
The primary color palette is used across all the elements such as
CTAs, links, inputs, active status, etc.
Secondary
The secondary color palette is used alongside the primary to
indicate to the user it’s the secondary focus
Primary Accent
The usage of the primary accent color palette should be reserved to
call attention to key elements in a supplementary role.
Shade
These colors are used as supporting secondary colors in
backgrounds, text colors, separators, etc.
Mockups
Landing Page
Solution
The finished website was an overwhelming success. Within the first three months, the new Request Info form increased lead generation by 52%.
With further testing, I was able to increase lead generation by an additional 5% by changing the Get Started submit button from the original dark blue to a bright orange. The modular system that utilized Advanced Custom Fields significantly decreased the amount of time it took the Hunter Business School staff to edit the website. As one person on the Hunter team put it, “I used to spend hours at night updating the website.”