CASE STUDY
-
MARKETING
Digital Marketing
Website
ROLE
UX/UI Designer
TOOLS
Figma
01 - OVERVIEW
Professionalism,
creativity &
conversions
A personal project where I designed a website for a digital marketing agency. The goal was to create a seamless, user-friendly platform that reflects the agency's professionalism, creativity, and expertise - while driving user engagement and conversions.
The design is fully responsive across desktop, tablet and mobile, with motion design elements added to enhance visual appeal and guide users through the experience.
02 - UX PROCESS
Research-led
design decisions
01
Competitor Analysis
Analyzed competitor digital marketing agency websites - studying layout patterns, content structure and conversion strategies to identify what drives trust and conversions.
02
Design Sourcing
Sourced inspiration from design portfolios and platforms to refine UX/UI elements - focusing specifically on navigation patterns, layout structures and aesthetic directions
03
Lo-Fi Structure
Created low-fidelity wireframes to define content hierarchy, section flow and CTA placement before investing time in visual design
04
Hi-Fi + Motion
Built full high-fidelity screens across all breakpoints and integrated motion design elements for transitions and interactive components
03 - KEY FEATURES
Every section
earns its place
01
Hero Headline & Visuals
Eye-catching headline and supporting imagery to immediately captivate visitors and communicate the agency's core value proposition
02
Agency Introduction & Values
Clear section communicating who the agency is, what they stand for and why clients should trust them
03
Core Offerings with Visuals
Key services highlighted with supporting visuals - making it easy for visitors to understand the agency's capabilities at a glance
04
Portfolio / Case Studies
Work samples or case study previews that demonstrate real results and build credibility with prospective clients
05
Trust Signals
Client logos and testimonials providing social proof - addressing hesitation and building confidence before the CTA
06
Lead Generation CTA
Easy-to-use inquiry form and strategically placed CTA-driven sections designed to convert visitors into qualified leads
07
Contact & Footer Links
Essential links and contact information kept accessible for users who scroll to the bottom before deciding to reach out
08
Responsive Layout
Fully responsive across desktop, tablet, and mobile — maintaining clarity and conversion potential at every screen size
04 - VISUAL DESIGN
The asthetic
The website follows a dynamic and results-oriented visual style, combining impactful typography, modern layouts and persuasive content sections. Clear visual hierarchy and conversion-focused design elements help communicate services effectively.
COLOR SYSTEM
Primary
Secondary Main
Secondary Light
Secondary Dark
TYPOGRAPHY SYSTEM
HEADINGS & SUBTITLE
Open Sans
Regular · H1-H5 · Subtitles
76px → 25px scale
BODY, BUTTONS & LABELS
Source Sans Pro
Regular · Body · CTAs · Nav
20px → 16px scale
04 - SCREENS
Wireframe through
every breakpoint
MOTION PREVIEW
Live design preview - motion design in action.
The animated preview above shows the motion design integration live - scroll-triggered animations, interactive transitions and entrance effects across sections.
WIREFRAMES
DESKTOP SCREEN
TAB RESPONSIVE SCREENS
MOBILE RESPONSIVE SCREENS
05 - MOTION DESIGN
Animations that
guide, not distract
MOTION INTERACTION STRATEGY
Every animation has a purpose.
Motion design elements were created to enhance visual appeal and user engagement - implemented thoughtfully so they guide users through the page without competing with the core content or slowing down the experience.
Scroll-triggered animations for section content reveals - drawing attention progressively
Hero entrance animation to capture immediate attention on page load
Transition animations between interactive components for seamless flow
Subtle hover states on CTAs and service cards to signal interactivity
Staggered element entrance in feature and testimonial sections