backstory/frontend/public/docs/backstory-ui-mockups.md
2025-05-19 20:31:30 -07:00

58 KiB
Executable File

Backstory Application UI Mockups

System Overview

Backstory is a dual-purpose application serving:

  1. Job Candidates - Upload/manage their professional history and generate tailored resumes
  2. Employers/Recruiters - Search for candidates, ask questions about their experience, and generate tailored resumes based on job descriptions

The UI is designed with separate but connected experiences for these two user types.

Core Navigation Structure

Primary Navigation

  • Public Pages: Home, About, Pricing, Login/Register
  • Candidate Dashboard: Profile, Resume Builder, Q&A Setup, Analytics
  • Employer Dashboard: Candidate Search, Saved Candidates, Company Profile

Detailed Screen Mockups

1. Homepage (Public)

+------------------------------------------------------+
|  BACKSTORY [Logo]             Login | Register       |
+------------------------------------------------------+
|                                                      |
|   +--------------+        +--------------+           |
|   | FOR CANDIDATES|        | FOR EMPLOYERS |          |
|   +--------------+        +--------------+           |
|   Tell your complete      Find the perfect match     |
|   professional story      by accessing deeper        |
|   beyond a single page    candidate insights         |
|                                                      |
|   [Get Started]           [Search Candidates]        |
|                                                      |
+------------------------------------------------------+
|                                                      |
|  How It Works                                        |
|                                                      |
|  [Candidate Flow Visual]    [Employer Flow Visual]   |
|                                                      |
|  - Upload your details     - Search candidate pool   |
|  - Create AI assistant     - Ask personalized Q&A    |
|  - Generate tailored CVs   - Generate targeted CVs   |
|                                                      |
+------------------------------------------------------+
|                                                      |
|  Testimonials | Success Stories | Partners           |
|                                                      |
+------------------------------------------------------+

2. Registration - Candidate

+------------------------------------------------------+
|  BACKSTORY [Logo]             Home                   |
+------------------------------------------------------+
|                                                      |
|  Create Your Candidate Account                       |
|                                                      |
|  [ ] Email                                           |
|  [ ] Password                                        |
|  [ ] Confirm Password                                |
|                                                      |
|  [ ] I agree to the Terms & Privacy Policy           |
|                                                      |
|  [Create Account]                                    |
|                                                      |
|  Already have an account? [Login]                    |
|                                                      |
|  --- or ---                                          |
|                                                      |
|  [Continue with Google]                              |
|  [Continue with LinkedIn]                            |
|                                                      |
+------------------------------------------------------+

3. Registration - Employer

+------------------------------------------------------+
|  BACKSTORY [Logo]             Home                   |
+------------------------------------------------------+
|                                                      |
|  Create Your Employer Account                        |
|                                                      |
|  [ ] Email                                           |
|  [ ] Password                                        |
|  [ ] Confirm Password                                |
|  [ ] Company Name                                    |
|  [ ] Company Size                                    |
|  [ ] Industry                                        |
|                                                      |
|  [ ] I agree to the Terms & Privacy Policy           |
|                                                      |
|  [Create Account]                                    |
|                                                      |
|  Already have an account? [Login]                    |
|                                                      |
|  --- or ---                                          |
|                                                      |
|  [Continue with Google]                              |
|  [Continue with LinkedIn]                            |
|                                                      |
+------------------------------------------------------+

4. Candidate Dashboard (Home)

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |                                      |
|  | Profile    |    Welcome back, [Name]!             |
|  | Backstory  |                                      |
|  | Resumes    |    Your profile is 75% complete      |
|  | Q&A Setup  |    [Complete Your Profile]           |
|  | Analytics  |                                      |
|  | Settings   |                                      |
|  +------------+                                      |
|                                                      |
|  +-------------------+  +--------------------+       |
|  | Resume Builder    |  | Recent Activity    |       |
|  |                   |  |                    |       |
|  | 3 custom resumes  |  | 5 profile views    |       |
|  | Last created:     |  | 2 resume downloads |       |
|  | May 15, 2025      |  | 1 direct contact   |       |
|  |                   |  |                    |       |
|  | [Create New]      |  | [View All Activity]|       |
|  +-------------------+  +--------------------+       |
|                                                      |
|  +-------------------+  +--------------------+       |
|  | Complete Your     |  | Improvement        |       |
|  | Backstory         |  | Suggestions        |       |
|  |                   |  |                    |       |
|  | • Add projects    |  | • Add certifications|      |
|  | • Detail skills   |  | • Enhance your     |       |
|  | • Work history    |  |   project details  |       |
|  |                   |  |                    |       |
|  | [Edit Backstory]  |  | [View All Tips]    |       |
|  +-------------------+  +--------------------+       |
|                                                      |
+------------------------------------------------------+

