Ampersand

Section 1: Overview & The Core Challenge

Section 2: Discovery, Strategy & User Insights

Section 3: UX Architecture & Information Design

Section 4: Visual Direction, Wireframing & Iteration

Section 5: High-Fidelity Execution & Component Breakdown

Section 6: Design System, Accessibility & High-Fidelity Specs

Section 7: Validation, Business Impact & Key Learnings

Designing for Ampersand: Revamping a Dual-Audience Experience

I re-architect complex, fragmented legacy systems into simple, human-centered ecosystems. As Lead UX Designer for Ampersand, I spearheaded the complete landing page redesign to bridge the education-to-workforce gap. By untangling the dual-audience experience for ambitious young professionals and high-growth employer partners, I delivered a unified digital front door that achieved 100% usability task completion rates and reduced user task completion times to under 1 minute.

Role:

Lead UX/UI Designer

Timeline:

2020 – 2021

Platforms:

Responsive Web (Desktop & Mobile)

Design Strategy: B2B2C Dual-Audience Framework

Tools, Research Stack & Methodologies: Figma (Auto Layout, Design System Components), OptimalSort (Card Sorting Analytics), Zoom (Moderated & Unmoderated Usability Testing), Miro (Affinity Mapping, Customer Journey Mapping, Personas), Style Tiles, Moodboards, WCAG 2.1 AA Accessibility Standards, HTML5/CSS3 Grid Specs, and Qualitative Analysis Frameworks

Section 1: Overview & The Core Challenge

5-Stage Human-Centered UX Framework & Iterative Design Cycle

Agile Design Planning & Sprint Timeline

To ensure rigorous execution within a fast-paced multi-week sprint, I structured our end-to-end design operations on Trello—mapping research, wireframing, testing, and client deliverables into a transparent roadmap.

The Dual-Audience Paradox

Ampersand’s mission was to eliminate the skills gap between higher education and early career employment. However, the existing digital experience faced a critical strategic challenge: serving two vastly different user bases through a single landing page without diluting the value proposition for either.

Students & Young Professionals (B2C): Seeking clear career pathways, mentorship, and accessible onboarding.
Employer Partners (B2B): Seeking vetted, job-ready talent and efficient hiring pipelines.
The UX Goal: Eliminate navigation friction, structure distinct user pathways, and deliver a frictionless B2B2C ecosystem.

October 2021 Trello Sprint Calendar & End-to-End Project Roadmap

Section 2: Discovery, Strategy & User Insights

Grounding Strategy in Empirical Data

To untangle the dual-audience experience, I conducted a mixed-methods research initiative—combining a 15-person quantitative survey, 10 qualitative interviews, heuristic audits, and baseline usability testing.

22-Second Value Gap: Baseline usability testing revealed users took an average of 22 seconds just to grasp the landing page's primary value proposition.
57% Job Board Dependency: 57% of candidates relied heavily on third-party job boards due to unclear messaging on the direct platform.
92.9% Skill-Driven Demand: 92.9% of early-career applicants explicitly sought structured skill development and mentorship over traditional job listings.

Quantitative Survey Breakdown & Baseline Usability Scorecard

Key Insight: Most users felt uncertain about their skill levels and struggled to find relevant resources or clear navigation pathways on the legacy website.

Qualitative Interviews & Core Research Questions

To uncover the root causes of website confusion, I conducted in-depth interviews with 10 target users across candidates and job seekers. I structured our inquiry around three critical dimensions:

Skill & Career Confidence: Evaluating how users currently assess their readiness for the job market and identify skill gaps.
Job Search Friction: Analyzing time dedicated to job hunting, primary concerns, and reliance on existing career platforms.
Digital Experience Expectations: Exploring past online learning and remote interview experiences to baseline user expectations.

5 Second Usability Testing

With research showing that 55% of visitors spend under 15 seconds on a landing page, capturing immediate clarity is vital. I executed a 5-second usability test to evaluate visual recall and value proposition comprehension:

Core Questions Asked: "What is the main purpose of this page?" and "How would you describe the design?"
Baseline Reality: It took users an average of 22 seconds—far exceeding our target—to realize that Ampersand provided intern training and job placement services.

Baseline Usability Benchmarking

To measure initial user experience friction, I conducted a baseline usability test with 5 participants over Zoom, evaluating 3 key navigation tasks on the original site. The study revealed significant navigation hurdles—users averaged 3 minutes just to understand the page purpose and struggled to locate clear candidate enrollment vs. employer recruitment entry points.

Baseline Usability Testing Scorecard Across 3 Key Candidate & Employer Tasks

