Landing Page (Desktop + Mobile) · Members Directory · Design System
Overview
Superteam Brazil is a builder-focused community within the Solana ecosystem. The objective was to design a landing page that does three things effectively:
Clearly communicate the mission
Establish credibility through proof and metrics
Convert visitors into active community members
The challenge was designing for both community warmth and ecosystem authority without overwhelming users with information.
The Problem
Community platforms often struggle with:
Weak first impressions
Poor content hierarchy
Overloaded sections with low clarity
Lack of trust signals
Layouts that don’t scale as membership grows
For Superteam Brazil, the key issue was structuring diverse content (events, members, testimonials, impact metrics) into a cohesive, conversion-focused experience.
Strategic Approach
I approached the design through three core principles:
1. Clarity Before Complexity
Each section answers one clear question:
What is this?
Why should I care?
Who’s involved?
How do I join?
No section competes for attention. The layout flows logically from mission → credibility → community → action.
2. Authority Through Visible Impact
Instead of hiding metrics, I surfaced them early in the hero and reinforced them later.
Solution:
Large numeric emphasis for 500+ members, 50+ projects, 100+ events
Dedicated impact section with visual contrast
Clean spacing to prevent visual noise
This immediately communicates traction and reduces skepticism.
3. Community as the Core Asset
The strongest value of Superteam Brazil is its people.
Solution:
Designed a scalable, filterable Members Directory
Structured member cards with photo, role, and specialization
Built grid logic that adapts seamlessly from desktop to mobile
Added subtle visual indicators to create liveliness
The system supports growth without breaking structure.
Section Breakdown
Hero Section
The hero had to establish trust instantly.
Design Decisions:
Bold headline for positioning
Supporting text that clarifies the mission
Dual CTAs to support different user intents
Community imagery to humanize the ecosystem
High-contrast color accents to drive action
The result: a strong first impression that balances professionalism with approachability.
What We Do
This section translates vision into tangible offerings.
Instead of paragraphs, I used structured cards to present:
Developer support
Events & workshops
Talent matching
Funding opportunities
Strategic partnerships
Why this works:
Easy scanning
Clear value breakdown
Visually modular for future additions
It removes ambiguity around what the community actually provides.
Events System
Events signal activity and momentum.
Solution:
Card-based layout for upcoming and past events
Image-led presentation for visual engagement
Clear CTA buttons
Structured metadata (location, title, status)
The design ensures the platform feels alive and regularly updated.
Social Proof & Trust
Communities grow on credibility.
To strengthen trust:
Partner logos positioned strategically
“Wall of Love” testimonial cards
Balanced spacing to avoid visual fatigue
Instead of overwhelming the user, testimonials are integrated rhythmically within the flow.
FAQ & Friction Reduction
The FAQ section addresses objections before they arise.
Design Choice:
Accordion-style layout
Clear hierarchy
Minimal cognitive load
This supports clarity without expanding the page unnecessarily.
Final Conversion Section
The closing CTA uses a bold green background to shift from exploration to action.
Why this matters:
High contrast draws attention
Emotionally aligned messaging
Clear, single next step
It acts as a conversion anchor before the footer.
Visual & Design System
The design system was built intentionally for scalability.
Color Strategy:
Deep navy for authority
Green for growth and action
Yellow accents for energy
Neutral greys for structural balance
Components Built:
Reusable card patterns
Event modules
Metric blocks
Member grid system
Accordion elements
CTA variants
This ensures consistency as the platform evolves.
Responsiveness Strategy
Mobile was designed intentionally — not resized.
Vertical stacking for clarity
Larger touch targets
Optimized spacing
Simplified navigation
The experience remains structured and intuitive across devices.
Outcome
The final landing experience:
Clearly communicates Superteam Brazil’s mission
Reinforces ecosystem credibility through visible impact
Showcases members as the core value
Supports scalable growth
Encourages sign-ups through strategic CTA placement
The platform now feels structured, alive, and community-driven — not just informational.