5. Candidate Profile Editor

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Edit Your Profile                 |
|  | Profile    |                                      |
|  | Backstory  |    [Upload Photo]                    |
|  | Resumes    |                                      |
|  | Q&A Setup  |    Basic Information:                |
|  | Analytics  |    [ ] Full Name                     |
|  | Settings   |    [ ] Professional Title            |
|  +------------+    [ ] Location                      |
|                    [ ] Email                         |
|                    [ ] Phone (optional)              |
|                                                      |
|                    Professional Summary:             |
|                    [                               ] |
|                    [                               ] |
|                                                      |
|                    Skills:                           |
|                    [Add Skills +]                    |
|                    • Skill 1 [x]                     |
|                    • Skill 2 [x]                     |
|                                                      |
|                    Online Presence:                  |
|                    [ ] LinkedIn URL                  |
|                    [ ] Personal Website              |
|                    [ ] GitHub/Portfolio              |
|                                                      |
|                    [Save Changes]  [Cancel]          |
|                                                      |
+------------------------------------------------------+

6. Backstory Content Editor

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Build Your Complete Backstory     |
|  | Profile    |                                      |
|  | Backstory  |    +-------------------------+       |
|  | Resumes    |    | Education | Experience | Projects|
|  | Q&A Setup  |    +-------------------------+       |
|  | Analytics  |                                      |
|  | Settings   |    Work Experience:                  |
|  +------------+    [+ Add Experience]                |
|                                                      |
|                    Company: [                      ] |
|                    Position: [                     ] |
|                    Dates: [From] [To] [Current ☐]   |
|                    Location: [                     ] |
|                                                      |
|                    Description:                      |
|                    [                               ] |
|                    [                               ] |
|                                                      |
|                    Key Achievements:                 |
|                    [+ Add Achievement]               |
|                    • Achievement 1 [Edit] [Delete]   |
|                    • Achievement 2 [Edit] [Delete]   |
|                                                      |
|                    Technologies Used:                |
|                    [+ Add Technology]                |
|                    • Tech 1 [x]  • Tech 2 [x]        |
|                                                      |
|                    [Save Experience]                 |
|                                                      |
|                    [Import from LinkedIn]            |
|                    [Import from Resume File]         |
|                    [Import from JSON]                |
|                                                      |
+------------------------------------------------------+

7. Q&A Setup

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Configure Q&A Experience          |
|  | Profile    |                                      |
|  | Backstory  |    Your AI assistant helps employers |
|  | Resumes    |    learn more about your experience. |
|  | Q&A Setup  |                                      |
|  | Analytics  |    AI Personality:                   |
|  | Settings   |    [ ] Professional & Straightforward|
|  +------------+    [ ] Friendly & Conversational     |
|                    [ ] Technical & Detailed          |
|                    [ ] Custom...                     |
|                                                      |
|                    Custom Instructions:              |
|                    [                               ] |
|                    [                               ] |
|                                                      |
|                    Topics to Emphasize:              |
|                    [+ Add Topic]                     |
|                    • Leadership experience [x]       |
|                    • Technical skills [x]            |
|                                                      |
|                    Topics to Avoid:                  |
|                    [+ Add Topic]                     |
|                    • Salary expectations [x]         |
|                                                      |
|                    Test Your Assistant:              |
|                    [Ask a test question...]          |
|                    [Test]                            |
|                                                      |
|                    [Save Configuration]              |
|                                                      |
+------------------------------------------------------+

8. Resume Builder

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Resume Builder                    |
|  | Profile    |                                      |
|  | Backstory  |    +-------------------------+       |
|  | Resumes    |    | Create | Saved | Templates |    |
|  | Q&A Setup  |    +-------------------------+       |
|  | Analytics  |                                      |
|  | Settings   |    Create Custom Resume:             |
|  +------------+                                      |
|                                                      |
|                    Target Position:                  |
|                    [                               ] |
|                                                      |
|                    Paste Job Description (optional): |
|                    [                               ] |
|                    [                               ] |
|                                                      |
|                    Focus Areas:                      |
|                    [☑] Leadership                    |
|                    [☑] Technical Skills              |
|                    [☐] Project Management            |
|                    [☐] Client Relations              |
|                    [+ Custom Focus]                  |
|                                                      |
|                    Resume Length:                    |
|                    [○] 1 Page  [●] 2 Pages           |
|                                                      |
|                    Template Style:                   |
|                    [Template Thumbnails]             |
|                    [◉] Modern  [○] Classic  [○] Bold |
|                                                      |
|                    [Generate Resume]                 |
|                                                      |
+------------------------------------------------------+

