Agency Landing Page & Web Design — UI/UX Case Study
In this article, I’m gonna be sharing a little bit about a web design project that I did for a US-based agency. I’ll explain about my design workflow, thought process, design decisions that I made and the reasonings behind them.
Client and Project
The client is a full-service agency, who intent on leveraging technology to craft solutions for both small and large businesses. They’re looking to expand their services onto Google Ads Management, and as well offering a free grader-tool that assesses Google Ads Campaigns which will give users a score based on various metrics and variables. I was tasked to create 2 landing pages, one for the “Main Landing Page” which includes how they can help businesses in managing their Google Ads campaigns, pricing system, their statistics, etc., and the other one will be for the free grader tool which will direct users to try out their grader and assess their Google Ads campaigns for free.
Main Objectives
- Develop high-value lead capture tools by creating two separate landing pages
- Create landing pages that are not only visually appealing, but convey information clearly and reflect the brand’s visual identity
- Implement dual call-to-action strategy, offering a free Google Ads Account grade, leading to a separate landing page
Resources
To get started, the client already has an established brand book for me to follow and base the landing pages on. They also had some reference from competing agencies websites to show me what they’d like to see.
Structure
Here are the finalized site structures for both pages before moving onto the wireframes.
Wireframes
The client knowing exactly what they want really put us on a head start. I jumped straight onto wireframing based on the reference provided, and gave them several options for the layout and structures.
Tweaking the Style Guide
Even though they have an established brand guide, I had to make a new style guide customized for these 2 pages, based on their existing brand book of course. Minor changes were made such as adjusting the line height so that they follow the 8pt grid system, as well as tweaking the L value (HSL) so that all shades have consistent increment.
First Draft, Feedback, and Iterations
After the first draft of the design is completed, there were some feedback left by the client, based on which I have implemented updates on the design iterations.
Final Design
Here are the final design for both landing pages:
Main Landing Page
Grader Tool Landing Page
Summary
Creating these landing pages from scratch was another fun project that I enjoyed. Designing web pages with an already established brand guidelines really quickens up the process, although experimenting with creative design decisions was a little bit of a challenge since most of the page has to follow their already existing landing pages for other services. The client was satisfied with the result, and I realized that taking up these kind of projects never really is about creating what I want to see, but what is best for users and the business.
