Case Study

Top Women Careers:
Brand & UX for an Inclusive Career Platform

I built Top Women Careers from scratch: brand identity, UX, and a WordPress site the team can manage themselves.

My Role
UX/UI Designer & Front-End Developer
Scope
Brand Identity · UX/UI · WordPress Build
Year
2023 - 2024
Industry
Recruitment & Inclusion
Web Strategy
UI/UX
Branding
HTML
CSS
WordPress
Elementor
Hero image, Top Women Careers final website on desktop & mobile
Visit the website

01. Project Overview

A platform built to connect women with purpose-driven employers

Top Women Careers is a recruitment platform dedicated to connecting ambitious women with employers who are genuinely committed to gender diversity, equal pay, and inclusive workplace culture. They came to me with a clear mission, but no digital presence strong enough to carry it.

The brief was ambitious: build a brand from the ground up and deliver a website that felt as purposeful and trustworthy as the platform's values. That meant combining strategic UX thinking with a bold, distinctive visual identity that spoke directly to both job seekers and forward-thinking employers, and a robust, scalable WordPress build that the team could manage independently.

Brand overview, logo, identity system, and key visuals

02. The Challenge

Building trust and clarity for two very different audiences

Top Women Careers needed to speak credibly to two audiences with very different needs, ambitious women looking for meaningful career opportunities, and employers who want to demonstrate genuine commitment to inclusion. Getting both right, in a single coherent platform, was the core design challenge.

01

No Brand Identity

The platform launched without a defined visual identity, no logo, no colour system, no typography. Every design decision needed to be made from scratch with purpose and consistency.

02

Dual Audience Complexity

Candidates and employers needed entirely different journeys, messaging, and CTAs, but had to coexist within one coherent platform without either audience feeling like an afterthought.

03

Credibility from Zero

As a new platform, Top Women Careers had no track record, no testimonials, and no brand recognition. The design had to build trust from the first pixel, entirely through visual quality and strategic messaging.

04

Avoiding Tokenism in Design

A platform about inclusion can easily feel superficial if the design leans on clichés. The visual identity needed to feel genuinely progressive, bold, modern, and free from the tired aesthetics of diversity marketing.

03. UX Research & Insights

Understanding what both audiences really need

Before a single design decision was made, I needed to understand the expectations, motivations, and frustrations of both target audiences, women navigating their careers, and employers trying to signal genuine commitment to inclusion. Research was structured across four methods.

🎙️

Stakeholder Interviews

In-depth interviews with the Top Women Careers founders to map business goals, platform values, target positioning, and the key metrics that would define success at launch.

👩‍💼

Candidate Research

Interviews with women across different career stages and industries, uncovering what signals genuine employer commitment to inclusion versus what feels like performative marketing.

🏢

Employer Perspective

Conversations with HR and talent acquisition leads at progressive companies, understanding what they need from a platform to credibly communicate their inclusion commitments.

🔬

Competitor Analysis

Audit of comparable platforms, gender-focused job boards, diversity-first recruiters, and mainstream job sites, to identify gaps, clichés to avoid, and opportunities to differentiate.

Key Insights

What the research revealed

Six clear themes emerged from research that directly shaped every brand, UX, and content decision that followed.

  • Women identified "authenticity signals" immediately, they could spot performative inclusion within seconds of landing on a site
  • Employers needed visible proof of platform credibility before committing, case studies and data mattered more than design alone
  • The dual-audience structure required complete separation, mixing candidate and employer messaging created instant confusion and distrust
  • Job listings needed strong employer context, company culture, diversity data, and flexible working policies were non-negotiable filters
  • Competitors relied on tired visual clichés, purple gradients, stock photos of smiling women, creating a clear opportunity to differentiate
  • Mobile was the primary browsing device for job seekers, a seamless mobile job search experience was essential, not optional
Research synthesis board, affinity mapping, user personas, key insights

04. UX Strategy

A clear path from insight to experience

With research insights synthesised, I defined a UX and brand strategy built around four core pillars, each directly addressing a discovered challenge while aligning to the platform's mission and growth ambitions.

Authentic Brand Identity First

Build a visual identity that feels genuinely progressive, avoiding diversity design clichés and instead creating a bold, confident brand that signals quality and ambition without tokenism.

Separate Journeys, One Platform

Design two distinct user journeys, one for candidates, one for employers, with tailored messaging, language, CTAs, and entry points. Each audience gets a path built entirely for them.

