UI Challenge 003: Landing Page
The third challenge that arrived in my inbox was a fun one to lead into a weekend of holiday activities: Create a landing page.
Now without mentioning any names, one of my previous bosses had absolutely no idea what a landing page was (despite working in marketing) and would use the term interchangeably with a regular event or web page that was created for a content series. It would drive myself and my counterpoint in another department crazy, especially because we both knew that a landing page is actually:
“A web page which features copy and UI elements that direct users to take a specific action that converts into sales or leads – often linked to SEO campaigns, social media, e-mail marketing promotions and/or online ads.
If a landing page is meant to convert users to leads, the page will allow the user to get into contact with the company, typically via a contact form.
If the purpose is to generate sales, there will be a link that will send a user to a shopping cart or checkout – via a tracked URL. ”
And this is what Daily UI tasked me with designing last Friday for my third UI challenge – as long as I considered the main focus of the page and the important elements to be included (e.g. call-to-actions, clarity, etc.) while designing.
So what did I choose?
My mission: Create a landing page – for a book, an album, a mobile app, a product, etc. – considering important page elements including call-to-actions, clarity, etc.
My “client”: ClassPass
Business goal: To increase membership sign ups during the holiday season via a gifting campaign
My solution: To create two landing pages (a “safe” client branded color solution and a “next level” punch-you-in-the-face holiday color solution) which promoted new ClassPass memberships as great gifting options for family and friends
The background:
When I first moved to NYC years ago I was a ClassPass member, and I loved it! It was so fun going around the city and trying out all of the fun, interesting and unique classes that were offered – including a “surfing” class and an aqua cycling class. But after a couple of years ClassPass changed their model, and their prices, and they fell out of my early career salary budget.
I’m considering joining ClassPass again – after we move out of Orlando next year – which is probably why creating a landing page for a ClassPass holiday promotion came to me straight away! After all, many people have a hard time figuring out what to buy for family and friends this time of year, and New Year's resolutions tend to always revolve around health and fitness, so it was a perfect fit!
My solutions:
Before even hopping into Figma I considered the information most important to ClassPass’ holiday campaign (which was to increase membership sign-ups) and the user (which was to fully understand what they would be purchasing, and ultimately signing their recipient up for).
Coming from a corporate design background I understand the need to stay within the bounds of a brand’s current Design System of fonts, colors and button styles, in order to create visual consistency.
But my marketing background also told me that by punching up the ClassPass blue to a bold holiday red I could both play into the feeling of the season and generate more interest and click-through purchases.
So I did some research, looking at brands such as Misfits market, Winc Wine Club, Shopify and Marley Spoon, as well as diving into ClassPass’s public media kit, and began sketching my two solutions.
Landing Page One: The “safe” solution:
Use the images from ClassPass’ media kit that were brighter and closer to the cool brand tones
Integrate the ClassPlass blue throughout
Include plenty of white space that would align with their current gifting landing page
My “safe” solution for a holiday gifting landing page
Landing Page Two: The “next level” solution:
Use the bold, red images from ClassPass’ media kit, to play into a holiday red look
Integrate the holiday red color, and well as a dividing neutral color, within the content blocks and buttons
Play with the UX writing to lighten the mood a bit more throughout the button repetition
My punched up “next level” solution for a holiday gifting landing page
I’m curious! Let me know in the comments which UI would grab your attention more and drive you to purchase a ClassPass membership as a gift!