9. Resume Editor

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Edit Resume                       |
|  | Profile    |                                      |
|  | Backstory  |    +-------------------------+       |
|  | Resumes    |    | Content | Design | Preview |    |
|  | Q&A Setup  |    +-------------------------+       |
|  | Analytics  |                                      |
|  | Settings   |    Resume Sections:                  |
|  +------------+    [↕] Contact Information           |
|                    [↕] Professional Summary          |
|                    [↕] Work Experience               |
|                    [↕] Skills                        |
|                    [↕] Education                     |
|                    [↕] Projects                      |
|                    [+ Add Section]                   |
|                                                      |
|                    Editing: Work Experience          |
|                    -------------------------         |
|                    Select Experiences to Include:    |
|                    [☑] Company A (2023-Present)      |
|                    [☑] Company B (2020-2023)         |
|                    [☐] Company C (2018-2020)         |
|                                                      |
|                    For selected experiences:         |
|                    [☑] Show all achievements         |
|                    [○] Focus on relevant items only  |
|                                                      |
|                    [Re-Generate This Section]        |
|                                                      |
|                    [Save Changes]  [Preview]         |
|                                                      |
+------------------------------------------------------+

10. Analytics Dashboard (Candidate)

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Profile Analytics                 |
|  | Profile    |                                      |
|  | Backstory  |    +-------------------------+       |
|  | Resumes    |    | Overview | Engagement | Resumes |
|  | Q&A Setup  |    +-------------------------+       |
|  | Analytics  |                                      |
|  | Settings   |    Profile Performance:              |
|  +------------+                                      |
|                                                      |
|                    [Graph: Profile Views Last 30 Days]|
|                                                      |
|                    Interaction Metrics:              |
|                    • 45 Profile Views                |
|                    • 12 Resume Downloads             |
|                    • a  Direct Contacts              |
|                    • 23 Q&A Interactions             |
|                                                      |
|                    Top Q&A Topics:                   |
|                    [Graph: Most Asked Questions]     |
|                                                      |
|                    Resume Performance:               |
|                    [Graph: Downloads by Resume]      |
|                                                      |
|                    Discovery Sources:                |
|                    [Graph: How Employers Found You]  |
|                                                      |
|                    [Download Report]                 |
|                                                      |
+------------------------------------------------------+

11. Employer Dashboard

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Employer Dashboard                |
|  | Search     |                                      |
|  | Saved      |    Welcome back, [Company]!          |
|  | Jobs       |                                      |
|  | Company    |    +-------------------+  +--------+ |
|  | Analytics  |    | Quick Search      |  | Recent | |
|  | Settings   |    |                   |  |        | |
|  +------------+    | [Search...]       |  | • Cand1| |
|                    | [Go]              |  | • Cand2| |
|                    +-------------------+  +--------+ |
|                                                      |
|                    +-------------------+  +--------+ |
|                    | Talent Pools      |  | Job    | |
|                    |                   |  | Matches| |
|                    | • Frontend Devs   |  |        | |
|                    | • Data Scientists |  | 5 new  | |
|                    | • Product Managers|  | matches| |
|                    |                   |  |        | |
|                    | [Manage Pools]    |  | [View] | |
|                    +-------------------+  +--------+ |
|                                                      |
|                    +-------------------+             |
|                    | Active Job Postings|             |
|                    |                   |             |
|                    | • Sr Developer    |             |
|                    | • UX Designer     |             |
|                    |                   |             |
|                    | [Post New Job]    |             |
|                    +-------------------+             |
|                                                      |
+------------------------------------------------------+