Credibility Through Content & Design

In the absence of existing testimonials and case data, let the design quality itself signal trust. Weave proof points, employer commitments, platform values, and early success stories, throughout every key page.

Scalable, Team-Managed Platform

Build in WordPress with Elementor using a modular component library, so the Top Women Careers team can add job listings, update employer profiles, and publish content completely independently.

Design Process

How strategy became execution

1

Research & Synthesis

Interviews, competitor audit, persona mapping

2

Brand Identity

Logo, colour system, typography, visual language

3

IA & Wireframes

Dual-journey sitemap, lo-fi to hi-fi

4

UI Design

Design system, prototypes, stakeholder review

5

Build & Launch

WordPress, Elementor, responsive QA

05. Wireframes

Sketching the structure before the style

Wireframing allowed me to validate the dual-journey architecture with stakeholders before committing to any visual direction. I worked through three rounds, low-fidelity sketches to establish structure, mid-fidelity wireframes to test hierarchy, and annotated hi-fi frames for development handoff.

Homepage

The homepage was designed around a single guiding question: "Am I in the right place, and which path is mine?", answered within the first scroll. A bold split-hero section creates an immediate, visual fork between the candidate and employer pathways, with distinct language and CTAs for each.

Homepage wireframe, lo-fi & hi-fi comparison
Dual Navigation & IA

A fundamental structural decision was separating "For Women" and "For Employers" at the navigation level from the start, with dedicated sub-navigation, tailored page hierarchies, and separate entry points for each audience. This ensured neither group ever had to wade through content meant for the other.

Information architecture, dual-audience sitemap
Navigation wireframe, For Women & For Employers split
Job Listings & Employer Profiles

Research revealed that job seekers needed far more employer context than standard listings provide. The job listing and employer profile pages were wireframed to surface diversity commitments, flexible working policies, company culture, and equality data, alongside the standard role information, giving candidates the full picture they need to make an informed decision.

Job listing page wireframe, enhanced employer context
Employer profile page wireframe, inclusion commitments & culture data
Mobile Responsive

Research confirmed that mobile was the primary browsing device for job seekers, making mobile-first wireframing non-negotiable. Every component was designed at 375px before scaling up, with particular attention to the job search and filtering experience on small screens.

Mobile, Homepage
Mobile, Job Listings & Search
Mobile, Employer Profile
💡

On the brand direction: The wireframe and brand phases ran in parallel, an unusual approach, but necessary here. The visual identity directly influenced layout decisions, particularly the use of bold typographic hierarchy and generous white space that became a signature of the platform's "anti-cliché" positioning. Stakeholder alignment on brand before UI meant no backtracking.

06. UI & Branding

A visual identity built for ambition and authenticity

The brand needed to feel genuinely progressive, confident, modern, and bold, without leaning on tired diversity design tropes. The resulting identity draws on strong typographic contrast, a purposeful colour palette, and imagery that portrays women as ambitious professionals, not diversity statistics.

Logo & brand identity, primary lockup and variations
Brand moodboard, visual direction & positioning

Colour System

Cream
#FDFBFA, Background
Clarity
#C4EBF1, Secondary
Supporting Pink
#F291B3, Accent
Action Pink
#D92363, Primary Action
Burgundy
#7D0F1C, Depth
Structure
#1C1C1E, Text

Typography System

Top Women
Careers.
Connecting ambition with opportunity

We connect ambitious women with employers who are genuinely committed to inclusion, equal pay, and creating workplaces where talent, not gender, determines success.

Full brand guidelines, logo usage, colour system, typography, imagery rules
Homepage, Final UI
Job Listings & Search, Final UI
Employer Profile Page, Final UI
For Women, Candidate Journey Page
For Employers, Employer Journey Page
Mobile, Homepage & Job Search

07. Results

A brand and platform ready to grow

The platform launched with a coherent, distinctive brand identity and a fully functional, scalable WordPress website, built to grow with the platform's ambitions and managed entirely by the team from day one.

Distinct user journeys built, one for women, one for employers, within a single cohesive platform

100%

Team-managed CMS, the TWC team publishes listings, updates employer profiles, and manages content independently

0→1

Full brand built from scratch, logo, identity system, design system, and live WordPress platform delivered end-to-end

Final live website, Top Women Careers on desktop & mobile