209

WahResume.com

WahResume is one of the top-reviewed modern resume editors from Canada, designed for speed and simplicity. Built as a fast alternative to tools like Jobscan, it features a Notion-style editor that helps job seekers tailor their resumes with relevant skills and keywords in minutes.

uxui designvibe codingmarketing

The Resume Gap and Legacy ATS Systems

WahResume came out as a project for me during 2023 during my job search. I remember reading Kathryn Dill's article in the Wall Street Journal about how companies desperately need workers but still reject millions of resumes due to legacy ATS systems. That really hit home for me.

Creating an ATS friendly resume which worked with most legacy ATS systems used by companies with standard formatted resume with my details was the first step I took. But the truth hit a little different later, with highly competitive market landing on job isn't easier with a general resume. I learned this hard truth by talking to recruiters, job seekers, applying myself long, across over past few years. I tried several tools in resume scanning like Jobscan and other resume builders which helped with what I needed. But, I clearly wanted one single product as a user representing everyone's pain point I walked so far.

Every Job is Different, So is Your Resume

WahResume, a resume editor where you can easily create new resumes with your details, but quickly tailor and track for various job applications and access them forever, whether you get an interview or even after years coming back to apply again. Get your match score against job descriptions, many AI features packed to maximize your editing experience like never before.

Create professional resumes with our intuitive editor and keep track of all your job applications in one place. Never lose track of which resume you sent to which company.

Talking the Job Language in Your Resume

When it comes to every resume, the way we tailor resume is interesting, but straight forward. Once we setup a WahResume account, our AI builder creates a base resume from the first resume you upload. When you create a new resume everytime, this base resume is cloned to tailor over it. Hence you get every time a new resume from your original one, but written with skills and keywords which is jobs language. Throughout development, I conducted regular user testing sessions and presented findings to validate the resume tailoring approach, incorporating feedback on how to optimize the AI-generated content for both human readability and ATS parsing.

When resume talks jobs language, most traditional ATS systems detects skills and keywords from Job description and rank this new resume better than your original tone, even brings you as top applicant depending on ATS factors. Beyond the technical implementation, I focused heavily on writing clear, actionable copy throughout the app - from onboarding instructions to feature tooltips - ensuring users understand exactly how to leverage the platform's AI capabilities to improve their job application success rate.

Design Technology Behind WahResume

Being a web developer, Javascript lover, I quickly dived into Next.js, Node.js, and MongoDB. Since being a solo designer and developer, I cut short Figma designs to entirely create a mini design system with Tailwind + Shadcn components with customized theme. Considering the lean model, design-dev handoff was not required. Hence new workflow of wireframing in v0, later taking it to product, consistent with kit built in-house.

For AI services, running on OpenAI but has a switcher to try locally various LLMs other than GPT, even local setup, for R&D purposes.

Automated Design System

Built on shadcn/ui + Tailwind CSS with emerald as primary brand color. The system uses CSS variables for semantic naming and automatic adaptation across all components. Accessibility was built in from the ground up with semantic HTML5 structure, full keyboard navigation support, and focus management for modal interactions - ensuring the resume editor is usable for all job seekers regardless of their abilities.

Primary Theme Architecture

  • CSS variables-based theming with shadcn/ui standard approach
  • Tailwind integration with semantic class mapping
  • Auto-adaptation for all components
:root {
  --primary: 168 76% 35%;
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
}
 
.dark {
  --primary: 168 76% 30%;
  --background: 222.2 84% 4.9%;
}
// Tailwind Configuration
theme: {
  extend: {
    colors: {
      primary: {
        DEFAULT: "hsl(var(--primary))",
        foreground: "hsl(var(--primary-foreground))",
      },
      // ... other semantic colors
    }
  }
}

Brand Color Palette

The brand color palette centers around emerald as the primary color with purple accents for AI features, creating a professional yet modern aesthetic. The system supports both light and dark modes with automatic color adaptation, ensuring consistent visual hierarchy across all components while maintaining accessibility standards.

Key Benefits

The design system provides semantic naming for maintainable colors, ensuring theme consistency across all components with built-in dark mode support. The TypeScript integration with shadcn/ui and performance-optimized CSS variables create a robust foundation for scalable development while maintaining excellent user experience across different devices and preferences.

Actively Looking for a Job? Try now WahResume