GitApplied
Visual redesign · Round 0, static mocks

Atelier

A proposed visual direction for GitApplied. Library at night, letterpress on cream. Use the toggle in the top-right to flip between light and dark, both are first-class views. Click through to see the new design applied to the four screens that matter most.

Project mocks

01 · Foundation
Palette & system
Color swatches in both themes, type scale, and every reusable component side-by-side, buttons, badges, inputs, cards, stage indicators.
02 · Surface
Kanban board
The home screen, re-imagined. Cards lose their saturated borders, stage colors collapse to muted dots, and the company mark earns the eye.
03 · Navigation
Job detail
Nine tabs become three sections: Read, Craft, Engage. The job posting body sits in serif on the new cream surface, readable, calm.
04 · Showpiece
Tailor view
The AI drafting surface. Job posting requirements on the left, your tailored draft on the right. Hover a bullet to see which requirement it answers.
05 · Preferences
Settings
Profile, document library, plan & billing, connections (extension, email, LinkedIn, calendar), appearance, account, and data export.
06 · Onboarding
Resume profile editor
After upload, we parse the resume into structured experiences, accomplishments, and education, the user reviews and corrects the capture, then continues. The reviewed result appears at the bottom of Settings → Profile.
07 · Detail
Add a question
Four directions for the + Add question flow on the tailor view, inline pane, focused dialog, paste-and-parse, suggested questions.

Marketing surfaces

01 · Conversion
Landing page
The first thing a potential user sees. Hero with a kanban mockup, problem strip in the user’s own voice, how-it-works, feature mosaic, the tailor showpiece, pricing teaser, and FAQ.
02 · Pricing
Pricing & plans
Three tiers, Free, Base, Premium, with every feature grouped into capture, intelligence, drafting, and engage. Monthly / annual toggle and a full comparison table.
03 · Go-to-market
Marketing plan
A pragmatic 90-day playbook: channel mix, landing-page critique, onboarding checks, a week-by-week launch plan, and the metrics that matter.
04 · Outreach
Outreach templates
Short, informal copy for Reddit launches and messages to friends & family, show-and-tell, peer recommendation, and personal asks.

Reference

01 · Technical sheet
Architecture
How everything fits together, AWS topology, network & security, data plane, application services, frontend & extension, third-party integrations, deploy flow, identity, and the scaling path.

Application workflow

A single job moves through three stages. Each user action is paired with the backend route it triggers on POST /api/v1. Routes scoped to /jobs/:id/… are gated by per-user ownership.

Stage 01

Craft

Tailor resume, cover letter, and questions to the job posting using the user’s base profile and the parsed requirements.

  1. 1
    Open job detail
    Frontend loads card + job posting body and fans out the section bundle.
    • GET /jobs/:id
    • GET /jobs/:id/related?section=craft
  2. 2
    Auto-match requirements
    LLM parses bullets from the job posting and aligns them to the user’s competency cache (server-cached).
    • POST /jobs/:id/auto-match-requirements
    • GET /jobs/:id/competency-match
  3. 3
    Pick resume bullets & skills
    User edits the job-scoped resume profile; selected highlights and matches persist per job.
    • GET/PUT /jobs/:id/resume-profile
    • GET/PUT /jobs/:id/matches
    • POST /jobs/:id/highlights · PATCH/DEL /:hid
    • POST /jobs/:id/auto-skill-match
  4. 4
    Draft cover letter
    Debounced autosave from the editor; AI tailor endpoint generates the initial draft.
    • POST /tailor
    • GET/PUT /jobs/:id/cover-letter-draft
  5. 5
    Add & polish application questions
    Manual entry, paste-and-parse, or AI generation from the job posting. Polish runs a per-answer rewrite.
    • GET/POST /jobs/:id/questions
    • POST /jobs/:id/questions/generate
    • POST /jobs/:id/questions/:qid/polish
Stage 02

Apply

Freeze the drafts into export-ready materials, hand them off (download or extension autofill), and advance the card.

  1. 1
    Export tailored resume
    Snapshots the selected resume + draft into a generated document the user can re-download.
    • POST /jobs/:id/generated-resume/export
    • POST /jobs/:id/generated-resume/copy
  2. 2
    Export cover letter
    Renders the cover-letter draft as DOCX/PDF and registers it on the generated exports list.
    • POST /jobs/:id/generated-cover-letter/export
    • GET /jobs/:id/generated-exports
  3. 3
    Download bundle / hand off to extension
    Either a ZIP for manual submission or a structured bundle the browser extension reads to autofill the ATS form.
    • GET /jobs/:id/application-bundle
    • PATCH /jobs/:id/autofill-ready
    • GET /jobs/ready-for-autofill
  4. 4
    Mark as applied
    Moves the kanban card to the Applied column, which the board uses to surface engage chrome.
    • POST /jobs/:id/move
    • PATCH /jobs/:id (sparse update)
Stage 03

Engage

Track follow-ups after submission: interview rounds, contacts at the company, and notes against each touchpoint.

  1. 1
    Open Engage section
    Single related-bundle call returns rounds, contacts, and notes scoped to this job.
    • GET /jobs/:id/related?section=engage
    • GET /jobs/upcoming-rounds
  2. 2
    Add / reschedule interview round
    CRUD over rounds with reorder support; gated to users who have the interview-tracking feature.
    • GET/POST /jobs/:id/interview-rounds
    • PUT/DEL /jobs/:id/interview-rounds/:rid
    • POST /jobs/:id/interview-rounds/reorder
  3. 3
    Track contacts at the company
    Per-job contact list (recruiter, hiring manager, referrer). Also queryable across all jobs.
    • GET/POST /jobs/:id/contacts
    • PUT/DEL /jobs/:id/contacts/:cid
    • GET /contacts (all jobs)
  4. 4
    Capture notes & outcome
    Free-form notes per job; pinning sticks important ones to the top. Final outcome moves the card to Completed.
    • GET/POST /jobs/:id/job-notes
    • PATCH /jobs/:id/job-notes/:nid/pin
    • POST /jobs/:id/move (→ Completed)

Auth

01 · Returning
Sign in
Centered card on cream, serif headline with the “GitApplied” mark in accent italic, email + password, forgot link, trust line for the 14-day Premium trial.
02 · New
Create account
Trial pill up top, name pair, email, password with strength hint. Quiet terms acknowledgement under the CTA so it doesn’t outweigh the form.
03 · Bridge
Check your inbox
The screen right after signup. Tells the user where to look next, shows the address we sent to, lists what happens after they click, with quick links to Gmail and a resend escape hatch.
04 · Outreach
Verification email
The transactional email itself, rendered inside an inbox-preview frame. Atelier letterpress style with the accent CTA, fallback URL, fine print, and a resend variant in the gallery.
05 · Verification
Email confirmed
The landing screen after a user clicks the verify link in their inbox. Primary success state up top, plus a four-up gallery showing verifying, success, invalid/expired, and missing-token variants.
06 · Recovery
Link is invalid or expired
The fallback when a verification link is too old, already used, or missing a token. Primary signed-out surface guides the user back to sign in; gallery covers the signed-in resend and the truncated-URL case.