12. Candidate Search (Employer)

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Search Candidates                 |
|  | Search     |                                      |
|  | Saved      |    [Search by keyword, skill, role...] |
|  | Jobs       |                                      |
|  | Company    |    Filter By:                        |
|  | Analytics  |    +----------------------------+    |
|  | Settings   |    | Skills | Experience | Location ||
|  +------------+    +----------------------------+    |
|                                                      |
|                    Skills:                           |
|                    [+ Add Skill]                     |
|                    • React [x]  • Python [x]         |
|                                                      |
|                    Experience Level:                 |
|                    [☐] Entry (0-2 years)             |
|                    [☑] Mid (3-5 years)               |
|                    [☑] Senior (6+ years)             |
|                                                      |
|                    Location:                         |
|                    [☑] Remote OK                     |
|                    [ ] City/Region...                |
|                                                      |
|                    [Advanced Filters ▼]              |
|                    • Education                       |
|                    • Industry Experience             |
|                    • Last Active                     |
|                                                      |
|                    [Search]  [Save This Search]      |
|                                                      |
|                    Results (24):                     |
|                    [Candidate Cards with brief info] |
|                                                      |
+------------------------------------------------------+

13. Candidate Profile View (Employer)

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Candidate Profile                 |
|  | Search     |                                      |
|  | Saved      |    +-------------------------+       |
|  | Jobs       |    | Profile | Q&A | Generate Resume ||
|  | Company    |    +-------------------------+       |
|  | Analytics  |                                      |
|  | Settings   |    [Photo] Name: John Developer      |
|  +------------+    Title: Senior Frontend Engineer   |
|                    Location: Portland, OR (Remote OK)|
|                                                      |
|                    [Save ☆] [Contact] [Share]        |
|                                                      |
|                    Summary:                          |
|                    Senior engineer with 8+ years     |
|                    experience building scalable web  |
|                    applications and leading teams.   |
|                                                      |
|                    Skills:                           |
|                    • React  • TypeScript  • NodeJS   |
|                    • AWS    • GraphQL     • Redux    |
|                                                      |
|                    Experience:                       |
|                    • Tech Co (2020-Present)          |
|                      Senior Frontend Engineer        |
|                                                      |
|                    • Startup Inc (2016-2020)         |
|                      Frontend Developer              |
|                                                      |
|                    [View Full Profile]               |
|                                                      |
+------------------------------------------------------+

14. Q&A Interface (Employer)

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Ask about John's Experience       |
|  | Search     |                                      |
|  | Saved      |    +-------------------------+       |
|  | Jobs       |    | Profile | Q&A | Generate Resume ||
|  | Company    |    +-------------------------+       |
|  | Analytics  |                                      |
|  | Settings   |    Ask anything about John's         |
|  +------------+    professional background,          |
|                    skills, or experience.            |
|                                                      |
|                    Suggested Questions:              |
|                    • Tell me about your React exp.   |
|                    • How have you handled team       |
|                      conflicts?                      |
|                    • What are your biggest           |
|                      achievements?                   |
|                                                      |
|                    Chat History:                     |
|                    +-------------------------+       |
|                    | Q: Describe your biggest        |
|                    | challenge at Tech Co.           |
|                    |                                 |
|                    | A: At Tech Co, I led a critical |
|                    | migration from a legacy system  |
|                    | to a React-based architecture.  |
|                    | The main challenge was ensuring |
|                    | zero downtime while...          |
|                    +-------------------------+       |
|                                                      |
|                    [Type your question...]           |
|                    [Ask]                             |
|                                                      |
+------------------------------------------------------+

15. Resume Generator (Employer)

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Generate Tailored Resume          |
|  | Search     |                                      |
|  | Saved      |    +-------------------------+       |
|  | Jobs       |    | Profile | Q&A | Generate Resume ||
|  | Company    |    +-------------------------+       |
|  | Analytics  |                                      |
|  | Settings   |    Generate a custom resume for John |
|  +------------+    based on your job requirements.   |
|                                                      |
|                    Job Title:                        |
|                    [                               ] |
|                                                      |
|                    Job Description:                  |
|                    [                               ] |
|                    [                               ] |
|                                                      |
|                    [○] Paste JD  [●] Select Job Post |
|                    [Select from your job posts ▼]    |
|                                                      |
|                    Key Requirements:                 |
|                    [☑] React expertise               |
|                    [☑] Team leadership               |
|                    [☑] AWS experience                |
|                    [☐] Mobile development            |
|                                                      |
|                    [Generate Resume]                 |
|                                                      |
|                    Generated resumes will highlight  |
|                    relevant experience matching your |
|                    requirements.                     |
|                                                      |
+------------------------------------------------------+

