Responsive Website Design
Social Gaines
Social Gaines has been a successful marketing agency and industry figurehead for over a decade—helping clients grow through strategy, design, and digital campaigns. Despite their success, they lacked one critical piece: a website of their own.
The goal was simple:
A modern, engaging website to establish Social Gaines' digital footprint, generate leads, and further expand their brand identity.
Keep it scalable and malleable, to match Social Gaines' quick growth rate and expanding client base.
Tools
Framer
Figma
Adobe Creative Suite
team
1 UI/UX Designer (myself)
Weekly collaboration with stakeholder
My Role
User Research
Responsive Web Design
Timeline
3 Weeks
The Challenge
While Social Gaines had a strong reputation showing quick growth, there was an opportunity to form a more robust and cohesive brand identity. The challenge was to translate 10+ years of offline credibility into a compelling online presence that reflected Social Gaines’ pedigree, while clearly communicating their services, values, and unique personality. Furthermore, the site needed to be scalable to support future integrations, such as industry-specific lead generation targeting.
Business Impact
The launch of the Social Gaines website marked a major milestone: their first digital platform after more than 10 years of operating without one. This new online presence allowed them to:
Increase brand visibility and credibility by giving prospects a professional destination that reflected their reputation.
Generate inbound leads with clear service offerings, engaging visuals, and strong calls-to-action.
Showcase proof of value through detailed case study pages, built as a repeatable, scalable framework for sharing future client success stories.
Overall, the new site positioned Social Gaines as a modern, accessible agency ripe for growth in a competitive market.
My Process
01
Discovery
I worked closely with Social Gaines leadership to understand their brand story, core audience, and business goals—working to capture Social Gaines’ unique voice. We mapped out user flows that prioritized clarity, ease of navigation, and strong calls-to-action. This discovery process took a few different forms:
Stakeholder Interviews
Weekly chats with Social Gaines' founder to discuss design strategy and content updates throughout the build process.
Taking stock of existing brand assets
Accessing and organizing all existing brand materials, to identify what gaps I'd need to fill as the site progressed.
Pitch Deck Analysis
Poring over client pitch decks to get a sense of Social Gaines' mission statement, key value propositions, and get a sense of how they communicate with clients.
Client Case Study Analysis
Reading through client case studies to pinpoint the types of industries Social Gaines works with, and identify the varying services they offer.
02
Strategy & Ideation
The design needed to strike a balance: bold and creative to reflect Social Gaines’ personality, yet professional and trustworthy for their B2B audience. Low-fi wireframes in Figma laid the foundation for hierarchy and flow. We played with content placement and refined messaging before moving to more refined UI.
03
Design & Build
The final site was developed in Framer, allowing for smooth animations, precise responsiveness, and easy handoff. Dynamic layouts showcased services, case studies, and brand messaging in a way that felt lively yet user-friendly.
The homepage was designed as the first impression of Social Gaines: bold, fast-moving, and clearly marketing-forward.
Large typography establishes authority, while a simple scroll structure introduces services, case studies, and credibility markers without overwhelming the user.
Subtle animations in Framer bring energy and motion, reflecting the agency’s personality while guiding visitors toward “Get in Touch” calls-to-action.
The Services page needed to speak to two audiences at once: decision-makers who skim quickly, and detail-oriented clients who want depth. To achieve this, I designed the page around tab-based navigation for Social Gaines’ three primary offerings—Content, Community, and Conversion.
Each tab acts as a clear entry point into a focus area, while a sub-navigation system of pill buttons organizes the sub-categories under each offering (e.g., Video Production, Blog & SEO, Marketing Automation, Influencer Partnerships). This structure ensures that visitors can scan at a high level or drill into specific services without feeling overwhelmed.
Content within each tab is presented using modular service cards with concise headlines, supporting copy, and subtle hover effects to add interactivity. This design balances scannability with depth, making it easy for potential clients to find exactly what they need.
Agencies live and die by their results, so the Our Work page was designed as a gateway to credibility. I created a clean grid of case study cards, each featuring strong visuals, and hover interaction to reveal a quick snapshot of the challenge and solution—just enough to spark curiosity and encourage clicks.
Clicking a card opens a dedicated case study page (e.g., Murray & Regan Law), where the story unfolds in full: outlining the client’s challenge, Social Gaines’ approach, and the measurable impact of their work.
Individual Case Study pages were built with a dynamic CMS collection in Framer, allowing Social Gaines to scale new case studies easily. Each study uses a consistent layout—overview, challenge, solution, and outcome—so prospective clients can quickly understand impact. High-contrast visuals, client logos, and bold headlines give credibility and polish.
The Contact page was treated as a conversion focal point—it had to feel like a welcoming, low-friction entry point for prospective clients.
The layout opens with a direct, human-centered headline (“Let’s Talk Growth”) to set the tone. A branded vector graphic emphasizes Social Gaines' three primary offerings: Content, Community, and Conversion, to reinforce approachability and position Social Gaines as a partner rather than just a service provider.
The form itself is intentionally minimal—only asking for Name, Email, Preferred Service, and Message— to reduce barriers to outreach.
The page includes alternative contact pathways—direct email and phone options—ensuring users can choose the method most comfortable for them.
04
Problem Solving: Finding Our Voice
One of the most significant challenges throughout this project was developing a brand voice and tone. As a marketing agency, Social Gaines wanted the copy to feel friendly, approachable, and creative—a reflection of their internal culture and the way they work with clients.
At the same time, many of their core clients are in high-trust industries like law, real estate, and tech, where professionalism, credibility, and clarity are critical. Leaning too far into playful language risked undermining that trust; leaning too far into corporate formality risked losing the brand’s personality.
Honing In on a Solution
Primary landing pages use friendly accent messages and conversational headers that are engaging but concise, supported by subheads that clarify value in more professional, results-oriented terms.
Case Studies and Industry pages are a little more no-nonsense, considering that's where users go to establish trust, and seek out quantifiable results.
Primary Landing Pages: casual/playful voice & tone:
Case Studies & Industry Pages: casual/playful voice & tone:
05
Next Steps
Ease of access to Case Studies and Industry Pages: Users need a more direct avenue to find client case studies and industry-specific solutions. I'd like to add these as drop-down menus in the primary nav bar.
Expand the case study library: Continue adding new client stories to showcase Social Gaines’ expertise across industries.
Conversion testing: Track lead submissions, engagement events, and scroll behavior to optimize copy, CTAs, and user flows for higher conversion.
Iterate on brand voice: Continue fine-tuning copy as Social Gaines expands into new industries to maintain the right mix of friendly and professional tone.
Key Learnings
Voice and tone matter as much as visuals. The hardest design problem wasn’t layout or color—it was striking the right balance between a conversational, approachable voice and the professionalism required by industries like law and real estate.
Scalability is strategic. By structuring the Services page with tab navigation + pill sub-navigation and designing a modular case study library, the site can easily grow alongside the agency.
Conversion is holistic. A strong Contact page only works if every preceding page (Home, Services, Work) is designed to funnel users there seamlessly. Thinking about the full journey—not just individual screens—was key.
Framer accelerated polish. Building directly in Framer allowed me to match Figma designs with responsive layouts, subtle animations, and easy client handoff—bridging design intent and real-world execution.