NAthan Hines
Portfolio

Nathan Hines

Nathan Hines

Portfolio.About.Say hi.
Work
About
Writing
Resume
PortfolioAbout

Marketing Funnel UI/UX Design

My Role

Content Design
Digital Ad Design
Landing Page UI/UX Design
Webpage Development

TEAM

1 x Designer / Dev (me)

Timeline

Aug 2023 - Dec 2023

Overview

In my early career one of my core responsibilities was to design the ad creative, content, and landing pages for our marketing campaigns. I would always question how my work was impacting the campaign’s success, as well as the bottom line. This project was developed to quantify that impact, and uncover where both visual and UX design fit into those results.

Impact

I led the redesign and oversaw the development of the 1.0 Menu Printer application, focusing on expanding its design functionality and improving the overall UI/UX. Upon release we saw a ~40% increase in menu printing across our entire customer base while also eliminating the churn risk from all at-risk customers.

Stellar Menus Hero Image

Employees could personalize their travel plans and establish savings targets to allocate funds effectively.

First, partner with our content marketers to design and develop content (self-assessments, guides, infographics, etc.) that served our target market and provided actionable value to whomever chose to download it. Second, design landing pages and digital ad creative that prompt user interaction and create a seamless visual experience across the entire campaign's user flow.

My Approach
PLanning
Drag and drop UI imageColumn overflow UI Image

Easily drag and drop menu content into canvas.

Quickly identify overflow menu sections.

A key challenge was ensuring updated menu information still fit on a single, printable page. Previously, changes often caused content to overflow without notice, leading to unexpected reprints and time-consuming adjustments.

During the redesign, we identified the need for users to be alerted when content overflowed outside printable areas. This feature allows users to focus on menu updates while easily resolving overflow issues with minor tweaks before printing. The result: a more intuitive and efficient user experience.

Column Overflow Alerts
U‍X Enhancement
Old UI image
New Menu Printer UI
Before
After
Up Arrow
Mobile Menu Research Study

I leveraged a project from my HCI master's coursework to explore people's usage and opinions of mobile menus in their dining experiences. Watch me present my findings.

Many of our customers expressed the frustration of writing quality wine descriptions for their menus. This indicated a lack of accessible resources or tools to create sommelier-quality descriptions.

As a quick test, we initially launched a wine description tool on our marketing site, which gained some quick traffic. This led us to test a beta version in our Menu Manager app, but it didn't gain much traction. As a result, we kept it as a lead generation tool, where it saw more use outside the app.

AI on the Side
EXPIRMENTATION

We developed a simple tool in Menu Manger app using early OpenAI API Chat completes, allowing users to generate wine descriptions with basic length control.

These are just a few highlights. If you're interested in a deeper dive, I'm happy to chat. Feel free to reach out and we can find a time to connect.

Reach out for more...

Understanding how a user interacts with the different elements of a marketing campaign (Advertisement, Landing Page, Content) helped me to align and optimize them to increase form conversions.

My approach was twofold. First, partner with our content marketers to design and develop content (self-assessments, guides, infographics, etc.) that served our target market and provided actionable value to whomever chose to download it.
‍
Second, design landing pages and digital ad creative that prompt user interaction and create a seamless visual experience across the entire campaign's user flow.
My Approach
The user flow of marketing campaigns is quite linear. They have multiple different user starting points that lead to a single campaign landing page, where the user will need to fill out a web form to be able to download the associated piece of content. During the initial stages of this project, I decided to add a “Thank You Page” as an additional step in the user flow as a way to avoid pushing the user off-site after completing the form.
User Flow Analysis
I quickly learned that no matter how eye catching or UX optimized our ad creative / landing page designs were, without quality content, that our users desired, we would not see significant increases in our form conversion rates.

Through a true partnership with the content marketing team, and by taking a more user-centric design approach, I was able to design content that not only had unique visual styles, but a thoughtful and intuitive user experience that provided actionable value to our users.
Content is King

Click to view ebook

Click to view assessment

Click to view checklist

Click to view worksheet

Within each step of the campaign, there is always potential for users drop off. However, my hope was that by using consistent visual designs within each campaign, along with an optimized user interface, we would build a seamless experience that helped to reduce user friction and abandonment.
A Seamless Experience
In many cases this is the first user interaction (initial engagement) so it's important to understand ad placement and how it will affect type size, color and word count, while still retaining visual consistency with the rest of the campaign.
Digital Ad Creative

Examples of digital campaign ads. When designing digital ads it was important to understand its placement. Seeing how the “user” would interact with it, and optimize the design accordingly.

The landing page is the key point of value in the demand generation user flow. It is the step where users decides to input their personal information in exchange for the content, allowing for the business to grow its lead numbers and potentially building future revenue opportunities.

After researching landing page best practices and testing other leading SaaS landing pages, I ultimately developed 2 page designs that integrated the key elements of my findings.
Landing Page Design

Click to see example

Click to see example

After researching “marketing campaign landing page conversion rates” it seems that there are many different takes for a conversion rate benchmark , across many different industries, with no real consensus (Growfusely, Hubspot). However, across the board, a landing page that converts at a rate of 10% or above is considered above average.
Results
Over the course of the 2.5 years I spent working on the marketing team I was able to test these designs within our major marketing campaigns. After seeing such positive results from both designs, we decided to implement them both across our marketing site, using the higher converting design for our larger campaigns.

As I look back, I reflect and appreciate the beginning of my design journey within a marketing team. There I began crafting my user centric design muscles, but more importantly was exposed to how a business "sells". This context deeply informed my ability to connect product feature/functionality to the market problems we were solving, and how our "prospects/customers/users" will gain value.
Conclusion