16. Job Management (Employer)

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Job Management                    |
|  | Search     |                                      |
|  | Saved      |    +-------------------------+       |
|  | Jobs       |    | Active | Drafts | Closed |      |
|  | Company    |    +-------------------------+       |
|  | Analytics  |                                      |
|  | Settings   |    [+ Post New Job]                  |
|  +------------+                                      |
|                                                      |
|                    Active Jobs (3):                  |
|                    +-------------------------+       |
|                    | Senior Frontend Engineer        |
|                    | Posted: May 10, 2025            |
|                    | Matches: 12                     |
|                    | [View] [Edit] [Close]           |
|                    +-------------------------+       |
|                                                      |
|                    +-------------------------+       |
|                    | UX Designer                     |
|                    | Posted: May 8, 2025             |
|                    | Matches: 8                      |
|                    | [View] [Edit] [Close]           |
|                    +-------------------------+       |
|                                                      |
|                    +-------------------------+       |
|                    | Product Manager                 |
|                    | Posted: May 5, 2025             |
|                    | Matches: 15                     |
|                    | [View] [Edit] [Close]           |
|                    +-------------------------+       |
|                                                      |
+------------------------------------------------------+

17. Company Profile (Employer)

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Company Profile                   |
|  | Search     |                                      |
|  | Saved      |    This information will be visible  |
|  | Jobs       |    to candidates viewing your jobs.  |
|  | Company    |                                      |
|  | Analytics  |    [Upload Logo]                     |
|  | Settings   |                                      |
|  +------------+    Company Information:              |
|                    [ ] Company Name                  |
|                    [ ] Industry                      |
|                    [ ] Size                          |
|                    [ ] Website                       |
|                    [ ] Location(s)                   |
|                                                      |
|                    Company Description:              |
|                    [                               ] |
|                    [                               ] |
|                                                      |
|                    Company Benefits:                 |
|                    [+ Add Benefit]                   |
|                    • Remote Work [Edit] [Delete]     |
|                    • Healthcare [Edit] [Delete]      |
|                                                      |
|                    Company Culture:                  |
|                    [                               ] |
|                                                      |
|                    [Save Changes]                    |
|                                                      |
|                    [Preview Public Profile]          |
|                                                      |
+------------------------------------------------------+

18. Employer Analytics

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Recruiting Analytics              |
|  | Search     |                                      |
|  | Saved      |    +-----------------------------+   |
|  | Jobs       |    | Overview | Jobs | Engagement |  |
|  | Company    |    +-----------------------------+   |
|  | Analytics  |                                      |
|  | Settings   |    Account Activity:                 |
|  +------------+                                      |
|                    [Graph: Monthly Activity Trends]  |
|                    • 120 Candidate Profiles Viewed   |
|                    • 45 Q&A Interactions             |
|                    • 30 Resumes Generated            |
|                                                      |
|                    Job Performance:                  |
|                    [Graph: Candidates per Job]       |
|                                                      |
|                    Top Candidate Skills:             |
|                    [Graph: Most Common Skills]       |
|                                                      |
|                    Search Terms:                     |
|                    [Graph: Most Used Search Terms]   |
|                                                      |
|                    Talent Pool Insights:             |
|                    • 82% of viewed candidates have   |
|                      5+ years of experience          |
|                    • Most common tech stack: React,  |
|                      Node.js, AWS                    |
|                                                      |
|                    [Download Report]                 |
|                                                      |
+------------------------------------------------------+

19. Settings Page (Both Users)

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Account Settings                  |
|  | Main Nav   |                                      |
|  | ...        |    +--------------------------------+|
|  | ...        |    | Profile | Notifications | Billing||
|  | ...        |    +--------------------------------+|
|  | Settings   |                                      |
|  +------------+    Account Information:              |
|                    [ ] Email                         |
|                    [ ] Password (Change)             |
|                                                      |
|                    Privacy Settings:                 |
|                    [☑] Profile visible to employers  |
|                    [☑] Allow direct contact          |
|                    [☐] Show profile in search results|
|                                                      |
|                    Data Management:                  |
|                    [☑] Store chat history            |
|                    [☑] Use data for analytics        |
|                                                      |
|                    AI Configuration:                 |
|                    [Select Model ▼]                  |
|                    • Anthropic Claude                |
|                    • OpenAI GPT-4                    |
|                    • Local Open Source               |
|                                                      |
|                    API Configuration:                |
|                    [ ] API Key (if using external)   |
|                                                      |
|                    [Save Changes] [Cancel]           |
|                                                      |
+------------------------------------------------------+

User Flow Diagrams

Candidate User Flow

Home Page → Register (Candidate) → Dashboard
   ↓
Dashboard → Profile Editor → Backstory Editor → Q&A Setup
   ↓
