Landing Page Template Design and Process for Fluke
OBJECTIVE
To streamline and standardize Fluke's internal landing page creation process, used within the company's product research stages.
OVERVIEW
ROLE: Product Innovation Engineer
TIMELINE: 12 weeks (Summer 2024)
KEY AREAS: User Research, Web Design & Adaptability, Web Development, DNS setup, Digital Analytics, Process Guide Development
PROBLEM CONTEXT
A Landing Page (LP) experiment is a short research experiment that reaches a high volume of customers to learn about a potential new product's pricing, desirability, and viability. At Fluke, product teams typically dedicate 2-3 weeks to conduct this during the Dream stage of a product to seek Customer Validation and Business Model Validation.
PROBLEM:
Executing a landing page experiment requires the expertise of Product, Marketing Digital and Design, Legal, Web Development and more.
Involving multiple departments slows down the process. However, these critical roles cannot be excluded as each department’s contribution is critical to the integrity, security, and success of the experiment.
Previously took between 4 weeks to many months to deploy a landing page through Marketing. (Marketing has too much on their plate while also having to handle a large bulk of the LP process.)
MY JOB:
Develop a streamlined process template that enables Dream stage team to create landing pages as independently as possible while also ensuring that the landing pages are following all company and departmental standards.
Create standard work for this template so all future teams can learn how to do it themselves.
THE LANDING PAGE PROCESS
Product teams relied on other departments for this entire process, but now they want to do it themselves to save time:
Now, I had to conduct research and interview each relevant department for all of these steps. After some post-it journeys, enlightening discussions with my team and mentors, and project management organization on Miro, I was able to figure out what could be done independently as long as the template adheres to the respective department's policies and will not be changed.
KEY
WHAT I DID:
refers to the template process I developed for that specific stage of landing page creation, designed so future product teams won't have to worry about or handle this step at all.
WHAT PRODUCT
TEAMS DO:
refers to the minimal steps required for teams to customize the template with their specific project details. These steps are outlined and taught through the standard work process I later create.
SITE DESIGN
WHAT I DID:
Designed customizable templates for future teams to easily input their product assets
Ensured I aligned with Fluke branding though Fluke's UI library as these LP's are going out to customers who would not trust a company site if it didn't look like our brand
Focused on a mock product page design per the needs of current product teams
Chose Framer as the web builder for easy design input, ability to edit responsiveness, form code integration, and more
WHAT PRODUCT TEAMS DO:
Have their assets ready
Log into Framer (from shared mailbox) and fill in the template to suit their project needs
SURVEY FORM CODE INTEGRATION
WHAT I DID:
Worked with Marketing Automation Manager to create a template Eloqua form through code that can be customized per team + passes data to the correct folders through ID system
Converted 1400 lines of HTML code to Javascript and integrated Eloqua scripts
Prioritized protecting users
Context: Eloqua is an existing platform and process Fluke uses for marketing campaigns. It is well trusted to protect customer data received from our landing pages, so it was a non-negotiable for me to integrate this into my website as opposed to finding a new process. Previously, teams that tried to do things independently overlooked the importance of protecting customer data.
WHAT PRODUCT TEAMS DO:
Edit certain lines of code (and take out unneeded fields) to customize the form to fit their needs
OBTAIN + ATTACH SITE URL
WHAT I DID:
Obtained subdomains “newproducts.fluke.com” and “dreamproducts.fluke.com” and pointed them to Framer’s CNAME so they can be attached to any Framer project
Prioritized web security + compliance with customer privacy regulations, worked with several IT teams
WHAT PRODUCT TEAMS DO:
Attach or detach the URL with a click of a button and publish
“Excellent work! Pages are super performant, secured, and data privacy compliant. That’s what’s important, aside from good production value for customers”
–Kevin Davison, Fluke Web Development Manager
WEB ANALYTICS
WHAT I DID:
Worked with Digital Analytics Manager, who helped me create a Google Analytics (GA) property + Tag Manager to attach to my sites
Contributed to standard work document instructing how to access and create reports from the data
Learned the ropes of GA to understand what information product teams can get from these pages
WHAT PRODUCT TEAMS DO:
Request access to the Google Analytics property
Interpret the data and customize graphs/reports to their liking
CREATING THE GUIDE (STANDARD WORK)
Now that I have fleshed out a new, quicker template process, it's time to create a guide to instruct product teams how to complete the steps I have listed in the above sections!
DELIVERABLES:
A PowerPoint guide for the entire landing page process (only actions that future team members need to take)
Tools within the guide: Eloqua Form Code Standard Work Doc, Google Analytics Standard Work Doc, Framer How-To Video (that is specific to the design), other mini lessons
Slide from the PowerPoint guide
Page from the Eloqua Form Code Std Work
Framer How-To Video
USER TESTING:
I conducted three 1-1.5 hour sessions with different test users. These test users are all employees of Fluke with roles that are relevant to the landing page experiments. They also have different levels experience with different parts of the LP process.
Prior to the session, I asked them to read over the guide so they would have some semblance of understanding when I ask them to complete tasks. When the session started, they played around with Framer and other areas before getting started. They completed the given tasks to create their own fake landing page with the guide on a different monitor so they could follow along.
My goal was to gauge effectiveness + identify areas that may need more guidance. Through these findings, I edited my guide to account for any questions that may arise or the right people/resources to turn to.
RESULTS AND IMPACT
Reduced landing page setup time by about 50%.
Testing showed that users were confident in their ability to create a landing page within a week or two, depending on how much time they could dedicate to it per day.
Took me about 30 minutes to create Team Vision’s (more below) two landing pages with my template process
Beginners need more time, but I am confident that once people gain the experience, one day it will only take them 30 minutes too.
Delivered a comprehensive guide to walk future teams through this process.
The last user testing session and informal discussions with mentors proved the guide's effectiveness, especially for complete beginners who have zero experience in any part of the process.
Helped Team Vision deploy two landing pages.
As a side quest, I became an adjacent team member to Vision, a team that requested two new landing pages for 2 different versions of their new product idea to test desirability.
I got to contribute to their team by creating these LP's from start to finish so they could get their research experiment while I also get to test the process I've developed!
Contributed to three new Standard Work documents for different areas at Fluke.
Through my collaboration with the Marketing Automation, Web Development, and Digital Analytics departments at Fluke, not only did they help me create my standard work guide, but I also got to contribute to new standard work that they developed after my project revealed gaping holes in the prior process!