LANDING PAGE DESIGN

Dubarry of Ireland - Page Design

My Role
Designer/CMS Editor
Timeline
Jul 2022 - Present

Landing page design

One of the main day-to-day tasks I was assigned with in Dubarry was to create and publish landing pages for each of the 7 markets the company sold to. In addition to designing new pages, I was also tasked with updating the homepage and other high traffic landing pages on the site. Figma was the chosen tool for designing the page layout and resizing the imagery. After exporting the imagery from Figma, Adobe’s Photoshop was used to compress the images in order to help improve the page load speed metric. Adobe Illustrator was also used to design SVG images for some landing pages that were used to showcase the products unique selling points. Designing the pages before jumping into the CMS proved to be very helpful and eased the process of designing the pages across the tablet mobile and desktop views. Alt tags were added to the images on each of the landing pages and Meta Titles and Meta descriptions were also added.

Mock-up of an instagram advertisement
Mock-up of a hero image for Shannon Airport blog post
An example of a graphic created for Twitter to promote an upcoming webinar.
Mock-up of a hero image for Shannon Airport blog post
Screenshot of Dromoland Castle redesign including hero section
Mock-up of a hero image for Shannon Airport blog post
Screenshot of the Dubarry of Ireland product page before the redesign
Mock-up of a hero image for Shannon Airport blog post

Custom development

The CMS being used at the time in Dubarry allowed custom HTML elements to be placed on the page. This feature was utilized when a new sign-up form was needed to sit on its own landing page. The design was created for mobile, tablet and desktop views and used code from the customer data and experience platform. 

To improve the user’s experience and increase the number of internal backlinks, it was decided that a menu with links to subcategories be positioned just above the footer on some of the landing pages. This new element was initially designed in Figma and later developed using HTML and internal CSS.

Screenshot of Dromoland Castle redesign including hero section
Mock-up of a hero image for Shannon Airport blog post
Initial concept for the redesigned product page that I designed
Mock-up of a hero image for Shannon Airport blog post
The newly designed reviews that I created, which we are currently in the process of integrating into the site.
Mock-up of a hero image for Shannon Airport blog post

Based on the feedback gathered from users during the second round of usability testing, we decided to implement the following changes. However, we are still in the process of addressing some of these issues:

  • Add the product technology logo to product cards for products that feature specific technologies.
  • Rewrite the text on product cards appearing in product recommendation blocks or on the collection page to highlight key product USPs, such as whether the product is waterproof, breathable, windproof, etc.
  • Add tags to product cards with product callouts such as "Waterproof," "Breathable," etc.
  • Add tags to Mega Menu items to distinguish between Country Boots (Waterproof) and Country Lifestyle Boots (Not Waterproof).
  • Switch to a one-page checkout.
  • Offer better filtering options on the collection pages such as improved price filtering and other possible filtering options as outlined by Kate Moran of Nielsen Norman(Moran, 2018).
  • Add a sticky "Checkout" button on the mobile cart page.
Example of a collection page featuring 'Adspots' and the GORE-TEX logo, added to highlight the waterproofness of Dubarry’s bestselling leather boots with GORE-TEX lining.
Mock-up of a hero image for Shannon Airport blog post
An example of a looping video created for television screens within each of the 7PSD department based around the globe.
Mock-up of a hero image for Shannon Airport blog post
Mock-up of an twitter card with new branding
Mock-up of display advertisement for google ads
Next Project

Dubarry of Ireland - Page Design

My Role
Designer/CMS Editor
Timeline
Jul 2022 - Present

Landing page design

One of the main day-to-day tasks I was assigned with in Dubarry was to create and publish landing pages for each of the 7 markets the company sold to. In addition to designing new pages, I was also tasked with updating the homepage and other high traffic landing pages on the site. Figma was the chosen tool for designing the page layout and resizing the imagery. After exporting the imagery from Figma, Adobe’s Photoshop was used to compress the images in order to help improve the page load speed metric. Adobe Illustrator was also used to design SVG images for some landing pages that were used to showcase the products unique selling points. Designing the pages before jumping into the CMS proved to be very helpful and eased the process of designing the pages across the tablet mobile and desktop views. Alt tags were added to the images on each of the landing pages and Meta Titles and Meta descriptions were also added.

Full desktop prototype can be found hereFull mobile prototype can be found here
Current design of the Dromoland Castle website
Mock-up of a hero image for Shannon Airport blog post

Custom development

The CMS being used at the time in Dubarry allowed custom HTML elements to be placed on the page. This feature was utilized when a new sign-up form was needed to sit on its own landing page. The design was created for mobile, tablet and desktop views and used code from the customer data and experience platform. 

To improve the user’s experience and increase the number of internal backlinks, it was decided that a menu with links to subcategories be positioned just above the footer on some of the landing pages. This new element was initially designed in Figma and later developed using HTML and internal CSS.

Screenshot of Dromoland Castle redesign including hero section
Mock-up of a hero image for Shannon Airport blog post
Screenshot of the "Choose the Perfect Room Section" from the redesign
Mock-up of a hero image for Shannon Airport blog post
Screenshot of the "What's the Occasion Section" from the redesign
Mock-up of a hero image for Shannon Airport blog post

Guest Reviews

  • Inclusion of Social Proof: Added positive TripAdvisor reviews to build credibility,as Dromoland may be less recognisable than large hotel chains.
Screenshot of the Footer from the redesign
Mock-up of a hero image for Shannon Airport blog post

