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. Following a comprehensive rebrand, I led the complete redesign of their web presence, translating new brand guidelines into a digital experience that serves two distinct audiences while driving measurable conversion improvements.
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 digital 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.
01
Visual Identity Disconnect
The existing site relied on generic stock illustrations and outdated branding that failed to communicate their premium positioning as an enterprise software provider.
02
Poor Conversion Performance
A homepage conversion rate of just 2.15% was actively hindering growth.
03
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 website needed to feel like two experiences in one — unified by brand, 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
Discovery & Strategy
I mapped each audience's journey separately — understanding that a nonprofit program director and a Fortune 500 sustainability officer have completely different pain points, vocabularies, and trust signals.
This informed everything: navigation structure, content hierarchy, imagery choices, and CTA placement.
Competitive Analysis
I analyzed the client's reference sites (Slack, Wealthsimple, Pingboard, Flyhyer) and identified key patterns:
- Clean, spacious layouts with generous whitespace
- Custom illustrations that reinforce brand personality
- Clear, benefit-focused value propositions above the fold
- Conversion-optimized CTAs with minimal friction
Strategic Approach
Visual Strategy Move from generic SaaS aesthetics to a sophisticated, purpose-driven design language that bridges corporate professionalism with nonprofit authenticity.
Conversion Strategy Implement separate, optimized demo flows and tailored value propositions for each audience. By reducing form friction through progressive disclosure and strategically placing social proof throughout the user journey, we streamlined the path to action and increased overall trust.
Early Exploration
Before any visual design, I focused on content strategy and page structure. Working with the Socialsuite team, I created wireframes to map out user flows and content hierarchy — ensuring we solved the structural problems before layering on brand.
The homepage needed to quickly route two different audiences to relevant content, while industry-specific pages had to speak directly to sector needs (like metals and mining companies navigating ESG compliance).
These wireframes became our 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 palette could shape the emotional tone of the site. The rebrand provided a rich color system — but how bold should we go?
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. It struck the right balance: distinctive enough to feel fresh, professional enough for enterprise credibility, and flexible enough to work across both nonprofit and corporate audiences.
Visual Identity System
The rebrand gave me a sophisticated color palette and logo geometry. My job was to extend this into a complete digital design system — one that could flex between nonprofit warmth and enterprise credibility.
Color System
Primary Colors
Ocean
#014682Lagoon
#00a0aaSecondary Palette
Sky
#00a0c8Grass
#bcc896Leaf
#00a096Deep Water Gradient
A sophisticated blue-to-teal gradient that added depth while maintaining accessibility — used strategically in hero sections to create visual interest without overwhelming content.
Typography
Characters & Numbers
OPQRSTUVWXYZ
abcdefghijklmn
opqrstuvwxyz
1234567890!@#$%
I selected Roboto for its versatility and clean, modern aesthetic. Its excellent readability across screen sizes and weights made it ideal for both data-heavy ESG content and emotion-driven impact storytelling.
Custom Illustration System
"Custom design over stock photos... visual identity to be driven by our mission and vision"
Rather than generic SaaS illustrations, I developed a distinctive visual system that merged authentic photography with geometric abstraction:
Photography & Circular Frames
Inspired by the client's logo geometry, I created a series of circular frames using concentric line work. These frames:
- Echoed the logo — maintaining brand consistency through circular motifs
- Created visual hierarchy — drawing attention to key imagery
- Flexed across audiences — warm and human for nonprofits, professional for enterprise
Photography was treated in black-and-white with subtle brand color overlays — real people in authentic moments, showing diverse industries from nonprofits to mining to manufacturing.
Icon System
I implemented the Phosphor icon library in duotone style — aligning with the brand's modern aesthetic while providing a comprehensive library for use across the website, product, and marketing materials.
Key Design Decisions
Decision 01
Expanding Logo Geometry Into a Design System
The Socialsuite logo is built from overlapping circles — a visual metaphor for connection and impact. When the team decided against traditional illustrations, I saw an opportunity: expand this circular language into a complete visual system. Concentric circles, overlapping shapes, and circular photo frames became the vocabulary — creating brand cohesion without relying on generic SaaS illustrations.
Decision 02
Photography Treatment Over Illustration
Rather than typical tech illustrations, I proposed black-and-white photography with subtle brand color overlays. This achieved three things:
- Authenticity — real people, real impact
- Flexibility — works for both nonprofit and enterprise audiences
- Sophistication — elevates beyond typical SaaS aesthetics
Decision 03
Progressive Disclosure in Forms
The original demo form asked for everything upfront — creating friction. I redesigned it with progressive disclosure: start simple, reveal complexity only when needed. This reduced perceived effort while maintaining lead quality for the sales team.
The Solution
A website that speaks two languages.
The final design creates distinct pathways for each audience while maintaining unified brand integrity. Nonprofits see mission-focused messaging and impact stories. Enterprise users see compliance frameworks and ROI data.
Same brand. Different conversations.
Outcome
The redesigned website launched in December 2022.
165+
Organizations served worldwide
2×
Conversion rate target
"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 system has since been adopted across Socialsuite's product interface, sales materials, and investor presentations.
Reflection
This project reinforced something I believe deeply: the best design solutions often come from constraints.
When the team decided against traditional illustrations, it pushed me to expand the logo geometry into a full visual system — a solution that ended up being more distinctive and ownable than any illustration library could have been.
It also taught me the value of designing for clarity over cleverness. Two audiences, two journeys, one cohesive brand. That's the balance enterprise software demands.