Dashboard → Resume Builder → Resume Editor → Generated Resume
   ↓
Dashboard → Analytics → Settings

Employer User Flow

Home Page → Register (Employer) → Dashboard
   ↓
Dashboard → Company Profile → Job Management → Post Job
   ↓
Dashboard → Candidate Search → Candidate Profile → Q&A Interface
   ↓                              ↓
   ↓                       Generate Resume
   ↓
Dashboard → Saved Candidates → Analytics → Settings

Connection Points Between Systems

  1. Candidate Profile → Employer Search

    • Candidate profiles (when visible) appear in employer searches
    • Search algorithms match candidate skills to employer requirements
  2. Candidate Q&A Setup → Employer Q&A Interface

    • Q&A configurations by candidates determine how their AI assistant responds
    • Employer questions are processed through the candidate's configured AI
  3. Employer Job Posts → Candidate Resume Generator

    • Job descriptions posted by employers can be used by candidates to generate tailored resumes
    • Skills and requirements from job posts help optimize candidate resumes
  4. Resume Generation Bidirectional Flow

    • Employers can generate candidate-specific resumes based on job requirements
    • Candidates can generate job-specific resumes based on posted positions
    • Both flows leverage the same underlying RAG system with different contexts
  5. Analytics Insights Exchange

    • Candidates see which employers viewed their profiles (anonymized)
    • Employers see aggregate data on candidate pools relevant to their needs
    • Both sides receive optimization suggestions based on market trends

Additional Screens

20. Job Posting Creator (Employer)

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Create Job Posting                |
|  | Search     |                                      |
|  | Saved      |    Job Details:                      |
|  | Jobs       |    [ ] Job Title                     |
|  | Company    |    [ ] Department                    |
|  | Analytics  |    [ ] Location                      |
|  | Settings   |    [☐] Remote OK                     |
|  +------------+    [ ] Employment Type (Full/Part)   |
|                    [ ] Experience Level              |
|                                                      |
|                    Job Description:                  |
|                    [                               ] |
|                    [                               ] |
|                                                      |
|                    Required Skills:                  |
|                    [+ Add Skill]                     |
|                    • React [x]  • TypeScript [x]     |
|                                                      |
|                    Preferred Skills:                 |
|                    [+ Add Skill]                     |
|                    • GraphQL [x]  • AWS [x]          |
|                                                      |
|                    [☑] Enable AI matching            |
|                    [☑] Allow candidate resume gen    |
|                                                      |
|                    [Save as Draft] [Publish Job]     |
|                                                      |
+------------------------------------------------------+

21. Talent Pool Management (Employer)

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Talent Pools                      |
|  | Search     |                                      |
|  | Saved      |    [+ Create New Pool]               |
|  | Jobs       |                                      |
|  | Company    |    Frontend Developers:              |
|  | Analytics  |    (15 candidates)                   |
|  | Settings   |    [View] [Edit] [Delete]            |
|  +------------+                                      |
|                    Cloud Engineers:                  |
|                    (8 candidates)                    |
|                    [View] [Edit] [Delete]            |
|                                                      |
|                    UX Designers:                     |
|                    (12 candidates)                   |
|                    [View] [Edit] [Delete]            |
|                                                      |
|                    Edit Pool: Frontend Developers    |
|                    +--------------------------+      |
|                    | Name: [Frontend Developers]     |
|                    |                                 |
|                    | Description:                    |
|                    | [Senior frontend talent...]     |
|                    |                                 |
|                    | Auto-add criteria:              |
|                    | • Skills: React, Vue, Angular   |
|                    | • Experience: 3+ years          |
|                    | [Edit Criteria]                 |
|                    |                                 |
|                    | [Save Changes]                  |
|                    +--------------------------+      |
|                                                      |
+------------------------------------------------------+

22. Import Experience Screen (Candidate)

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Import Professional Experience    |
|  | Profile    |                                      |
|  | Backstory  |    Choose import method:             |
|  | Resumes    |                                      |
|  | Q&A Setup  |    [○] Upload Resume File            |
|  | Analytics  |    [●] Import from LinkedIn          |
|  | Settings   |    [○] Manual Entry                  |
|  +------------+    [○] JSON/CSV Upload               |
|                                                      |
|                    LinkedIn Import:                  |
|                    [Connect with LinkedIn]           |
|                                                      |
|                    Resume File Upload:               |
|                    [Choose File] No file chosen      |
|                    Supported formats: PDF, DOCX      |
|                                                      |
|                    Data to Import:                   |
|                    [☑] Work Experience               |
|                    [☑] Education                     |
|                    [☑] Skills                        |
|                    [☐] Projects                      |
|                    [☐] Certifications               |
|                                                      |
|                    [Start Import]                    |
|                                                      |
+------------------------------------------------------+

