Designer obsessed with the in-between.
A senior product designer with a decade of quiet, careful work. We built an editorial-style archive that treats design process as fine art.
Project Overview
Maya Okafor has led design initiatives for some of the world's most recognizable mobile apps. Her work is meticulous, quiet, and deeply analytical. Yet, her portfolio looked like every other standard designer's landing page: a quick grid of Dribbble-like cards and mockups that failed to show her underlying thinking.
Our approach was editorial. We treated the portfolio as a digital archive or high-end design monograph. By pairing classic serif display typography with generous whitespace and smooth page flips, the site focuses entirely on high-fidelity stories of process, wireframe history, and design rationale.
The Challenge
Most product design portfolios focus on the final mockup—the shiny iPhone screen. But product teams hire based on process, decision-making, and critical thinking. The site needed to communicate Maya's deep attention to wireframe variations, research constraints, and type layouts without feeling text-heavy.
Standard platforms restrict typography and grid freedom, making all designer portfolios look identical.
Create a type-driven editorial portfolio that highlights sketch histories and UX decisions in a readable format.
Design Direction
The typography system pairs elegant Newsreader serifs with clean sans-serif bodies. The layout mimics printed magazines, featuring generous headers, asymmetrical grids, and high-quality photography frames.
Showcase & Case Studies
A custom-built typography showcase block presenting the font pairing and scale used for the case study documents.
Designed screens showing sketch wireframes layered directly with finished UI mockups to communicate process.
A minimal archive index representation showing structural editorial grids used to present past works.
Typographic callout boxes highlighting design philosophy statements directly inside case studies.
The Process & Build
We reviewed over 11 years of Figma files, keynote decks, and design specs to select the 8 projects that best represent Maya's analytical design process.
We spent 4 days testing type pairings on screen. We selected the Newsreader serif for headers to give the site a literary, classic feel, balanced with Inter for body text.
We built an asymmetric grid system that adapts dynamically to different monitor sizes, treating screen margins like margins of a high-quality art book.
Interaction Highlights
A cursor that morphs into a project-metadata tag when hovering over work items, showing category and year before click.
Image panels that expand and clip-mask open smoothly relative to scroll speeds, creating a book-page-like effect.
Transitions that cross-fade text margins and column widths on page navigation to avoid abrupt loading jumps.
Animations designed specifically around low-contrast color adjustments and slow-motion opacities to ensure a calm experience.
The Outcome
By focusing on deep editorial narratives rather than simple layouts, the site established Maya Okafor as a leading design authority in the industry. The design-led presentation immediately set her apart from template-driven portfolios.
Increase in inbound consultation requests for senior roles
Featured on prime design galleries (Awwwards, CSSDA, SiteInspire)
Score on Lighthouse mobile performance after image rework
We build custom editorial platforms that showcase creative process, wireframe history, and design craft.