1217 lines
58 KiB
Markdown
Executable File
1217 lines
58 KiB
Markdown
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 |
|
|
+-------------------------+
|
|
```
|
|
|
|
### 28. Mobile View - Employer Search
|
|
```
|
|
+-------------------------+
|
|
| 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 |