23. Generated Resume View & Edit (Both Users)

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Generated Resume                  |
|  | Main Nav   |                                      |
|  | ...        |    John Developer                    |
|  | ...        |    Senior Frontend Engineer          |
|  | ...        |    john@email.com | (555) 123-4567   |
|  | Settings   |    Portland, OR | github.com/john    |
|  +------------+                                      |
|                    SUMMARY                           |
|                    Experienced frontend engineer     |
|                    with 8+ years building scalable   |
|                    web applications and expertise    |
|                    in React, TypeScript and AWS.     |
|                                                      |
|                    EXPERIENCE                        |
|                    Tech Co | 2020-Present            |
|                    Senior Frontend Engineer          |
|                    • Led migration to React...       |
|                    • Reduced load times by 60%...    |
|                    [Edit Section]                    |
|                                                      |
|                    Startup Inc | 2016-2020           |
|                    Frontend Developer                |
|                    • Built responsive dashboards...  |
|                    • Implemented state management... |
|                    [Edit Section]                    |
|                                                      |
|                    [Download PDF] [Share] [Revise]   |
|                                                      |
+------------------------------------------------------+

24. Candidate Comparison (Employer)

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Compare Candidates                |
|  | Search     |                                      |
|  | Saved      |    Selected Candidates:              |
|  | Jobs       |    [John Developer ✓] [Jane Coder ✓] |
|  | Company    |    [Add Another +]                   |
|  | Analytics  |                                      |
|  | Settings   |    Comparison Criteria:              |
|  +------------+    [☑] Skills Match                  |
|                    [☑] Experience Level              |
|                    [☑] Education                     |
|                    [☐] Project Complexity            |
|                                                      |
|                    +-------------+--------------+    |
|                    | Criteria    | John    | Jane    |
|                    +-------------+--------------+    |
|                    | Skills Match| 92%     | 87%     |
|                    | Experience  | 8 yrs   | 6 yrs   |
|                    | Leadership  | High    | Medium  |
|                    | React       | Expert  | Advanced|
|                    | AWS         | Advanced| Expert  |
|                    +-------------+--------------+    |
|                                                      |
|                    [Compare Q&A Responses]           |
|                    [Generate Side-by-Side Resumes]   |
|                                                      |
+------------------------------------------------------+

25. Notification & Activity Feed (Both Users)

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    Activity Feed                     |
|  | Main Nav   |                                      |
|  | ...        |    Recent Notifications:             |
|  | ...        |                                      |
|  | ...        |    Today                             |
|  | Settings   |    • Your profile was viewed by a    |
|  +------------+      technology company (1h ago)     |
|                    • Resume downloaded (3h ago)      |
|                    • New job match found (5h ago)    |
|                                                      |
|                    Yesterday                         |
|                    • New question asked about your   |
|                      leadership experience           |
|                    • Profile view from XYZ Corp      |
|                                                      |
|                    This Week                         |
|                    • Profile completeness increased  |
|                      to 85%                          |
|                    • 3 profile views                 |
|                    • Resume generated for "Senior    |
|                      Frontend Position"              |
|                                                      |
|                    Notification Settings:            |
|                    [Manage Notification Preferences] |
|                                                      |
+------------------------------------------------------+

26. System Configuration (Admin)

+------------------------------------------------------+
|  BACKSTORY [Logo]                 [User Menu ▼]      |
+------------------------------------------------------+
|                                                      |
|  +------------+                                      |
|  | Dashboard  |    System Configuration              |
|  | Users      |                                      |
|  | Analytics  |    +-----------------------------+   |
|  | Config     |    | AI | Storage | Accounts | API | |
|  | Logs       |    +-----------------------------+   |
|  | System     |                                      |
|  | Settings   |    AI Configuration:                 |
|  +------------+                                      |
|                    Default AI Model:                 |
|                    [○] Anthropic Claude              |
|                    [●] OpenAI GPT-4                  |
|                    [○] Self-hosted LLaMA             |
|                    [○] Combination                   |
|                                                      |
|                    Model Settings:                   |
|                    Temperature: [0.7]                |
|                    Max Tokens: [4096]                |
|                    Context Window: [16k]             |
|                                                      |
|                    Default Embeddings:               |
|                    [○] OpenAI                        |
|                    [●] Self-hosted                   |
|                                                      |
|                    API Keys:                         |
|                    Anthropic: [***********]          |
|                    OpenAI: [***********]             |
|                                                      |
|                    [Save Configuration]              |
|                                                      |
+------------------------------------------------------+