Heuristic Evaluation of the Legacy Interface

Using Jakob Nielsen’s 10 usability heuristics, I evaluated the original landing page to identify usability bottlenecks. The analysis revealed broken visual hierarchies, unclear call-to-action buttons, inconsistent typography, and a 7-step process that confused early-career candidates.

Heuristic Analysis Board Mapping Navigation & Visual Hierarchy Friction

Competitive Quadrant Matrix & Feature Comparison Audit

Competitive Analysis & Market Positioning

I conducted a feature matrix and positional audit comparing Ampersand against key market alternatives (UpWork, AfterCollege, and General Assembly). This highlighted a major market opportunity: positioning Ampersand as a hybrid platform that combines structured upskilling with vetted B2B employer matchmaking.

Section 3: UX Architecture & Information Design

Synthesizing Behavioral Patterns: Empathy & Pain/Gain Mapping

To transition from raw research data into actionable design architecture, I synthesized survey and interview responses into an Empathy Map and a structured Pain vs. Gain Matrix. This process allowed us to align stakeholder strategy around the authentic psychological drivers, anxieties, and friction points experienced by early-career candidates.

Key Qualitative Takeaways

Core Mental Models (Says & Thinks): Candidates felt their academic skills were insufficient for competitive job markets, expressing high anxiety around interview readiness and a strong desire for structured mentorship.

Current Behaviors (Does): Applicants heavily relied on fragmented job boards (LinkedIn, Indeed) while manually updating portfolios—often feeling disconnected from direct company hiring pipelines.

Emotional Friction (Feels): High anxiety stemmed from "imposter syndrome," fear of remote interview processes, and frustration over unhelpful, non-interactive distance learning.

Pain vs. Gain Drivers: Slow employer follow-ups and lack of real-world project experience were the primary pains, while flexible schedules and direct access to active industry mentors were the top desired gains.

Qualitative Empathy Mapping (Says, Thinks, Does, Feels) & Pain vs. Gain Synthesis

Dual-Audience Personas: Cameron & Brad

To address our complex B2B2C user base without diluting the value proposition, I defined two distinct primary personas:

Cameron Williamson (B2C Candidate): High school junior/college applicant needing mentorship, skill-building guidance, and accessible career pathways.

Brad Smith (B2B Employer/Recruiter): Corporate recruiter requiring efficient talent evaluation tools and vetted, high-performing candidates.

Target User Personas for B2C Applicants (Cameron) and B2B Employers (Brad)

Mapping Cameron’s Customer Journey

I mapped the complete candidate journey across four phases: Search, Landing Page, Fill Out Form, and Interview. This pinpointed critical touchpoint friction—specifically during the landing page phase where unclear navigation created drop-offs and confusion over class offerings.

End-to-End Candidate Customer Journey Map & Touchpoint Friction Analysis

Validating Navigation Hierarchy via Card Sorting

To resolve navigational confusion and re-architect the site hierarchy, I ran an open card sorting study using OptimalSort with 10 participants. The analytics established 100% study completion (median time: 3m 18s) and identified 3 primary logical groupings: About Us, Businesses, and Aspiring Professionals.

OptimalSort Quantitative Card Sorting Results & Participant Grouping Metrics

Sitemap Migration: Streamlining Dual-Audience Navigation

Synthesizing card sorting data enabled me to completely refactor Ampersand’s sitemap. I eliminated redundant links, consolidated duplicate FAQ sections, and built a parallel navigation architecture that clearly separates the B2C candidate journey from B2B enterprise hiring options.

Legacy Site Map vs. Proposed Dual-Audience Navigation Architecture

Section 4: Visual Direction, Wireframing & Iteration

Establishing Design System Foundations

