Banner image of Ripple Music Festival

PrepEase

Project Type
UX/UI, Group
Duration
5 weeks
Program Used
Figma, PS, Miro
In a group of three, the goal of this project was to identify a HMW problem, choose a process within the user flow diagram and design a minimum of six screens that resolves the problem. My role was the leader of the group, making design decisions and dividing the tasks with other group members.

Background - How May We...?

As a collective of BCIT students who enrolled in the program seeking a career transition, we faced numerous challenges during our job-searching journey, leading to significant stress on our overall well-being. Recognizing this issue, my group have formulated the following problem statement:

The recurring situation where young adults are struggling to effectively manage their mental well-being as they navigate life post-graduation.


To in response to this issue, we came up with a HMW question to help us target the problem:

How might we support young adults in maintaining positive mental health during their transition from school to work?

Primary Research - Statistics and Card Sorting

Our primary research involved investigating the current mental health situation among young adults in Canada using platforms such as StatCan and the Canadian Mental Health Association. Additionally, we conducted a card sorting activity with our classmates, who are part of our target audience, to refine our research direction and questionnaire.

The card sorting activity revealed what the user needed

Some highlights of the research were:

  • 18.3% of Canadians older than 15 years diagnosed with a mental health disorder, less than half of which seeked professional help.
  • The prevalence of adults with a major depressive episode was highest among individuals aged 18-25 (18.6%).
  • Major depressive episodes over 12 months increased from 4.7% in 2012 to 7.6% in 2022

Secondary Research - Survey

We came up with a questionnaire separating those currently employed and students who are close to finishing their study.

  • Students -- The focus was to inquire about their mental health and their experiences during the job search phase as they approach the finish line, and understand their thoughts on the school's support resources.
  • Working -- The main goal was to assess how smoothly they transitioned from school to work and hear their thoughts on how well school resources support young adults in their preparation for the workforce. 

From sample size of 21 student responses, they

indicate that help and guidance from professionals is the most helpful support.

  • Experienced stress from imposter syndrome & competition and lack of information on their resumes and the industry itself.
  • Have mood-related issues and sleep-related issues.
  • Think that the level of support from school is quite low and not as accessible
  • generally open towards professional help and guidance. 

From sample size of 9 employee responses, they

believe that main issue with workplace transition is communication.

  •  consider workload is the major issue during the transition period, followed by work etiquette, culture,  and relationship.
  • consider that work-life balance is the key to positive mental health
  • believe that employers should offer some sort of mental health support for young adults to start their job. 
  • does not believe that the school’s resources are solving the problem.

Based on the results, we are convinced that establishing connections with professionals in both the job market and mental health can significantly aid students in navigating the transitional phase.

Persona

Our target audience was primarily the college students who were approaching graduation/graduated and facing the stress of seeking jobs. The same would also apply to individuals who are seeking career changes.

The persona of a college student that will use PrepEase

User Flow Diagram

Link to Miro Board

We designed the user flow diagram for the entire app, from the left side which is what the user can use before the log in, to the right side which shows what functions the user can access after they log in.

As for the process, we selected the mentorship connection process to build the screens on.

Lo-Fi Wireframes

The low fidelity wireframe of the first four stepsThe low-fidelity wireframes of the next four steps

The wireframe is designed using a 6-column grid system. Our focus is to establish a straightforward process with clean and simple UI and layout that new users would feel familiar & comfortable with.

Style Guide

The style guide of PrepEase

The chosen primary color conveys a blend of care and professionalism, aiming to establish a safe environment for users to openly share their questions and confusion, getting the support they need.

The combination of typefaces is selected for its slightly shorter x-height and wider width, intending to convey openness and ensure optimal legibility.

Hi-Fi Wireframes

The high-fidelity wireframe of the first four stepsThe high fidelity wireframes of the next four steps

View the full project on Figma:

Link to Figma

We incorporated round-edge shapes and circles to convey a sense of openness and friendliness, while maintaining a professional aesthetic. The pink was used as the call-to-action colour to clearly highlight what is happening next.

What I've Learned

I find it challenging to get the proportion and scale right when creating wireframes from scratch, especially with headings that end up too large for the screen. I aim for a clear visual contrast between content sections, but sometimes it leads to these kind of issues. Similarly, I notice some buttons taking up too much space on certain screens. Working in groups is helpful for spotting and fixing these problems.

© 2024 Designed by an INFJ