1. Landing Page for Partners
Part of The Laughing Cat Bake Shop's overall growth strategy is to become a supplier of baked goods to local businesses. To help them achieve this goal, I developed a simple and dedicated landing page as part of their WordPress website.
I began by creating a wireframe in Adobe XD to quickly show the main components of the landing page: a hero banner, a column detailing information about the partnership and a form where users can register their interest.
Once the layout was approved, I worked with the client to come up with copy that answers potential questions that interested parties may have. The text block is broken up into sections with headings that clearly identify the benefits of partnering with The Laughing Cat.
I then created a custom template for this page based on their theme to keep everything visually consistent.
The form was created in WordPress using a plugin and linked to MailChimp so they can track leads and monitor its performance.
To promote their new landing page, I also helped them set up ads on Facebook and Instagram.
I made it a point to make sure that the language and imagery used in the ads were similar to the ones seen on the landing page for a seamless user experience.
2. Training Registration Landing Page
After finalising their training offerings for 2018, Protecht asked me to refresh their landing page with the following goals:
- Make it easier for users to see the course offerings at a glance
- Inform users of new training locations
- Encourage users to make multiple bookings
This landing page uses a newly-created reusable template in Hubspot. Scroll through the slides below for a closer look:
1/4 Displaying the courses
The training courses were previously displayed in a vertical stack which made it hard for users to compare dates.
To make it easier for users to easily see what's available, I added quick summary cards that display the course title, summary, dates and locations, as well as a link to the downloadable training agenda.
The coloured flags on the top right of each card were added to call attention to select courses that the business wanted to promote more.
For returning page visitors, I also added a Call to Action button on the header banner so they can skip to the course registration section on the page.
2/4 Promoting the special offer
Two of the campaign's success indicators were getting more users to sign up to multiple courses and getting more registrations for the new venues.
A new section on the page displays more information about the discounted price for multiple bookings along with a standout Call to Action which takes the users directly to the sign up form below the page.
To let users know that the training courses were now available in five major cities, I added a section below the form showing the venue details accompanied by an image banner. This section allows users to download a venue guide or get directions to each venue using Google Maps.
3/4 Cross-selling during registration
The column on the left side of this section displays general registration information as well as a price comparison table, with the best value option highlighted.
The initial spec from the client only included a simple list to show the discount options, so I suggested displaying this information in a pricing table instead to help users quickly compare the options and see the benefits.
The form on the right side of the page was set up so that the displayed list of training courses changes based on the selected city in the dropdown field.
4/4 Providing social proof
Below the registration form, I added a section about the presenter to build trust and persuade users to make the purchase.
This is supplemented by an animated slider featuring testimonials from past attendees with roles similar to the target audience of these courses.
3. Demo Request Landing Page
Late last year, the Protecht Sales and Marketing team kicked off a paid ad campaign aimed at increasing system demo requests from potential customers. To support them, I developed a new page template and created a landing page in Hubspot.
We kept the landing page fairly simple with sections that are focused on delivering one key message each.
The landing page header introduces the user to Protecht's software using a colourful screenshot of the system dashboard and a quick but clear statement of its benefits to the user. A red Call to Action presents returning users with the option to skip ahead to the sign up form at the bottom of the page.
To ensure that users focus on completing the mission (ie requesting a demo), I removed all other navigation from the header but retained the company hotline on the top right.
Protecht provided the copy used in this page but left it up to me reorganise and rephrase so it fits the narrative better. For example, the original copy presented all bullet points in one big list. To make it easier to skim and digest, however, I grouped the points into solutions that address pain points for the target personas.
Rather than bombard the user with a lot of text, I implemented an interactive image slider which displays a system screenshot and a short description of what they can do with each system module. At this point, interested users can go directly to the form using the Call to Action button.
This section lists of some of Protecht's notable clients and aims to help ease any worries or reservations that are keeping the user from requesting a demo.
Call to Action and form
We limited the form to five fields to keep it from appearing daunting and made the submit button wider so it is more prominent in the section.
I'd love to work with you!
Click the button below to send me a quick note about how I can help you with your project: