The Thinking Behind the Work

Design Decisions

Design without rationale is just decoration. This page documents the product, craft, systems, and process thinking behind every decision in this portfolio.

1. Product & UX Decisions

These are the decisions that shaped what was built, how it was scoped, and how the user experience was structured across both apps.

Career Pivot Companion

3 free AI interactions for the portfolio demo

Context The portfolio needed to give visitors a real taste of the AI features without requiring signup or payment.
Decision Cap at 3 total interactions across all AI tools, tracked via localStorage with no backend required.
Rationale 3 interactions is enough to experience the Prep Coach, Networking Generator, and Navigate and Present meaningfully, one each. It creates a natural ceiling that motivates curiosity about the full product without frustrating the experience. localStorage tracking means zero infrastructure cost and zero friction for the visitor.
Alternatives considered Considered 5 interactions (too generous, removes upgrade motivation) and 1 interaction (too restrictive, does not demonstrate the product range).

localStorage over Supabase for the portfolio MVP

Context The full product requires Supabase for persistent user accounts, journal entries, and tier management. The portfolio version has no login.
Decision Store all session data, onboarding profile, phase placement, milestone completions, and interaction count, in browser localStorage.
Rationale Removing auth and database dependency from the portfolio build dramatically reduces infrastructure complexity and eliminates every friction point between a visitor and the product experience. A recruiter can open the URL and be inside the app in seconds. The tradeoff is that data does not persist across browser sessions, which is acceptable for a demo context.
Alternatives considered Considered requiring signup for a more realistic experience. Rejected because friction kills demo engagement, especially for a recruiter with 10 portfolios open.

Show all 5 pivot phases to free users

Context Freemium models often hide content behind a paywall to drive upgrades.
Decision Show all 5 phases of the pivot roadmap to all users, free and paid. Gate depth of content, not structure.
Rationale Hiding phases creates frustration and makes it impossible for a user to understand the full product value before committing to a subscription. Showing the structure and gating the depth is a more honest and more effective conversion pattern. Users can see where they are going, they just get richer support in the paid tier for getting there.
Alternatives considered Considered locking phases 3 through 5 for free users. Rejected because it creates a confusing, incomplete experience that does not demonstrate the product core value proposition.

Navigate and Present as the subscription retention hook

Context The pivot tracker and prep coach have a natural endpoint. The user lands a job and stops needing them.
Decision Anchor the paid subscription to Navigate and Present, difficult conversations and presentation prep, because these use cases outlast the job search.
Rationale A subscription product needs a reason to keep paying after the initial goal is achieved. Navigate and Present is useful at every career stage, not just during a job search. A new hire still needs to navigate difficult conversations with their manager. A promoted leader still needs to present to the C-suite. This feature travels with the user into their new role, which is the retention mechanism that makes a monthly subscription defensible.
Alternatives considered Considered making the full journal the subscription hook. Rejected because journaling feels less urgent and less high-stakes than conversation and presentation prep.

DesignOps AI Workflow Hub

Pre-populate all data views with realistic sample data

Context The portfolio version has no real users submitting requests. Empty states on a kanban board or request queue kill the demo experience.
Decision Seed the intake queue, kanban board, and briefs list with 3 to 5 realistic sample records on first load.
Rationale A recruiter landing on an empty kanban board has no way to evaluate the product. Realistic sample data lets them immediately understand the value. They can see how a real DesignOps team would use it. The data is specific enough to feel real without being generic placeholder text.
Alternatives considered Considered letting users add their own data from scratch. Rejected because most demo visitors will not invest that time, and the first impression is everything.

3 working features and 4 UI mockups for the MVP

Context Building all 7 DesignOps features to full working state would have taken significantly longer and delayed the portfolio launch.
Decision Build Intake Request Management, AI-Generated Project Briefs, and Design System Request Tracker as fully working features. Show the remaining four as UI mockups with a Coming in v2 banner.
Rationale The 3 working features cover the highest-friction moments in DesignOps operations. They demonstrate AI product design, operational thinking, and workflow design simultaneously. The 4 mockups show product scope and roadmap thinking without requiring full build time. This combination is a stronger portfolio piece than 7 mediocre working features.
Alternatives considered Considered building all 7 at a lighter fidelity. Rejected because shallow AI features that do not produce quality output are worse than no AI features at all.

Offline mock fallback for DesignOps AI features

Context The portfolio is a demo environment. API outages or rate limits could break the experience during a recruiter review.
Decision Keep the deterministic mock fallback in the DesignOps AI client. If the API call fails, the app produces plausible output from a local mock rather than showing an error.
Rationale For a portfolio demo, graceful degradation that keeps the experience intact is more important than surfacing a real error. The mock fallback means the app never appears broken regardless of network conditions or API status. It also demonstrates good product thinking. Production apps should handle failure states gracefully.
Alternatives considered Considered removing the fallback to show authentic AI behavior only. Rejected because a broken demo in front of a hiring manager is far worse than a mock response.

2. Design System & Craft Decisions

These are the visual, interaction, and systems decisions that shaped how the portfolio looks, feels, and behaves. Design craft is not decoration. It is the evidence of a designer's judgment.

