CareerShield

Sign In Page
Job Rating Page
Job Description Page
Legal Chatbot Page
Create an Account pt 1 page
Create an Account pt 2 page
Create an Account pt 3 page
Workshop page
Search homepage
Resource page

Inspiration

As university students who have gone through the experiences of working subpar part-time jobs, struggling to find a career we feel passionate about, and getting exploited in the workplace, we found that a cohesive, multi-functional website that could address, educate, and solve these problems would alleviate a majority of our workplace-related stresses. While we found resources related to these on the web and through services, there isn’t a platform that aims to deeply address this ever-increasing problem among the youth – especially about their workplace experiences. Having experienced it ourselves, we discovered that many youths struggle to know their expectations when going into their first job and can get easily exploited and harassed without even realizing it. Therefore, we aim to prevent the prevalent occurrence of youth exploitation when they begin transitioning into the workforce.

What it does

CareerShield functions as a job application portal oriented toward the youth, but what makes it stand out is the features of the application process as well as the multi-functionality of the website.

After signing up on the website, the job application feature will feed the users jobs related to their current interests (customer service, internship, etc). When the user applies to companies on the website, it will give them metrics about the company such as workplace culture, leadership, long-term stability, and discrimination and harassment. Not only does this give users a sense of what to expect from the workplace, but it also incentivizes companies to hold higher workplace standards to receive more applicants.

We also have a resources feature where users can access videos, documents, and blog posts regarding career-specific (information about a specific career) and general workplace (exploitation, legal rights) topics. They can save important posts and refer to them later.

Our workshop page allows users to find interactive workshops in their local area about a whole array of career topics. In these workshops, users can learn about the journey to finding a career tailored toward them while ensuring a safe and smooth transition. Getting a job or internship is challenging for the youth especially those who are just beginning in new schools (eg. first-year university students). Our workshops provide these individuals opportunities to get used to a work setting so that the transition into a job is not as steep and challenging.

Our legal chatbot feature allows users to ask an AI chatbot about any workplace or career-related inquiries they might have – it’s quick, accessible, and comprehensive. As newcomers to jobs, we often feel like we have no authority and therefore, we agree and do whatever is required of us by those higher up. This chatbot feature educates users on their rights to their jobs and internships so that they are aware of when they are getting exploited or unjustly treated.

How we built it

We made a low-fidelity wireframe to sketch out all the essential features needed in CareerShield, helping us visualize how we wanted our website to look and function. In the low-fidelity wireframe, we focused on having the interface layout be more minimal because of the complexity and multi-functionality of our website. We also considered how our demographic would be the youth, so we went for an easy-to-follow website that doesn’t have any overly complicated features. Using our low-fidelity wireframe as a base concept, we were able to proceed to Figma to create a reactive prototype. When creating our high-fidelity wireframe, we considered different colour palettes which would be both visually appealing and accessible for everyone. We identified that red-green colour blindness is the most common type of blindness, therefore we proceeded with an orange colour scheme which is the most colour-blind-friendly. We chose our general layout to have rounded components (buttons, fonts, shapes) as that invites the user to a more visually friendly and accessible website.

The last step was turning the design into an interactive website using React in VSCode. We utilized css, html, javascript, and OpenAI API – gpt-3.5-turbo to make it fully interactive for the user - we only chose to code for the most interactive features – the sign-in portal, job application page, workshops page, and the legal chatbot page.

Challenges we ran into

It was our first time doing a hackathon so we often encountered features that we were not familiar with. It was quite challenging for us to create an in-depth plan of how we wanted to proceed with our initial idea. For example, ensuring that we had all the necessary features required by users when seeking assistance, and making sure that all our website components were functional and responsive. Coding out the website was also a difficult process that required new skillsets we had to equip.

We also had to think outside the box on how to address our problem from different angles. Yes, having resources regarding exploitation may help them transition to their first job better, but is that all we can help with? That is when we thought up the idea of interactive workshops that could address these questions where users would gain real-world experience. As students ourselves, we thought of what we would want to see more of and workshops were something that we felt were lacking. Then, we went through the struggles of how we would make this all into one project, but wireframing our ideas helped put everything into place, where we could visually organize our thoughts.

Accomplishments that we're proud of

We think our multifaceted approach makes the way we address our problem very comprehensive, interactive, and unique. We approached our problem with many ideas at first – the first was providing the user with a list of resources regarding workplace exploitation. Then, we thought of the idea of a youth-oriented job application portal. We considered many ideas and chose to put them all into an organized and logical website. I think we communicated our ideas to each other well and were able to visualize our ideas in a practical and pleasing way. For example, the rating metric feature we added for the job application takes into consideration many things the youth may not, such as the benefits the job offers, as well as how strong their mentoring programs may be.

There are certain interactive features that we managed to implement that we are particularly proud of. Firstly, coding for the carousel took a lot of research and time to do, but implementing an AI chatbot is something we think of as an accomplishment. I believe we followed through on our ambitions and were able to fully demonstrate everything we had gained from this hackathon while practically addressing our topic with them.

What we learned

This being our first hackathon, we learned the entire process of turning a solution to a problem into a practical and accessible project. Firstly, this hackathon allowed us to develop problem-solving skills - approaching challenges with creativity and innovation. When we encountered many challenges and problems, we had to learn how to use these failures and approach new challenges with a better mindset. Additionally, usually when working on designs and code, we tend to do it individually, therefore working in a team during this hackathon taught us how to foster collaboration and leverage diverse skill sets.

What's next for CareerShield

We hope to be able to expand CareerShield and turn it into an app so that it will be more accessible and convenient to everyone. There would be a lot of logistics behind getting organizations and companies involved in our platform, but it would be beneficial to both parties.

Another focus of ours would be to implement more proactive strategies for CareerShield so that we ensure all users and youth do not experience workplace exploitation. While we like the idea of our rating system, it is a reactive strategy that requires users to have negative experiences. Those negative reviews will then push users to avoid these companies or positions. To avoid the initial negative review we implement strategies such as having companies associated with our website send information like work hours, pictures of work environments, as well as other indicators of workplace safety for youth. We would also consider having current or past employees of these companies give anonymous ratings to avoid bias. Another feature would be getting these companies to write a clear code of conduct including outlining expected behaviour, rights, etc… As our app gains steam and momentum we hope that we can use data analytics and monitoring to identify patterns and trends indicating potential workplace exploitation so that we can proactively address them.

Currently, our app focuses on a multitude of strategies and methods to prevent or minimize the chance of exploitation. We implemented our legal chatbot so that if an unfortunate circumstance happens, they would be able to get resources like lawyers which would provide the necessary help and protection. Adding other forms of protection and help such as therapists could be beneficial for our users.

While we are still a business, our focus is on maximizing the social impact and benefits for the youth. Therefore, we are not currently focused on a price model or commercial potential. That could be explored further down the line.