27. Mobile View - Candidate Dashboard

+-------------------------+
| BACKSTORY    [Menu ☰]  |
+-------------------------+
|                         |
| Welcome back, [Name]!   |
|                         |
| Profile: 75% complete   |
| [Complete Profile]      |
|                         |
| +-------------------+   |
| | Resume Builder    |   |
| | 3 custom resumes  |   |
| | [Create New]      |   |
| +-------------------+   |
|                         |
| +-------------------+   |
| | Recent Activity   |   |
| | • 5 profile views |   |
| | • 2 downloads     |   |
| | [View All]        |   |
| +-------------------+   |
|                         |
| +-------------------+   |
| | Quick Actions     |   |
| | [Edit Profile]    |   |
| | [Add Experience]  |   |
| | [Configure Q&A]   |   |
| +-------------------+   |
|                         |
| [Navigation Tabs]       |
| Home | Profile | More   |
+-------------------------+
+-------------------------+
| BACKSTORY    [Menu ☰]  |
+-------------------------+
|                         |
| Search Candidates       |
|                         |
| [Search terms...]       |
|                         |
| Filters:                |
| [Filter ▼]              |
|                         |
| Results (24):           |
|                         |
| +-------------------+   |
| | John Developer    |   |
| | Sr Frontend Eng   |   |
| | 8+ years • React  |   |
| | [View Profile]    |   |
| +-------------------+   |
|                         |
| +-------------------+   |
| | Jane Coder        |   |
| | Full Stack Dev    |   |
| | 6+ years • Node   |   |
| | [View Profile]    |   |
| +-------------------+   |
|                         |
| +-------------------+   |
| | Alex Designer     |   |
| | UX/UI Designer    |   |
| | 5+ years • Figma  |   |
| | [View Profile]    |   |
| +-------------------+   |
|                         |
| [Load More]             |
|                         |
| [Navigation Tabs]       |
| Home | Search | Saved   |
+-------------------------+

Integration Points with External Systems

1. Authentication & Identity

  • OAuth Integration: Connect with Google, LinkedIn, GitHub
  • SSO Support: For enterprise employer accounts
  • JWT Authentication: For API access and mobile apps

2. Content Import/Export

  • LinkedIn Integration: Import professional experience
  • Resume Parsing: Upload existing resumes (PDF, DOCX)
  • CSV/JSON Import: Batch import of candidate data
  • ATS Integration: Connect with employer ATS systems

3. AI Backends

  • LLM Provider Options:
    • Anthropic Claude (API)
    • OpenAI GPT-4 (API)
    • Google Gemini (API)
    • Self-hosted open source models
  • Embedding Models:
    • OpenAI Embeddings
    • Self-hosted alternatives
    • Vector database options (Pinecone, Weaviate, etc.)

4. Storage & Data Management

  • Document Storage: For resumes, profiles, job descriptions
  • Vector Database: For semantic search capabilities
  • Analytics Database: For tracking user interactions

Permissions Structure

1. Candidate Permissions

  • Profile Visibility Controls:
    • Public (searchable by all employers)
    • Private (only visible to approved employers)
    • Hidden (not searchable, accessible by direct link only)
  • Contact Permissions:
    • Allow direct contact
    • Anonymized contact through system
    • Require approval before contact

2. Employer Permissions

  • User Roles:
    • Admin (full access to company account)
    • Recruiter (search and contact candidates)
    • Hiring Manager (view selected candidates)
    • Read-only (view only access)
  • Feature Access:
    • Resume generation limits
    • Candidate search filters
    • Analytics access
    • Talent pool management

3. System Admin Permissions

  • Full System Configuration
  • User Management
  • AI Model Configuration
  • Usage Analytics & Reporting

Deployment Architecture Considerations

  1. Self-Hosted Option:

    • Docker containers for easy deployment
    • Configuration for different LLM backends
    • Local vector DB setup
  2. Cloud-Hosted Option:

    • Multi-tenant architecture
    • Subscription tiers for different features
    • API access for enterprise integrations
  3. Hybrid Deployment:

    • Core system in cloud
    • Private data and models on-premises
    • Secure API connections between components