← UX Case StudiesCase Study 01
Brand Identity & Design System
Product Manager, Brand Designer & Design Systems Lead · 2025–Present · Freelance
Product ManagerBrand IdentityLogoDesign SystemStyle GuideVoice & ToneWebflowAI Workflows
↗ wheelhousegroup.co Design Process
How We Built Common Fabric
A full-stack brand and UX engagement — from zero research to live Webflow site.
01
Research
- Surveys
- Competitor Analysis
- Target Audience
- Stakeholder Interviews
- Market Positioning
02
Brand Identity
- Logo Design
- Color System
- Typography
- Voice & Tone
- Style Guide
03
UX Research
- User Flows
- Blueprint
- Data Structure
- Information Architecture
- Wireframes
04
Design & Build
- Design System
- Component Library
- Webflow Dev
- Responsive Layouts
- CMS Setup
05
AI Workflows
- AI Design Prompts
- Figma AI Flows
- Content Generation
- Asset Automation
- Future Scaling
01Research
What we learned before designing anything
Common Fabric sits at the intersection of three completely different worlds: workforce development, community tech, and alternative credentialing. Before any visual decisions were made, we ran structured research across all three audience segments to identify mental models, trust gaps, and the exact language each group uses to describe their own problems.
3
Audience segments researched
40+
Notion documents synthesized
4
Competitor categories mapped
12
Stakeholder interviews reviewed
Survey Findings — What Each Audience Fears
Finding 01 — Early-Career Builders
The Credential Catch-22
Entry-level roles require 3+ years of experience. Bootcamp graduates have skills but no client work to prove them. They don’t need more training — they need real deliverables with real stakes and a provable paper trail.
Finding 02 — Early-Career Builders
Distrust of Training Programs
Strong skepticism of any organization that looks like a bootcamp. Words like “cohort,” “program,” and “curriculum” trigger suspicion. The brand needed to look and sound nothing like education.
Finding 03 — Senior Practitioners
Experience as a Liability
Practitioners with 15+ years are systematically undervalued by the market. They need a model where deep expertise is the product, not a cost center. Purpose and autonomy matter more than salary.
Finding 04 — Community Organizations
Burned by Freelancers & Agencies
CBOs have been overcharged, underdelivered, and left without documentation. They need radical pricing transparency and proof that what gets built will actually work — before they commit to anything.
Finding 05 — All Audiences
Disambiguation is Step Zero
All three audiences can land on the same homepage. Without immediate clarity on “is this for me?” every flow fails at step one. The homepage nav CTA split — ‘I want to learn’ vs ‘I need work done’ vs ‘I want to contribute’ — is the most critical single design decision.
Finding 06 — Competitor Analysis
Four Aesthetics to Reject
Bootcamp urgency, academic crests, Web3 gradients, and corporate boardroom blue-gray all represent positioning Common Fabric explicitly rejects. The brand must look like none of them.
📷 Research Visuals
👥
Persona Card
Senior Practitioner
👥
Persona Card
Community Organization
📊
Survey Results
Key findings visualization
🔎
Competitor Audit
4 categories mapped
02Brand Identity
Logo, Voice, Tone & Visual System
With research complete, we built the brand from the ground up — a system where every decision traces back to what Common Fabric actually is: a guild, not a school. A place where skilled hands build things, not a classroom where theory is taught.
Logo Concept
The Weave Mark
The mark derives from the language of weaving — interlacing threads as a structural metaphor for the interlocking of people, credentials, and community. Not a logo that explains the name. A logo that embodies the model.
Color Rationale
Indigo/Purple System
Purple/indigo communicates trust, depth, and craft — none of the bootcamp brightness, crypto neon, or corporate gray. Material Design 3 token architecture ensures the system scales across light and dark mode without manual decisions.
Typography
One Typeface: Lato
Single typeface family. All hierarchy achieved through size, weight, and spacing within Lato. No secondary font. The constraint communicates discipline — mastery of one tool rather than variety for variety’s sake.
Voice & Tone — How Common Fabric Speaks
Principle 01
Direct, Not Blunt
Say what we mean without corporate padding. Speak with the care of someone who knows words have weight. No softening language that dilutes meaning.
Principle 02
Practiced, Not Academic
Authority from having built and shipped — not from lecturing at a podium or citing theory. We reference work, not credentials.
Principle 03
Steady, Not Hype-Driven
No urgency as a sales tactic. 100-year timeline. Patience of an institution built to outlast trends. Every claim is specific, numbered, and provable.
Principle 04
Specific, Not Aspirational
Every claim has a number, a name, or a proof point. If we can’t make it specific, we don’t say it yet. “Empower,” “disrupt,” and “innovative” are banned.
📷 Brand Identity Visuals
◆
Logo Design
Primary mark, variations, dark & light
🎨
Color System
Full indigo/purple token palette
📒
Typography
Lato type specimen & hierarchy
💬
Voice & Tone
Copy examples & word guide
📄
Style Guide
Brand guidelines cover page
03UX Research
User Flows, Blueprint & Data Structure
Three audiences, one product, three completely different mental models. UX research mapped every path from entry to conversion — identifying where each audience distrusts, hesitates, and drops off. The IA and data structure were designed before wireframes began, ensuring every component decision serves a real user goal.
Information Architecture
Site Map & IA
Full IA defined before any flows. Three entity types (Alliance, Services LLC, DAO) required careful content hierarchy so no audience confuses which entity they’re engaging with. Navigation splits at the homepage level — not buried in a menu.
Data Architecture
Content & Data Structure
CMS structure mapped across apprentice profiles, CBO project cards, cohort timelines, and credential records. Each content type designed as a token-friendly Webflow CMS schema — structured for handoff, not just for the current build.
Blueprint
Service Blueprint
Mapped the full end-to-end service experience — frontend touchpoints, backstage operations (cohort management, credential issuance), and support processes. Revealed three invisible friction points that the UI alone couldn’t solve.
User Flow Insights — Per Audience
Flow 01 — Early-Career Apprentice
6 Steps from Google to Application
Landing → Who We Are → Academy Overview → Course Catalog → Apply to Cohort → Confirmation. Highest friction at step 1: “Is this another bootcamp?” Design response: hero leads with outcome, not program language.
Flow 02 — Community Organization
6 Steps from Referral to Discovery Call
Landing → For CBOs → How It Works → Products → Start a Project → Confirmation. Highest friction at steps 1–3: “Is this for me? What does it cost? Are apprentices good enough?” Pricing transparency and principal-led model resolved all three.
Flow 03 — Senior Practitioner
6 Steps from LinkedIn to Studio Application
Landing → For Practitioners → Studio Model → Lead a Practice → Apply → Onboarding. Highest skepticism of all three flows. Design response: no buzzwords, explicit economics (revenue share, IP rights, 8–12 hrs/week), published rates.
Cross-Flow Insight
One Trust Signal for Two Audiences
“Senior practitioners supervise all work” resolved trust gaps for both CBOs (quality) and practitioners (meaningful engagement). One structural model feature addressing two separate conversion blockers simultaneously.
📷 UX Research Visuals
🗺
User Flow Diagram
Full 3-audience flow — apprentice, CBO, practitioner
🕐
Service Blueprint
End-to-end service map
📁
IA Sitemap
Full information architecture
▢
Wireframe — Homepage
Lo-fi disambiguation split
▢
Wireframe — For CBOs
How it works flow
▢
Wireframe — Academy
Course catalog & apply
04Design & Build
Wireframes, Design System & Webflow
With IA and flows validated, design moved to wireframes — low-fidelity first to stress-test layout decisions before investing in visual polish. The design system was built in parallel, ensuring every component decision was token-driven and ready for Webflow handoff from day one.
Wireframes
Lo-Fi → Hi-Fi
Paper wireframes first — testing the disambiguation homepage split, the 3-entity explainer, and the audience-specific landing sections. Iterated twice before moving to Figma. Hi-fi followed the design system token structure exactly.
Design System
Component Library
Full Figma component library: Buttons (5 variants), Navigation, Cards (5 types), Forms, 40+ weave-based icons, and motion tokens. Self-documenting — built for contributors who weren’t in the room when decisions were made.
Webflow Build
Token-Driven Production
Design system translated into live Webflow — three audience entry points, CF component library, token-driven styling, fully responsive. CMS structured for ongoing content operations without developer dependency.
What the Design System Covers
Buttons
Primary · Secondary · Ghost · Icon · Destructive — all states documented
Cards
CBO · Apprentice · Course · Credential · Stat — each with dark and light variants
Forms
Input · Select · Checkbox · Radio · Textarea — error, focus, and disabled states
Tokens
Color · Spacing · Radius · Shadow · Motion — MD3 architecture, light + dark mode
05AI Workflows
How AI Was Integrated Throughout
AI wasn’t a feature added at the end — it was woven into the process from research through handoff. Common Fabric itself is building AI-assisted product workflows for its CBO clients, so the design process needed to model that thinking. Every AI integration here served a real productivity need, not a novelty requirement.
Workflow 01
Research Synthesis via Notion AI
40+ canonical documents — stakeholder interviews, PR/FAQ materials, brand strategy docs, and operational specs — were synthesized using Notion AI into structured design briefs. What would have taken 3 weeks of reading took 3 days of guided prompting.
Workflow 02
Brand Prompt Engineering
Structured prompts derived from the brand pillars (Direct, Practiced, Steady, Specific) were used to generate on-brand copy, section headlines, and microcopy across the Webflow site. Output was reviewed and edited — AI as a first draft engine, not the final author.
Workflow 03
Component Documentation
AI-assisted annotation in Figma kept the design system self-documenting as it was built. Component descriptions, usage guidelines, and do/don’t annotations were generated from the component logic and then reviewed — reducing handoff overhead significantly.
Workflow 04
Content Architecture & IA Validation
AI-assisted IA for the Webflow sitemap — content hierarchy mapping, navigation flow validation against user goals, and CMS schema generation. Accelerated the IA phase from weeks to days while maintaining rigour through human review at each stage.
Workflow 05
Future Scaling — What We Built For
The design system and prompt library are structured so future Common Fabric contributors can generate on-brand content, extend components, and onboard new apprentices without requiring the original designer. The system documents itself as it grows.
The Bigger Picture
Modeling the Product in the Process
Common Fabric builds AI-assisted digital products for CBOs. The design process itself became a proof of concept — demonstrating that AI-integrated workflows produce faster, more consistent, and more scalable outcomes than traditional sequential design.
“The AI workflows weren’t about replacing design thinking. They were about eliminating the parts of the process that don’t require it — so all available creative energy went into the decisions that actually mattered.”
— Shiva Nosrati · Brand Designer & Design Systems Lead, Common Fabric
PRODUCT ROADMAP · 2025–2026
From Brand Launch to AI-Native Studio
Common Fabric is a long-horizon institution — built for 100 years, shipped in quarters. The roadmap below shows what has shipped, what's in active build, and what comes next as the apprenticeship, studio, and CBO services scale.
Q4 2025 · SHIPPED
● SHIPPEDFoundation
Brand identity, design system, public website live.
- ✓ Brand strategy & positioning
- ✓ Logo, color, typography
- ✓ Voice & tone guidelines
- ✓ Webflow site & CMS
- ✓ Three-audience IA
Q1 2026 · IN BUILD
● ACTIVEApprenticeship Launch
First cohort, attestation system, CBO project pipeline.
- → Apprentice application flow
- → Attestation & hours system
- → Principal matching tool
- → CBO project intake form
- → First 3 CBO partnerships
Q2 2026 · PLANNED
○ NEXTStudio Model
Senior practitioner practices, revenue sharing, IP framework.
- · Practice formation toolkit
- · Revenue share contracts
- · IP rights framework
- · Practitioner dashboard
- · Cross-practice collaboration
Q3–Q4 2026 · HORIZON
○ FUTUREAI-Native Workflows
AI-assisted design, content, and delivery at scale.
- · AI design prompt library
- · Component generation flows
- · Content drafting at scale
- · CBO product templates
- · DAO governance launch