To shift Ampersand toward an authoritative yet approachable visual tone, I created a Moodboard and Style Tile. This established our typography scale (Roboto), color palette (#343F56, #F54748, #114E60), icon language, and UI components—setting the foundation for a scalable design system rather than just static page layouts.

Brand Moodboard & Style Tile Visual Foundations

Rapid Ideation & Low-Fidelity Wireframing

Through cross-functional brainstorming, I developed three distinct concept sketches to explore layout hierarchies. Synthesizing team feedback led to a combined sketch and low-fidelity wireframes that established content placement before high-fidelity visual detailing.

Ideation Sketches & Low-Fidelity Wireframe Progression

Iterative Design Evolution (Original to Version 5)

Based on continuous usability feedback and client check-ins, I drove the landing page through 5 major design iterations. Each version refined section ordering, messaging clarity, and visual weight to systematically address user friction uncovered during research.

End-to-End Landing Page Architectural Evolution Across 5 Iterations

Section 5: High-Fidelity Execution & Component Breakdown

Header Navigation Streamlining Across Iterations

Header Navigation Refinement

Rearranged top navigation options based on OptimalSort data. Removed the redundant primary CTA from the global header to eliminate noise, placing the primary entry points directly within the Hero section.

Hero Section & Value Proposition

Formulated a clear, value-driven headline with targeted dual-audience CTAs ("Aspiring Professionals" vs. "Businesses"), giving immediate path clarity within the first 5 seconds. Transformed the uncontextualized introduction video into an engaging narrative block.

Dual-Audience Hero Redesign & Intro Video Integratio

How It Works & Service Categories

Simplified the complex "How It Works" sequence from confusing multi-step flows into a clean 5-stage B2B2C progression. Built structured, card-based navigation modules allowing candidates to explore training paths easily via a high-contrast grid.

Streamlined 5-Step B2B2C Onboarding & Category Cards

Social Proof & Trust Building Elements

Embedded social proof directly on the homepage to overcome candidate and employer skepticism. Introduced an interactive Weekly Seminars calendar and a recent blog feed to build user trust and drive repeat engagement.

Testimonials, Interactive Webinar Calendar & Blog Integration

FAQ Accordion & Navigation Footer

Consolidated multi-page FAQs into a segmented 3-tab accordion to answer immediate objections without page hopping. Redesigned the footer hierarchy to provide clear fallback navigation and social links.

Segmented FAQ Accordion & Restructured Footer Hierarchy

Section 6: Design System, Accessibility & High-Fidelity Specs

Figma Button Component Architecture, State Variants & Layout Specifications

Scalable Architecture & Pixel Hygiene

To ensure seamless execution and scalable handoff, I established a cohesive UI foundation for Ampersand:

Design System Tokens: Standardized typography scales (Roboto) and color tokens (#343F56 Blue, #114E60 Teal, #F54748 Coral) for visual consistency.
Accessibility (WCAG 2.1 AA): Verified high-contrast text ratios, 48x48px minimum touch targets, and semantic heading hierarchies ($H_1, H_2, H_3$) for screen readers.
Component Reusability: Built interactive Figma components for FAQ accordions, calendar widgets, and dual-audience CTAs to accelerate future iterations.

Section 7: Validation, Business Impact & Key Learnings

Quantitative Validation: Round 2 High-Fidelity Usability Testing

To validate the redesigned landing page (Version 4), I conducted a second round of usability testing with 4 new target participants. Users executed the three core navigation tasks evaluated in our baseline study.

100% Task Completion Rate: All 4 participants completed 100% of the assigned tasks without getting lost or dropping off.
Sub-1-Minute Completion Times: Reduced average task completion time from the original 3-minute navigation drag down to under 1 minute per core user journey.
Final Micro-Iterations (Version 5): Based on participant feedback, I repositioned the FAQ accordion higher on the page to resolve immediate objections earlier and enhanced calendar widget contrast—delivering our final, client-approved production design.

Future Roadmap & AI Integration

To ensure Ampersand continuously scales and meets evolving market demands, I defined a forward-looking roadmap focusing on responsive optimization, quantitative validation, and AI-driven career personalization:

A/B Testing & Conversion Optimization: Implement live A/B testing on primary Hero CTAs and value propositions to measure real-world conversion rates between B2C candidates and B2B employers.
Responsive Viewport Expansion: Scale the desktop component library into fully optimized tablet and mobile breakpoints, validating touch interactions across smaller screens.
AI-Powered Personalization & Matching (Next Gen):
- Smart Mentorship Matching: Integrate an AI-driven recommendation engine that analyzes candidate portfolios and skill gaps to match them automatically with optimal industry mentors.
- Predictive Talent Analytics for B2B: Utilize machine learning to help enterprise recruiters filter and predict candidate job-readiness based on completed Ampersand upskilling modules.
Full Portal Ecosystem Architecture: Build out and end-to-end test the dedicated candidate dashboard and employer portal pages to maintain seamless experience consistency beyond the landing page.

Reflections & Client Collaboration

Collaborating closely with our client, Allie, and leading cross-functional design discussions was a highly rewarding experience. By balancing business objectives with rigorous user research, we transformed Ampersand’s digital presence into a clear, functional, and visually compelling platform. This project reinforced the power of iterative design, data-informed navigation architecture, and empathetic problem-solving in bridging early-career talent with high-growth businesses.

Thank you for reviewing this case study! I welcome your thoughts, feedback, and recommendations.

Page updated

Google Sites

Report abuse