Page content competed for attention
Product messaging, feature details, customer proof, and calls to action needed a clear order on the page.
Selected work Marketing web design
Lone Wolf Marketing Web Work
Shipped marketing work
I designed homepages, product pages and emails for Lone Wolf Technologies, and supported WordPress production with reusable sections and responsive layout rules.
Project / Oct 2020-Jun 2023Marketing web design
- Role
- Marketing web designer
- Context
- Lone Wolf Technologies · In-house marketing web
- Timeline
- Oct 2020-Jun 2023
01 / Overview
My contribution
Website and campaign design, responsive layout rules and WordPress production support
At Lone Wolf, I designed marketing pages for software used by real-estate agents and brokers. I worked with marketing, SEO, and web stakeholders on homepage and product page layouts, reusable sections, and email design.
I supported production with responsive layout rules and WordPress sections that could accommodate changing content. Internal campaign details and performance data are not included.
- Working with
- Marketing, SEO and web stakeholders
- Scope
- Marketing web design, WordPress pages, responsive implementation
- Tools
- Figma, WordPress, HTML/CSS, JavaScript
3
Selected examples
A homepage, a product page, and an email design.
CMS
WordPress constraint
Page sections had to work with WordPress editing and production workflows.
Rules
Reusable section model
Hero, feature, proof, product, and conversion sections follow repeatable content and layout rules.
EvidenceThe homepage, product page, and email examples document delivered work. No individual effect on reach, conversion, or revenue is claimed.
02 / Problem
Organizing product information for agents and brokers.
Repeated sections needed shared rules
Teams needed consistent layouts for recurring content so they could build new pages without redesigning each section.
Allow for CMS content changes
WordPress components needed to handle different content lengths while keeping the page structure consistent.
Project context
An overview on the homepage, detail on product pages
The homepage introduced the software offering. Product pages needed space for features, supporting proof, and a clear next action for agents and brokers.
Consistent type and hierarchy across web and email
I carried typography, content hierarchy, and calls to action across page designs and email layouts while adapting them to each format.
WordPress content needed responsive rules
Headlines, feature copy, images, and calls to action had to work with changing CMS content. My production support addressed section structure and mobile stacking.
03 / Design decisions
Layout rules for WordPress pages.
Match the content order to the page
The homepage introduces the software range. Product pages give features and supporting proof more room. I reused section layouts while adapting their order to each page’s purpose.
Reuse sections with room for different messages
Hero, feature, product, proof and conversion sections have repeatable layout rules. A short campaign offer and a detailed product explanation can use the same system without forcing every section to carry the same amount of text.
This map shows the recurring sections: hero, features, product cards, proof, and calls to action.
Carry the hierarchy into email and WordPress
I adapted typography, content grouping and calls to action for email. For the WordPress build, I defined how sections stack on smaller screens and accommodate changing copy.
Design process
Define what each page needs to do
I planned the content order around each page’s purpose, from introducing the software range to explaining a product and its supporting evidence.
Set rules for recurring sections
Hero sections, proof bands, feature blocks, product cards, and calls to action shared layout rules that could be reused across pages.
Design for the WordPress build
Frontend constraints informed the layout rules so sections could be implemented, maintained, and added to over time.
Reusable patterns
Landing page modules
Shared layout rules let new pages reuse hero, feature, proof, and conversion sections with the same structure.
Product card patterns
Product cards group product families and feature details in repeatable layouts for comparison.
Responsive content rules
Related content was grouped and given stacking rules for smaller screens.
Structure for CMS updates
Reusable fields and controlled section options let content change within the same layout rules.
04 / Gallery
Project images
Product page design
My product page layout separates the offer, features, supporting proof, and calls to action so each has a defined place in the page.
Email and campaign support
The email design adapts the website typography and content hierarchy for a campaign, with a focused message and call to action.
05 / Outcomes
Selected website and campaign work.
Website page designs
I designed the homepage and product page layouts shown here, organizing the offer, features, supporting proof, and calls to action.
Campaign sections and email design
I designed reusable page sections and email layouts that carried typography and content hierarchy across website and campaign work.
WordPress production support
I supported WordPress implementation with responsive layout rules and reusable sections designed for CMS content updates.
How the work was reviewed
Pattern reuse review
Sections were checked with recurring content to see whether they allowed enough variation while keeping a consistent layout.
Responsive implementation review
Layout checks covered CMS content length and behavior at different breakpoints.
Message clarity review
The review checked whether the hierarchy explained the purpose of each page without requiring every paragraph to be read.
Looking back
Designing reusable sections gave editors a consistent layout for product explanations, customer quotes and campaign offers. Each section also needed enough flexibility to handle different amounts of copy.
For future iterations, I would check the sections with short and long content and test how visitors move from a product overview to the next action.