Hero Section Design
PUPGRADE is a pet supplement brand focused on providing healthy treats for dogs.
About the Project
The goal of this project was to create a hero section that reflected the brand’s identity while combining aesthetics with strategy to encourage user action focusing on conversion rate optimization (CRO). In addition, the project followed a mobile-first approach, prioritizing simple navigation, fast-loading visuals, and a smooth experience for mobile users.
Visual Strategy
I chose this visual approach to give the hero a stronger presence and make the message feel immediate, clear, and memorable. The composition helps guide attention naturally, so the main idea stands out without feeling crowded. It also matched the project’s objective because it supports the content instead of competing with it, creating a balance between visual impact and straightforward communication.
Case Study
The visual approach was chosen to create a clearer hierarchy, stronger presence, and a more memorable first impression. I used a layout that balances impact and readability, so the page feels more engaging without losing clarity.
Beyond the hero, I redesigned the rest of the page as a case study to practice building a more complete system in Figma. That included refining spacing, section rhythm, typography consistency, and visual continuity across the page. It was also a way to think like a real product or campaign page, where each section has to support the next one instead of existing in isolation.
Priorities
When building this project, I had in mind some specific visual directions I wanted to dive in:
Clear information hierarchy, so the most important message appears first.
Strong CTA placement, to guide action without distraction.
Consistent headings and section structure, which helps scanning and improves readability.
Keyword-friendly content organization, making the page easier to understand for both users and search engines.
Visual rhythm and spacing, which improve engagement and make the page feel more professional.
Responsive thinking, so the layout could adapt cleanly across screen sizes.
Cohesive styling across all sections, which strengthens brand perception and makes the page feel intentional.
Tools
For this project, I used Framer Studio and Figma to support the design and development process. The images used were already provided and selected by the company's design team.
