My Portfolio, Case Study 1: Process Architecture
To demonstrate adaptability, this case study strictly adheres to the Bouniq-Mercier 5-Phase Protocol. This framework was selected to prioritize verifiable technical outcomes over abstract theory, ensuring every design decision drives a measurable business result.
DISCOVER:
Establishing Foundation
The Primary Goal
Minimize cognitive friction for the reviewer to maximize the conversion rate from visitor to candidate.
The Strategic Gap
Shift from displaying "pretty pictures" to providing verifiable, metric-driven evidence of business impact.
Inclusion Standard
Strict WCAG AA compliance (4.5:1 contrast) is required to prove technical rigor beyond just visual design.
Asset Optimization
Maximize controllable speed. Compress all assets to WebP format to mitigate platform latency and respect user time.
Proof of Process
Move beyond the "perfect reveal." Structure case studies to highlight pivots and failures, proving the design is a calculated evolution.
Scalability
Demonstrate "Engineering Readiness" by documenting component logic, not just final screens.
Competitor Analysis
This analysis reveals that while top-tier portfolios excel visually, they frequently lack defined business success metrics and WCAG accessibility compliance. It is important to note that while Mobile Speed scores averaged 73/100, some deficits stem from host-platform constraints.
| Audit Metric | Portfolio A | Portfolio B | Portfolio C |
|---|---|---|---|
| Mobile Speed Score (Source: Lighthouse) | 65/100 | 81/100 | 75/100 |
| Accessibility Score (Source: Lighthouse) | 78/100 | 100/100 | 85/100 |
| Success Metrics (Quantitative defined?) | Qualitative Only | None | Broken Links |
| Resume Friction (Clicks to view PDF) | 1 Click PDF | 1 Click PDF | 2+ Clicks |
| Visual Evidence (Supporting Case Study) | Process Heavy | Visual Heavy | Lapsed |
DEFINE:
User Stories
Efficiency
Recruiter reviewing on a phone,
the resume to open as a responsive web page,
I can read skills without having to download a PDF.
Business Impact
Design Lead scanning for seniority,
to see defined success metrics at the top,
I can verify product strategy skills immediately.
Speed & Respect
Hiring Manager with limited time,
the portfolio to load instantly,
I can review the work quickly between meetings.
Value Proposition
STRATEGIC OUTCOME: DE-RISKING THE HIRE
This portfolio is engineered to reduce hiring risk. By prioritizing speed, accessibility, and business metrics over decorative visuals, it eliminates cognitive friction for the reviewer and provides immediate, verifiable proof of high-level competence.
IDEATE:
User Flow
Respect
Time
Designed for a busy recruiter.
Results
First
Key business metrics are visible ASAP.
Reduced
Friction
The resume opens as a webpage
PROTOTYPE:
Mind Mapping: Information Architecture
This diagram maps the four opposing forces driving the portfolio's architecture. Instead of a standard sitemap, this framework balances User Needs (Speed & ROI) against Technical Constraints (Accessibility & Performance). It serves as the project's 'North Star,' ensuring every design decision solves a business problem.
Zero Friction.
No PDFs.
Mobile First.
Recruiters screen on phones. We removed the "Pinch & Zoom" barrier to ensure the first impression is frictionless.
Metrics First.
Defined KPIs.
Strategy over Art.
Design Leaders need proof of ROI. This leads with data to validate strategic maturity.
The Portfolio as Product
Central Design Philosophy
95+ Speed Score.
WCAG AA Strict.
Optimized Assets.
Performance is a feature. Optimizing assets proves engineering empathy and respect for user bandwidth.
Architectural.
High Contrast.
"Heavy" System.
Bold, high-contrast layouts signal confidence and guide the eye without decorative distraction.
UI DOCUMENTATION
THE HEAVY PROTOCOL
CHROMATIC RANGE
TYPOGRAPHY PAIRINGS
The quick brown fox jumps over the lazy dog. Optimized for absolute legibility.
ELEVATION
MICRO INTERACTIONS
MICRO-INTERACTION PHYSICS
CARD
FRONT
CARD
BACK
START