Keyword genie
Landing page Design
AI-Powered SEO Tool
Challenge
Code & Coffee Philadelphia asked me to consult on the design of their new tool, Keyword Genie, but they weren’t sure how to translate it into a user-friendly landing page.
They asked me to help shape the structure, flow, and visual logic of the design.
Client
Code & Coffee Philadelphia
Tools
Pen + Paper
Role
UX/UI Consultant
Duration
1 week
Solution
I provided a framework for the page by focusing on how users naturally read and interact with a landing page.
I focused on common reading patterns, particularly the L-pattern. My recommendations were about aligning the layout with these natural eye movements and keeping the experience simple.
core utility
Defining value
Building trust
Visual identity
Guiding choices
Core Utility
I recommended putting the tool itself front and center. Taking inspiration from Google’s homepage, I suggested placing the search input and “Go” button right in the hero section. The “Select Your Objective” tabs gives users a simple way to frame their search and feel oriented. No extra clicks—users know exactly what to do when they land.
Defining the Value
I recommended adding a section that visually communicates the tool’s benefits. I designed a card layout with a large icon to communicate function quickly, a keyword for emphasis, and a short description for context.
Building Trust
To reinforce trust, I suggested adding a testimonial section where real users share their experiences. Users should see real feedback and feel confident using the tool.
In one week, Coffee & Code had a clear, structured landing page design that:
Put the tool first
Users land on the page and immediately see the input field, so they can start without hesitation. The objective tabs guide users through different use cases, helping them feel oriented from the start.
Highlighted value
The four-card section pairs big, intuitive icons with keywords and short descriptions, making benefits easy to scan.
supported trust
Real user quotes add credibility and reassurance, showing that others have found value in the tool.
The end result was a landing page that feels intuitive, credible, and ready to use.
the Full Experience
See how the landing page works in real time