Jargon

Research began with personas representing the primary learners on the platform. These personas captured user backgrounds, motivations, and the specific barriers each user type would encounter when working toward Red Seal certification.

User Personas

AaravJoyce

User Flow

A complete user flow was mapped from onboarding through course selection, quiz completion, flashcard review, and document upload. The flow identified the points where gamification would drive engagement and where friction needed to be reduced.

Jargon User Flow

Agile project management was adopted using Trello to organize sprints and track tasks. The Trello workspace was split into separate boards for developers and designers, allowing each group to manage their own work streams while maintaining visibility into the project as a whole. Discord was used as the primary channel for day-to-day team communication. Team meetings were held every Wednesday to plan the upcoming sprint, assign work, and review what had been completed in the previous week. Subject matter expert (SME) sessions with Emily from ConnectHer were held every two weeks to discuss technical direction and confirm that the platform remained aligned with the needs of immigrant tradespeople pursuing Red Seal certification. Team members took turns pushing code, and tasks were assigned to play to individual strengths, whether that was tackling work immediately, deep research, or refining UI details, maximizing overall output.

Trello Project Management

Trello Board

A dedicated Google Chrome profile was created for the project, making it straightforward for any team member to access shared platforms without juggling personal and project credentials. Platform login details and other shared references were stored across purpose-specific Discord threads, keeping information organised and easy to locate.

Discord Organisation

Discord Channels

• #general — team chit-chat.
• #design-useful-info — designers sharing design resources relevant to their tasks.
• #dev-useful-info — developers sharing dev resources relevant to their tasks.
• #shared-useful-info — resources any team member might need access to.
• #check-in — daily stand-up.
• #business-case-notes — supporting documents for the final presentation.
• #designer-chat — designer task-specific coordination and video calls.
• #dev-chat — developer task-specific coordination and video calls.
• #meeting-recordings-and-minutes — agendas and meeting minutes.
• #bugssss — outstanding errors and bugs to fix.

Parallel Workflows

While the designers on the team focused on UI/UX and market research, the developers worked in parallel on structuring the curated course content, organising terms, questions, and answers into JSON files ready for seeding. Running these work streams in parallel maximised the team's use of time in the early weeks of the build.

Structured Course Data

Git Workflow

Each team member worked on their own branch, then merged into main via pull request. No inline styles were permitted, and reusable helper functions were used wherever possible to keep the code clean and maintainable.

Naming Conventions & Project Structure

Clear naming conventions and a well-defined project structure were established early in development to ensure consistency across the two-repository architecture. These conventions governed everything from branch naming to database column formats.

frontend/src/
├── assets/                   # Assets for UI
├── components/               # Reusable components
├── contexts/                 # NotificationContext and other app-wide context
├── hooks/                    # Custom React hooks
├── lib/                      # API connections and client utilities
├── mounting/                 # Entry mounts for pages
├── pages/                    # Route-level pages
├── styles/                   # SCSS styling
├── types/                    # All TypeScript type definitions
└── utils/                    # Language, community, color utilities

frontend/src/
├── assets/
├── components/
├── contexts/
├── hooks/
├── lib/
├── mounting/
├── pages/
├── styles/
├── types/
└── utils/

backend/
├── prisma/                   # Database schema and migrations
├── scripts/                  # Database migration scripts
└── src/                      # All source code
    ├── controllers/          # Shared controllers
    ├── interfaces/           # TypeScript interfaces
    ├── lib/                  # Backend connections and helpers
    ├── middleware/           # Auth, cache, user-context middleware
    ├── routes/               # Shared routes
    ├── seeds/                # Database seeding
    ├── services/             # Notification, user, and domain logic
    └── workers/              # Background workers (e.g. documentWorker.ts)

backend/
├── prisma/
├── scripts/
└── src/
    ├── controllers/
    ├── interfaces/
    ├── lib/
    ├── middleware/
    ├── routes/
    ├── seeds/
    ├── services/
    └── workers/

jargon-terms/
├── carpenter/                # Carpenter terms and questions seed files
├── electrician/              # Electrician terms and questions seed files
├── general/                  # General terms and questions seed files
├── mechanic/                 # Mechanic terms and questions seed files
├── plumber/                  # Plumber terms and questions seed files
└── welder/                   # Welder terms and questions seed files

jargon-terms/
├── carpenter/
├── electrician/
├── general/
├── mechanic/
├── plumber/
└── welder/

Figma was used to prototype the full product ahead of development, establishing the visual language, navigation structure, and component patterns that would be carried into the build. The implementation stayed close to the prototype, with adjustments emerging through development, particularly around the avatar system and the Rocky mascot animations.

The designers led the UI/UX work, with input from the developers throughout to confirm each design could realistically be implemented within the 15-week project window.

Jargon BadgeJargon WordmarkFigma Design

Development spanned animation, data pipelines, AI integration, and precisely positioned SCSS. Several areas of the build are worth noting:

• Rocky Mascot Animations: The Rocky mascot appears on the document upload page, moving through a daily routine using pure CSS keyframe animations. The animation was introduced to give users something to watch during the upload process, which initially took close to four minutes while the platform extracted the text, generated translations, and wrote everything to the database. To reduce the perceived wait, a preview step was added: the quiz and flashcards for the learner's single selected language are cached and displayed first, with the remaining translations completed and written to the database in the background. This brought the perceived wait down to roughly one minute, while the actual upload settled at around two minutes after further improvements.
• Flashcard Avatar Pop-Ups: Jargon's mascot, Rocky, pops up from behind the flashcards during study sessions. This adds a layer of gamification to the review experience.
• Gemini Content Pipeline: User-uploaded documents are passed to the Gemini API, which extracts the text via OCR and generates vocabulary, flashcards, and quiz questions tailored to the content of the uploaded document.
• Course Data Structure and Seeding: All course content was shaped into JSON, seeded into the database, and allocated to the correct course level. This ensured a consistent data contract for the gamification layer to rely on.
• Course Locking: Unavailable courses are locked until prerequisite progress is met, which supports a sense of progression without exposing incomplete content.
• Quiz Translation: A translate button on every quiz allows learners to check their understanding mid-question without leaving the quiz flow. A Rocky chat bot was also added to the quiz page, providing encouragement and additional explainations for users.
• SVG-Sprite Avatar System: Each avatar accessory was individually positioned through SASS to remain consistent across every page and every size. The approach produced precise results but was labour-intensive. A subsequent retrospective identified a simpler approach using a single base-body container, with features swapped in and out of that container rather than positioned independently per page.

Rocky Going About His DayCoursesCourse DetailsQuizBadgesLeaderboardProfile & AvatarFlashcardsDocument UploadUpload Flow

Testing focused primarily on language accuracy, which was the highest-risk area given the volume of translated content. Emily, the project's subject matter expert and a French speaker, worked through the platform regularly and flagged translations that did not read correctly or failed to convey the original meaning. Ahead of launch, friends of the team were also asked to test the platform, with an emphasis on confirming translations in their own languages and surfacing anything that felt off.

Testing also surfaced friction in the sharing flow. To address this, a QR code was added to the leaderboard so learners could connect with friends and exchange custom quizzes more directly, reinforcing the community element of the platform.

Community and Adding Friends

Jargon was showcased at the Student Design and Technology Showcase on 5 December 2025, held at Telus Theatre on BCIT's Burnaby campus. The team ran a booth that walked attendees through the platform, demonstrating the courses, quizzes, and document upload flow. Each team member wore a custom t-shirt printed with their own Jargon avatar, carrying the gamification aesthetic from the app into the event itself.

Expo BoothTeam T-Shirts