📱 BPO Skills Academy: Master UX Audit + Launch Plan
Complete wireframes, friction analysis, information architecture & priority roadmap
Executive Summary Current State Assessment
45%
App Complete
15/33 screens built
18
Screens Missing
Can't launch without
10
Friction Points
Blocking user flow
🚨 Cannot Launch Without These 5 Critical Fixes
- Authentication Flow — Add Login, Signup, Onboarding screens (users can't access app)
- "Drag Right" Confusion — Replace with clear "Try Quiz!" + "Next Lesson" buttons
- Lock State Clarity — Fix confusing "Discover/Explore/Build" labels
- Quiz Results Complete — Add certificate unlock screen + social sharing
- Progress Breadcrumbs — Show "Module → Lesson 3/10" so users know where they are
Navigation & UX Intuitiveness Assessment
✅ What's Working
Bottom nav: Thumb-friendly
Progress tracking: Always visible
Gamification: Clear cowrie rewards
Card organization: Scannable grid
⚠️ Navigation Gaps
Back button: Inconsistent
Breadcrumbs: None on nested screens
Search: Missing discovery tool
Filters: No way to sort modules
🔴 Critical Friction
"Drag right": Unclear gesture
Lock states: Confusing labels
Video embeds: External branding
No feedback: Quiz answers
❌ Missing Screens
Onboarding: No welcome flow
Login/Signup: Not designed
Settings: Can't edit profile
Cowrie Shop: Can't spend currency
Current User Journey (with friction points)
✓ WORKS
Open App
Lands on home
→
✗ MISSING
No Login
Just shows content
→
✓ WORKS
Browse Modules
Clear cards
→
⚠ FRICTION
Tap Module
"Drag right" unclear
→
✓ WORKS
Take Quiz
Clear interface
→
⚠ INCOMPLETE
See Results
No certificate screen
Journey Score: 6/10 — Core flow works but missing critical screens (auth, onboarding, results) and has friction points.
Complete Information Architecture Map
LAYER 0: ENTRY FLOW
❌ MISSING
Splash
→
❌ MISSING
Login
→
❌ MISSING
Signup
→
❌ MISSING
Onboarding
(3 screens)
→
❌ MISSING
Profile Setup
↓
LAYER 1: MAIN NAVIGATION (Bottom Tabs)
✓ EXISTS
🏠
Home
Entry point
✓ EXISTS
📊
Leaderboard
Compete
✓ EXISTS
📈
Dashboard
Analytics
✓ EXISTS
👤
Profile
User info
LAYER 2A: HOME → MODULE CATEGORIES
✓ EXISTS
BPO Overview
✓ EXISTS
Career Pathways
✓ EXISTS
Performance Metrics
✓ EXISTS
Future Trends
✓ EXISTS
Org Practices
✓ EXISTS
Workplace Etiquette
✓ EXISTS
Talent Dev
✓ EXISTS
AI & Automation
↓
LAYER 3: MODULE → LESSON → QUIZ → RESULTS
✓ EXISTS
Module Detail
List of lessons
→
✓ EXISTS
Lesson Content
Video + text
→
✓ EXISTS
Quiz
MCQ questions
→
⚠ INCOMPLETE
Quiz Results
Basic only
→
❌ MISSING
Certificate
Not built
LAYER 2B: PROFILE → SETTINGS & SUB-PAGES
✓ EXISTS
Profile View
❌ MISSING
Edit Profile
❌ MISSING
Settings
❌ MISSING
Achievements
❌ MISSING
Certificates
LAYER 2C: GAMIFICATION FEATURES
❌ MISSING
Cowries Shop
Spend currency
❌ MISSING
Badge Gallery
View all badges
✓ EXISTS
Notifications
Updates feed
LAYER 2D: UTILITY & SUPPORT
❌ MISSING
Search Results
❌ MISSING
Help/FAQ
❌ MISSING
Support
❌ MISSING
Forgot Password
15
Screens Exist
Core learning flow works
18
Screens Missing
Can't launch without these
33
Total Screens Needed
For complete app
5 Critical User Journeys
Journey 1: First-Time User (Complete Onboarding)
❌ Splash
→
❌ Signup
→
❌ Onboarding 1
→
❌ Onboarding 2
→
❌ Onboarding 3
→
❌ Profile Setup
→
✓ Home
Status: 100% missing — Cannot onboard new users
Journey 2: Returning User (Login & Learn)
❌ Splash
→
❌ Login
→
✓ Home
→
✓ Module
→
✓ Lesson
Status: 40% missing — Auth flow missing, learning flow works
Journey 3: Complete Learning (Lesson to Certificate)
✓ Lesson
→
✓ Quiz
→
⚠ Results (basic)
→
❌ Certificate
→
❌ Share
Status: 60% working — Results incomplete, no certificate screen
Journey 4: Gamification Loop (Earn & Spend Cowries)
✓ Quiz Complete
→
✓ Earn Cowries
→
✓ View Balance
→
❌ Shop
→
❌ Spend
→
❌ Unlock Module
Status: 50% missing — Can earn but can't spend cowries (no shop)
Journey 5: Profile Management
✓ Profile
→
❌ Edit Profile
|
❌ Settings
|
❌ My Certificates
|
❌ Achievements
Status: 80% missing — Can view profile but can't edit anything
⚠️ 10 Micro-Friction Points That Break Flow
Friction Analysis Detailed Problem → Impact → Fix
🎥
YouTube Embeds Break Context
Problem: Videos show external branding (CallCenterHosting, BenchmarkPortal). Users don't know if they're still in BSA app.
Impact:
• Trust erosion (looks like third-party content)• Distraction (YouTube UI visible)
• Navigation confusion (back button behavior unclear)
Fix:
• Add branded video player overlay• Re-upload videos to BSA YouTube channel with custom thumbnails
• Use iframe API to hide YouTube branding
📊
Hidden Progress in Nested Screens
Problem: When inside a lesson, users can't see module-level progress (e.g., "Lesson 3 of 10"). No breadcrumb trail.
Impact:
• Disorientation (where am I in the module?)• Reduced motivation (can't see completion proximity)
• Abandonment (users lose track of progress)
Fix:
• Add breadcrumb: "Career Pathways > Lesson 3/10"• Show mini progress bar at top of lesson screen
• Display "Next: Customer Service Skills →" preview
⏱️
No Immediate Quiz Answer Feedback
Problem: After selecting an answer, users must wait until quiz end to see if they were correct. No instant validation.
Impact:
• Anxiety (was I right?)• Lost learning opportunity (can't understand mistakes immediately)
• Disengagement (no dopamine hit from correct answers)
Fix:
• Show instant feedback: Green ✓ or Red ✗ after submit• Display explanation: "Correct! FCR measures..." or "Not quite. The answer is..."
• Animate cowrie earning (+5 🪙 pop-up)
🔘
Disabled Button States Unclear
Problem: "Submit" button appears identical whether enabled or disabled. Users tap repeatedly with no feedback.
Impact:
• Confusion (why isn't it working?)• Frustration (repeated taps with no response)
• Perceived bug (users think app is broken)
Fix:
• Disabled state: 40% opacity + gray color• Add tooltip on tap: "Select an answer first"
• Enable state: Full color + subtle shadow
📭
Empty States Show Nothing
Problem: When notifications are empty, screen is blank. No illustration or guidance on what to do next.
Impact:
• Dead end feeling (nothing here, why am I here?)• Abandonment (users leave app)
• Missed conversion (no nudge to start learning)
Fix:
• Add friendly illustration (empty inbox with sparkles)• Message: "All caught up! Start a new module →"
• CTA button: "Browse Modules" (teal, prominent)
↕️
"Please scroll up for more" is Redundant
Problem: Lesson screens show text at bottom saying "Please scroll up for more ↑" — clutters UI and assumes users don't know how to scroll.
Impact:
• Visual noise (unnecessary text)• Patronizing tone (users know how to scroll)
• Wasted space (could show next lesson preview)
Fix:
• Remove scroll instruction entirely• Trust standard scroll behavior
• Use that space for "Next Up" preview card instead
🪙
Cowrie Currency Never Explained
Problem: Users see "15 Cowries Earned" but have no context for what cowries are, why they matter, or what to do with them.
Impact:
• Confusion (what are these?)• Reduced motivation (unclear value)
• Missed gamification benefit (users ignore them)
Fix:
• First cowrie earn: Show tooltip "Cowries unlock premium modules!"• Add "?" icon next to cowrie balance → explainer modal
• Onboarding screen 2 should explain currency system
⏳
Missing Loading States
Problem: When tapping a module or quiz, there's no visual feedback while content loads. Screen appears frozen.
Impact:
• Perceived slowness (users think nothing happened)• Double-taps (users tap again, causing errors)
• Abandonment (users hit back button)
Fix:
• Add skeleton screens (gray placeholder boxes)• Button loading state: Spinner + disabled
• Fade-in animation when content appears
⚠️
Generic Error Messages
Problem: When something breaks, users likely see technical errors like "Error 500" or "Network request failed" with no recovery path.
Impact:
• Fear (is my data lost?)• Frustration (what do I do now?)
• Support burden (users contact help desk)
Fix:
• Friendly message: "Oops! Check your connection"• Clear action: "Retry" button (prominent)
• Context preservation: "Your progress is saved"
👆
Small Touch Targets
Problem: Some interactive elements (bookmark icon, notification bell) appear smaller than 44x44px minimum touch target.
Impact:
• Mis-taps (users hit wrong element)• Accessibility issue (hard for users with motor impairments)
• Frustration (takes multiple attempts)
Fix:
• Audit all interactive elements• Ensure 44x44px minimum (even if icon is smaller)
• Add invisible padding to increase tap area
🔥 Fix These Friction Points First
- Quiz instant feedback — Massive engagement boost
- Loading states — Prevents perceived bugs
- Button state clarity — Reduces confusion
- Progress breadcrumbs — Keeps users oriented
- Empty state illustrations — Prevents dead ends
ROI: Fixing these 5 friction points could reduce abandonment by 40%+ and increase quiz completion rates significantly.
🔐 Critical Issue #1: Missing Authentication Flow
BLOCKING LAUNCH Users Cannot Access the App
The Problem:
The app currently has no login or signup screens. There's no onboarding flow to explain what the app does or how to use it. Users can't create accounts, save progress, or access personalized content. This is a complete blocker for launch.
What's Needed:
- ✅ Login Screen — Email/password with "Forgot Password" link
- ✅ Signup Screen — Account creation with password strength indicator
- ✅ Onboarding (3 screens) — Explain app value, features, and how to earn cowries
- ✅ Profile Setup — Collect user preferences and goals
01. Login Screen ❌ MISSING
9:41📶 🔋
02. Signup Screen ❌ MISSING
9:41📶 🔋
Create Account
Join thousands of BPO professionals
Full Name
Email
Password
Already have an account? Login
03. Onboarding ❌ MISSING
9:41📶 🔋
📱
Learn Anytime, Anywhere
Access bite-sized lessons, videos, and quizzes designed for busy professionals
⚠️ Friction Point #1: "Drag Right" Confusion
HIGH FRICTION Users Don't Understand the Gesture
The Problem:
Lesson screens say "Drag right to Dive In" — but this is an unclear, non-standard gesture. Users expect clear CTAs like buttons, not swipe gestures. This creates confusion and friction at a critical moment when users want to take action.
Impact: Users don't know what to do next, leading to abandonment of the learning flow.
The Fix:
- ✅ Remove "Drag Right" text and gesture
- ✅ Add prominent "Try the Quiz!" button (teal, primary)
- ✅ Add secondary "Next Lesson →" button (white, outlined)
- ✅ Use standard button interaction patterns
08. Lesson Content (NEEDS FIX)
9:41📶 🔋
←
Workplace Etiquette
Lesson 2/15
▶
Email Etiquette Fundamentals
Professional email communication is essential in the modern workplace. Understanding proper tone, structure, and timing can significantly impact your effectiveness.
💡 Key Takeaway
Every professional email should include a clear subject line and proper greeting
✅ Working Screens (No Changes Needed)
WORKING WELL These Screens Are Production-Ready
The following screens are well-designed, functional, and don't require major changes. They demonstrate good UX patterns that should be maintained throughout the app.
04. Microlearning Hub ✅ GOOD
9:41📶 🔋
←
Microlearning
Bite-Sized Learning 🎬
Quick 2-5 minute videos
▶
3:45
Active Listening Skills
Master the art of understanding customers
✓ Completed
+5 🪙
07. Module Detail ✅ GOOD
9:41📶 🔋
←
Workplace Etiquette
Workplace Etiquette
Professional behavior fundamentals
15
Quizzes
40%
Progress
✓
Professional Communication
Completed • 5 🪙 earned
11. Leaderboard ✅ GOOD
9:41📶 🔋
Leaderboard
2
Maria S.
👑
1
John D.
3
Sarah K.
5
DW
You (Dennis)
🔥 7 day streak
175 🪙
❌ Additional Missing Screens
MISSING FEATURES Incomplete Gamification & Settings
Two critical features are missing that prevent the gamification loop from working and users from managing their accounts.
09. Cowries Shop ❌ MISSING
9:41📶 🔋
←
Cowrie Shop
45 🪙
🪙
Your Cowrie Balance
45 Cowries
🔓
Unlock Premium Module
Access advanced content
50 🪙
13. Settings ❌ MISSING
9:41📶 🔋
←
Settings
14. Certificate ⚠️ INCOMPLETE
9:41📶 🔋
←
Certificate
Certificate of Completion
Dennis Wakabayashi
has successfully completed
Career Pathways Module