Overview
Socialsuite is a global leader in ESG and impact measurement software, serving 150+ organizations worldwide — from nonprofits like YMCA and Habitat for Humanity to publicly traded companies on NASDAQ and NYSE.
They came to me with a logo and a set of suggested brand colors. Everything else — the visual language, the photography approach, the illustration system, the typography, and its primary digital application — I designed from there.
The Challenge
Socialsuite had a problem: their website didn't match their market position.
As a platform serving both Fortune 500 companies and leading nonprofits, they needed a brand presence that could speak credibly to both. Instead, they had outdated visuals, a confusing user experience, and a homepage conversion rate of just 2.15%. The goal was ambitious: double conversions to 4.5% — without sacrificing lead quality.
Visual Identity Disconnect
The existing site relied on generic stock illustrations and dated visuals that failed to communicate the premium positioning of enterprise software.
Poor Conversion Performance
A homepage conversion rate of just 2.15% was actively hindering growth.
Audience Confusion
A single "Book a Demo" flow attempted to serve two dramatically different audiences — creating friction at every touchpoint.
Original Homepage Design
Inconsistent Messaging & Layout
The Core Insight
The real problem wasn't design — it was clarity.
One message can't resonate with both audiences. The brand needed to feel like two experiences in one — unified by visual language, differentiated by intent.
Social Impact Users
- Who: Nonprofits ($1–10M revenue)
- Focus: Community impact reporting
- Buyers: Program directors, grant writers
- Tone: Approachable, mission-focused
ESG Users
- Who: Public companies ($10M–2B market cap)
- Focus: Regulatory compliance
- Buyers: C-suite, sustainability officers
- Tone: Professional, data-driven
I mapped each audience's journey separately — a nonprofit program director and a Fortune 500 sustainability officer have completely different pain points, vocabularies, and trust signals. This shaped everything downstream: navigation structure, content hierarchy, imagery, and CTA placement.
Early Exploration
Before any visual design, I focused on content strategy and page structure. I wireframed the core templates with the Socialsuite team to map user flows and content hierarchy — solving the structural problems before layering on brand.
The homepage needed to quickly route two different audiences to relevant content. Industry-specific pages had to speak directly to sector needs (like metals and mining companies navigating ESG compliance). These wireframes became the alignment tool — getting stakeholder buy-in on structure before committing to pixels.
Homepage wireframe — mapping content hierarchy and user pathways
Industry page wireframe — tailored structure for sector-specific audiences
Visual Direction
With structure locked, I explored how the brand could feel — and how to make a single visual language hold both audiences credibly. I tested three directions:
Direction A
Energetic & Bold
A yellow-gold background paired with teal accents created energy and optimism — but risked feeling too playful for enterprise audiences.
Direction B
Premium & Confident
A deep ocean-to-teal gradient anchored by the brand's circular motifs — bold and contemporary, with a sophistication that signals enterprise credibility without feeling cold.
Direction C
Clear & Minimal
A clean, light background let the product UI and brand shapes take centre stage — the most restrained option, prioritising clarity and content over colour.
The Decision
We landed on a variation of Direction B — the teal gradient. Distinctive enough to feel fresh, professional enough for enterprise credibility, and flexible enough to work across both nonprofit and corporate audiences.
The Brand Language
With two completely different audiences, the brand needed a language flexible enough to shift between nonprofit warmth and enterprise credibility while staying unmistakably theirs.
Color System
I developed a two-tier palette: primary brand tones that carry the brand's weight, and a secondary set that lets the language shift register — warmer for nonprofit contexts, more restrained for enterprise.
Primary Colors
Ocean
#014682Lagoon
#00a0aaSecondary Palette
Sky
#00a0c8Grass
#bcc896Leaf
#00a096Deep Water Gradient
The ocean-to-lagoon gradient became the brand's signature surface — used in hero moments and key brand statements. It carries depth without becoming decorative, and it's the single most identifiable element of the brand's digital expression.
Typography
I selected Roboto for its readability across screen sizes and weights — ideal for both data-heavy ESG content and emotion-driven impact storytelling. One typeface that could carry both registers without shifting voice.
Circles as the Visual Language
The logo is built from overlapping circles — a visual metaphor for connection and impact. Rather than treat the logo as an isolated mark, I extended its geometry into a full brand vocabulary. Concentric circles, overlapping shapes, and circular photo frames became the system's signature — creating brand cohesion without relying on generic illustration.
Photography System
When the team decided against traditional illustrations, I proposed black-and-white photography with subtle brand color overlays — real people in authentic moments, framed in the brand's circular geometry. This gave the brand a human register that illustrations couldn't, while staying visually distinctive across nonprofit and enterprise contexts.
Icon System
I implemented the Phosphor icon library in duotone style — a comprehensive iconographic set that carries the brand's modern aesthetic across the website, product interface, and marketing materials.
Key Design Decisions
The Brand's Visual Alphabet
The strongest move in the project was extending the logo's circular geometry into a complete visual language. Rather than treating the logo as a standalone mark with a palette around it, I made the circle the brand's atomic unit: concentric circles, overlapping shapes, photo frames, section dividers. The brand got a signature shape language that couldn't be imitated and didn't need illustration to feel distinctive.
Photography as the Anti-SaaS Move
SaaS brands default to abstract illustration. I proposed the opposite: real people, black-and-white, framed in the brand's circular geometry with subtle color overlays. This gave the brand a human register — essential for the nonprofit audience — while staying visually distinctive enough to carry enterprise credibility. One treatment, two audiences.
One Brand, Two Pathways
Rather than designing two sites or splitting the brand in two, I designed a single brand language that could shift register through tone, imagery selection, and content hierarchy. The brand stays unified; the conversation doesn't.
Progressive Disclosure for Conversion
The original demo form asked for everything upfront — creating friction that was costing real conversions. I redesigned it with progressive disclosure: start simple, reveal complexity only when needed. This reduced perceived effort while preserving lead quality for the sales team.
Redesigned Demo Form — Progressive Disclosure in Practice
The Final Brand
Outcome
165+
Organizations served worldwide
2×
Conversion rate target achieved
"It was fantastic to work with Omar - from start to finish he was a delight to work with! Omar went above and beyond to help us deliver our project on time - going above and beyond the original scope of work to help us create an incredible website. His training on the CMS was fantastic, and I recommend Omar to anyone looking for assistance with a Webflow site!"
The visual language has since been adopted across Socialsuite's product interface, sales materials, and investor presentations — outliving the website engagement as the company's working brand system.
Reflection
Socialsuite is the project where I learned how much of brand design happens after the logo.
A logo and a color palette aren't a brand. They're the starting ingredients. The brand is everything that happens next — the shape language, the photography system, the gradient logic, the way typography behaves, the decisions about what the brand chooses not to do. That gap — between a brand's ingredients and a brand that actually works across every surface it needs to — is where I do my best work.