Color System

Navy as primary, teal as action, gold as achievement

Context Three apps plus a portfolio site needed a shared color system that felt cohesive without being monotonous.
Decision Navy (#1B2A4A) anchors structure and hierarchy. Electric teal (#0891B2) signals interactivity and action states exclusively. Gold (#D4A843) is reserved for achievement moments, highlights, and hover states.
Rationale Assigning semantic meaning to each color creates a visual language users learn subconsciously. Teal only appears on things you can do, buttons, active states, links, CTAs. A user never wonders if something is clickable. Gold only appears on things worth noticing. Navy holds everything together without competing for attention.
Alternatives considered Considered using teal more broadly as a brand color across all elements. Rejected because it dilutes the action signal and creates visual noise.

Teal text color darkened for WCAG AA contrast compliance

Context Lighthouse accessibility audit flagged teal (#0891B2) as text on white backgrounds as failing the 4.5:1 contrast ratio required by WCAG AA.
Decision Darken teal text instances to #0771A0 globally, a shift invisible to the naked eye but sufficient to pass WCAG AA contrast requirements.
Rationale Accessibility is not optional and not a finishing step. It is a quality standard. The visual change is imperceptible to most users but the impact on screen reader users and users with low vision is meaningful. Making this change also demonstrates the kind of quality standard a design leader should hold for their team regardless of schedule pressure.
Alternatives considered Considered leaving the original teal and accepting the contrast failure. Rejected because knowingly shipping an accessibility violation is not acceptable craft.

Typography

Plus Jakarta Sans and Inter pairing

Context The portfolio needed typography that felt modern and confident without being trendy or hard to read at body sizes.
Decision Plus Jakarta Sans for display and headings. Inter for all body text.
Rationale Plus Jakarta Sans has the warmth of a humanist sans but the structural confidence of a geometric. It signals craft without trying too hard. Inter is the most legible screen body typeface available, designed specifically for UI rendering and validated at scale across thousands of products. Together they create a clear hierarchy: headlines have personality, body text gets out of the way.
Alternatives considered Considered using a single typeface throughout for simplicity. Rejected because a single typeface at all weights flattens hierarchy and makes the page harder to scan.

Layout and Component Decisions

Left sidebar replaces global header inside the DesignOps app

Context The DesignOps Hub is a workspace tool, a dashboard, not a marketing site or content page.
Decision Inside the app, the left sidebar is the primary navigation. The global header and footer are removed. A lightweight contextual top bar shows the current feature name and primary action.
Rationale Workspace tools universally use sidebar navigation because it gives persistent access to all features while maximizing horizontal space for content. The DesignOps intake queue and kanban board both need maximum horizontal real estate. A header competing with a sidebar creates two navigation systems and wastes space.
Alternatives considered Considered keeping the global header alongside the sidebar. Rejected because it creates competing navigation systems and significantly reduces usable content space, particularly on the kanban board.

App cards use a left border accent rather than full color fill

Context The portfolio home page needed to differentiate three app cards while maintaining visual cohesion.
Decision Each app card uses a 4px left border in its app-specific accent color. The card background stays white.
Rationale Full color fill backgrounds on cards create visual competition and reduce readability of the card content. A left border accent is a subtle, professional pattern that creates clear differentiation without noise. It is also a scalable pattern. Adding a fourth or fifth app card requires no redesign, just a new accent color assignment.
Alternatives considered Considered full color fill card headers. Rejected because at three cards side by side the color competition is visually loud and the white card body creates a jarring transition.

Persistent sticky tab bar on app detail pages

Context App detail pages have two tabs. Once a visitor scrolls deep into the case study, the tab bar disappears and they have no way to switch to the live app without scrolling back to the top.
Decision Make the Live App and Case Study tab bar sticky so it stays visible as the visitor scrolls through the case study content.
Rationale A recruiter reading the case study should be able to switch to the live app at any point without interrupting their flow. The sticky tab bar solves this without adding UI complexity. It mirrors a pattern users already know from browser tabs and mobile app navigation.
Alternatives considered Considered a floating action button to launch the app. Rejected because it competes with the content and adds visual complexity. The sticky tab bar is more elegant and more expected.

Predefined fill-in-the-blank prompt templates as a zero-cost free feature

Context Free users have a limited number of AI interactions. Vague inputs produce vague outputs, which wastes interactions and creates a poor experience.
Decision Add phase-aware fill-in-the-blank templates above every AI form. Users select a template, fill in the blanks, then generate. No API cost to display the templates.
Rationale Two problems solved simultaneously: the user gets better AI outputs because structured inputs produce structured outputs, and the app controls API cost because users are not regenerating due to poor initial results. The templates also serve as a teaching tool that makes users better at framing their situation over time.
Alternatives considered Considered a simple FAQ section instead. Rejected because FAQ answers questions but does not help users generate better inputs. Templates are actionable where FAQ is passive.

Back to top button on long-form pages

Context The Design Decisions page and case study pages are long-form content. Once a visitor has scrolled to the bottom, returning to the top requires significant scrolling or manual keyboard action.
Decision Add a persistent back to top button that appears after the user scrolls past a defined threshold, fixed in the bottom right corner.
Rationale Long-form pages without a back to top mechanism create friction that discourages deep reading. A visitor who reads all the way to the bottom of the Design Decisions page is highly engaged. Making it easy for them to jump back to the section navigation rewards that engagement and keeps them in the content rather than navigating away.
Alternatives considered Considered relying on browser back behavior or keyboard shortcuts. Rejected because not all visitors know those shortcuts and the friction cost is real.

3. Design in the AI Era

How I Think About Process, Reviews, and What Design Owns

What I Have Seen Go Wrong When Teams Skip Design Review

I have seen teams convince themselves that shipping fast and iterating later is the same as getting it right. It is not. The cost does not go away. It just moves to a place where it is harder and more expensive to fix.

The risk I see most often in fast-moving environments is what is called context loss. Design does not happen in a vacuum. Processes change. Policies get updated. Legal requirements shift. Product decisions get made in rooms design was not in. A design that was correct on Monday can be strategically wrong by Thursday, not because the designer made a mistake, but because something changed outside their line of sight and no one caught it before it shipped.

Design review is not just a quality check on the design. It is a forcing function for cross-functional communication. When you remove it, you remove the moment where misalignment gets caught. The faster teams move, the more intentional that communication infrastructure needs to be, not less. That is a counterintuitive truth that I have had to advocate for more than once.

Where I Hold the Line on Quality

Speed changes how I execute. It does not change what I am responsible for.

I hold an unconditional line on quality whenever a compromise would meaningfully degrade the user experience, especially for users who already know the product. When you change something a user has already learned, the bar is higher, not lower. Regression in a known experience erodes trust, and that trust erosion has real product impact that shows up in retention and support volume.

The practical way I hold that line without slowing teams down is making it explicit before work starts, not negotiating it in the moment when everyone is under pressure. At the beginning of any sprint or release cycle I make sure the team knows what design will not compromise on. Non-negotiable: accessibility standards, established design system component behavior, core user flows that have been validated with users. Negotiable: visual polish on edge case states, animation timing, iconography selection. When people know the boundaries in advance there are no surprises and no time wasted on conversations that were always going to have the same outcome.

What Design Still Owns When a Developer Can Generate UI in 20 Minutes

This is the question I get asked most often right now. My answer is direct: AI changes the speed of production. It does not change what requires design judgment.

When a developer generates a UI in Lovable in 20 minutes, design still owns:

  • The design system as the source of truth — which components exist, how they behave, when to reuse and when to introduce something new.
  • Accessibility — because generated UI passes visual inspection and fails screen reader testing with regularity.
  • Information architecture and user flow logic — because AI generates screens, not systems.
  • The craft review — the trained eye that catches what is technically correct but experientially wrong. Spacing that is mathematically even but visually unbalanced. Hierarchy that follows rules but does not guide the eye.
  • Prompt quality as a design skill — writing precise, on-system prompts that produce components aligned with the design system, so quality happens at the point of generation, not as cleanup downstream.

One thing I would add that I do not hear talked about enough: prompt quality is a design skill now. The designer who can write a precise, on-system prompt that produces a component aligned with the design system is more valuable than one who only reviews output after the fact. Quality at the point of generation is more efficient than quality assurance downstream. I think about this as the new front line of design craft, and I think design leaders who do not develop fluency here will struggle to stay relevant.

The framing I would use with my teams: AI generates, design governs. The speed of generation increases the importance of governance. It does not decrease it.

How I Would Structure Reviews When a Sprint Takes Two Days

Traditional end-of-sprint design review was built for a two-week cycle. It does not scale. Here is how I think about structuring review when the pace accelerates.

I would use three models depending on the risk level of what is being shipped.

For higher-stakes work, significant feature launches, anything touching a core user flow, I would use what I call a Design Review Board. A standing cross-functional group with a pre-agreed checklist and a time-boxed window. The practices that make it fast rather than slow: the checklist is defined before the sprint begins, the review window is non-negotiable (24 hours, not whenever you get to it), and the default is approve. Silence means nothing was flagged. The board reviews for system-level concerns only, not personal preference.

For routine sprint work, I would use an Async Checkpoint System, review built into the sprint rather than bolted on at the end. Three checkpoints: flow and information architecture before visual design begins, component selection and design system alignment before build begins, final quality gate before handoff. Each checkpoint has a designated reviewer and a fixed response window. This catches problems when they are cheap to fix, not after they have been built.

For high-velocity teams shipping continuously, I would use a rotating Design Critic role, one senior designer per sprint whose explicit job is to review all work against the design system and quality standards. Not everyone reviewing everything. One person with clear authority and a defined checklist. It is faster, more accountable, and it keeps every senior designer calibrated across the whole product, not just their own area.

In practice I would combine all three based on risk: the Design Critic as the ongoing baseline, the Review Board for significant launches, and the Checkpoint System as the infrastructure underneath both. The design leader's job is to define which level applies to which type of work and to make that call before the sprint starts.