Footer Enhancements

  • Simplified Layout: Removed clutter like award logos and weather widget; these can be relocated to a separate section if needed.
  • User Actions: Added email sign-up for offers to help build a larger prospect base for Dromoland and added a “Contact Us” button for easy access to support.
Next Project

Dubarry of Ireland - Page Design

My Role
Designer/CMS Editor
Timeline
Jul 2022 - Present

Introduction

I've been personally using the HP Nutrition brand for a while now to purchase protein supplements and bars. I thought it would be a good opportunity to redesign their site with the goal of decluttering it and improving the conversion rate. My focus was on redesigning the sales funnel for a user journey that starts on the homepage, moves through a collection page, and ends on the product page.

Initial Thoughts on the Current Website

Landing page design

One of the main day-to-day tasks I was assigned with in Dubarry was to create and publish landing pages for each of the 7 markets the company sold to. In addition to designing new pages, I was also tasked with updating the homepage and other high traffic landing pages on the site. Figma was the chosen tool for designing the page layout and resizing the imagery. After exporting the imagery from Figma, Adobe’s Photoshop was used to compress the images in order to help improve the page load speed metric. Adobe Illustrator was also used to design SVG images for some landing pages that were used to showcase the products unique selling points. Designing the pages before jumping into the CMS proved to be very helpful and eased the process of designing the pages across the tablet mobile and desktop views. Alt tags were added to the images on each of the landing pages and Meta Titles and Meta descriptions were also added.

Full desktop prototype can be found hereFull mobile prototype can be found here
Current homepage hero section
Mock-up of a hero image for Shannon Airport blog post

Menu

Custom development

The CMS being used at the time in Dubarry allowed custom HTML elements to be placed on the page. This feature was utilized when a new sign-up form was needed to sit on its own landing page. The design was created for mobile, tablet and desktop views and used code from the customer data and experience platform. 

To improve the user’s experience and increase the number of internal backlinks, it was decided that a menu with links to subcategories be positioned just above the footer on some of the landing pages. This new element was initially designed in Figma and later developed using HTML and internal CSS.

Redesigned hero section including redesigned menu
Mock-up of a hero image for Shannon Airport blog post
Added blog section with content tags
Mock-up of a hero image for Shannon Airport blog post
  • Pagination was used to help users navigate between collection pages. Upon reflection I would probably use a “Load More” button as an alternative as it’s shown to be more user friendly as per the Baymard Institute’s article. I opted against infinite scrolling as it can hinder users access to the collection description, additional content below the product cards and footer.
  • I would suggest implementing a feature to allow users to return to the exact scroll position they were at on the collection page after clicking through to a product page so they can resume browsing where they left off as per the Baymard Institutes recommendation.
  • The collection description section was added beneath the product cards grid. A “Read More” button was added to the collection description so users can expand the content if they wished. This approach balances SEO needs with UX ensuring non-essential content doesn’t overwhelm the user and add unnecessary scrolling
  • Linklists were added which contain internal links to similar collections in an effort to help guide users to collections which align with their browsing interest. Internal linking can also help with SEO efforts.
Redesign of the collection page
Mock-up of a hero image for Shannon Airport blog post

Product Page

The product page was the final part of the sales funnel to be redesigned and optimised.

Highlighting Key Information

  • The original product page lacked clarity on the solution the product provided.
  • Key pieces of information were pulled from the product description, including if the product was suitable for vegetarians or vegans and the amount of protein and calories per serving.

Product Imagery

  • Didn’t put an emphasis on product shots, as they would be less relevant to HP Nutrition audience.
  • Featured images were added below the carousel to make the product more appealing.
  • These images were generated using MidJourney AI, mainly as an experiment to explore its capabilities.

Buy Box

  • Breadcrumbs were added within the buy box for aesthetics purposes however upon reflection, they may need to be moved to the left of the page, pushing the product imagery down the page.
  • Social proof in the form of reviews and ratings were added to the buy box
  • A quantity selector was added, making it easier for users to purchase more than bag of protein powder.
  • Opted for a more visual way for users to choose flavours and added the option for users to purchase based on weight.
Redesign of the product page
Mock-up of a hero image for Shannon Airport blog post

Sticky Add-to-Basket Button

  • The right buy box scrolls independently of the content in the left column meaning no matter where the users scrolls to on the page on desktop, the add to bag button will be always present with the intention of improving the conversion rate of the site.
  • This allows users to make a purchase as soon as they’ve decided whether they need to read reviews first, read the description or see what influencers are using the product before making the purchase decision.
  • This design was inspired by a similar approach on the Dubarry of Ireland product page, which resulted in an uplift in conversion rates.

Content and Layout

  • Broke up the overly long content on the original HP Nutrition page to improve readability.
  • Included reviews in dropdown menus to further condense the page and make information easier to digest.

Product Features

  • Added a features section in the left content area to highlight key product information that might be particularly useful to users.

Social Proof with UGC

  • Introduced a section featuring User-Generated Content (UGC) from Instagram
  • Placeholder images currently display content relevant to the product
  • Ideally, this would show users mixing or using the product for better authenticity.

Cross-Selling Carousel

  • Added a cross-selling section at the bottom of the page, including recommended products tailored to the customer and best-selling products for further suggestions.
Redesign of the product page featuring the redesigned product recommendation blocks
Mock-up of a hero image for Shannon Airport blog post

Thanks for taking the time to read about this passion project.

Please see links below to the full desktop prototypes.

Next Project