Project Details

Problem Discovery

Solution

Prototype

Career Shield

CareerShield is a platform that empowers youth entering the workforce by offering job listings with workplace safety insights, an AI legal chatbot, educational resources, and local workshop connections to help users navigate their early careers with confidence and protection.

—————————— Project Details ——————————

Timeline: October 14 - November 4 2023

Project type: Equitable Elevation III 2023


Tools used: Figma, FigJam, Pen & Paper, Github

My role: Prototyping & UI Design

Team: Ryan Han, Ethan Xu

Awards: First Place

————————— Problem Discovery —————————

User research and pain point analysis


Problem Statement: Protecting the Youth

Young people entering the workforce often face exploitation, low wages, and a lack of career resources. Many are unaware of their workplace rights, leading to mistreatment. Existing job platforms focus primarily on job postings but lack resources to help youth navigate workplace challenges.

Identifying User Pain Points

To create a solution that truly benefits young job seekers, we conducted user research through surveys, forums, and first-hand experiences.


We identified the following key pain points:


Lack of Workplace Knowledge

Many youth don’t know their legal rights, making them vulnerable to exploitation.

Job Search Overload

Generic job platforms make it difficult for youth to find entry-level, fair-wage positions.

Legal & Ethical
Workplace Issues

There is little support for financial No accessible platform provides guidance on handling workplace harassment, discrimination, or wage theft.-setting.

Resume & Interview Struggles

Many youth lack the experience or mentorship needed to craft strong applications.

——————————— Solution ———————————


CareerShield


CareerShield is an all-in-one job application platform designed to:


Provide job listings

tailored to young job seekers.

Educate users

on workplace rights and safety.

Offer legal support

via an AI-powered chatbot.

Host career workshops

for skill-building.


This ensures that youth can confidently enter the workforce with the necessary knowledge and support.

Design Process


1️⃣ User Research & Wireframing

  • Conducted research on workplace challenges faced by youth.

  • Designed low-fidelity wireframes to structure key platform features.

  • Created a high-fidelity prototype in Figma, ensuring accessibility with an orange-themed UI for colourblind users and rounded UI elements for an intuitive experience.

2️⃣ Developing the Platform

  • Frontend: Built with React, HTML, CSS, and JavaScript in VSCode for a responsive interface.

  • AI Chatbot: Integrated GPT-3.5-turbo to answer workplace-related legal and ethical questions.

  • Job Application Portal: Implemented a job-matching system based on user interests and past experiences.

  • Resource Hub & Workshops: Curated a collection of career resources and interactive learning sessions.

Establishing our colour palette and font. What we kept in mind:

  • Accessibility: The colour palette was suitable for those with colour blindness.

  • Making sure that the font was easy to read.

Examples of our low-fidelity sketches:

———————— Interactive Prototype ————————