Student Career Case Study
This is my capstone project that I worked and completed at Brainstation throughout the 12 week bootcamp.
I researched and designed a high-fidelity prototype around the idea of generating possible career paths based on their skills, preferences and qualifications for students that are not confident and lost in their future.
Throughout this case study, I will showcase my UX Design Process, from research to designing!
Role : UX Designer
Timeline: 4 Months
Platform: IOS Mobile
Tools: Figma, Google Slides, Invision, Google Docs, Dribble, Unsplashed
Students are not confident with their career choices with lack of guidance/counseling to support their career decisions.
Primary Research (Interviews)
Sketching & Wireframing
Double Diamond Approach
I used the double diamond approach for this project
Nearly 51% of students are not confident with their career path choices. Students underutilize career services due to the lack of quality in the support they are offered. As a result, students become very lost with their career direction.
Of student met with career counselor once times in their schooling
Of students don't know what they really want to do
Of students are not confident in their career path.
49% of post graduates have made significant career transformations!
In 2022, about 50% of Americans are planning to make career changes from Covid related reasons.
I conducted 5 interviews over zoom/discord to gather more insight on the problem space.
Age (18-26 years old)
Student & Post Grads
Unsure About Future Careers
We collected the raw data, categorized and synthesized them by theme. Later we labelled each themes by paint points, motivations & behaviors.
Agree that they felt lost and confused after speaking with career support in high school.
Of participants also agreed that they would feel more confident about their careers if they had the proper support earlier on.
Lack of Guidance
Not enough clear and honest direction
Students have to manage school and life that career support is overlooked
Lack of Quality
Low quality career support and planning methods
Students want a way to plan their career
“Lack of Guidance”
There is a major lack of quality career support in high-school that causes students to be lost and confused about their career paths.
How Might We
How might we help students feel more certain about their chosen career paths and have confidence in their decisions to pursue them?
Meet Jennie Kim! She's is the user persona that I created to fully summarize all my key findings. This persona will help story tell the target user while exploring further into the problem space.
This is Jennies Journey map that shows the up and downs of her experience trying to apply for post-secondary education. There are pain points indentified and opportunities too.
I created 20-30 user stories to gain further insight in developing a possible digital solution. Afterwards, I began grouping each user stories into Epics. I focused on one main Epic that ties in with Jennie`s main pain points.
These stories will have the following structure:
"As a [user type], I want to [desired action] so that [benefit]"
Planning Career Path (Epic)
1. As a High School Student, I want to find out what I am passionate about so that I can be assured that I will be happy in the future.
2. As a High School Student, I want to be able to know what I am actually doing, so that I can feel comfortable and pursue a path that I have confidence in.
3. As a High School Student, I want to know if the path I'm taking is a secure route so that I can be reassured and safe in my future career choices.
4. As a High School Student, I want to know what courses are the right ones to take so that I can know if I am learning the right material and that it will help and enhance my knowledge of what I want do.
5. As a High School Student, I want to be able to plan out my career paths o that I can feel confident and assured about my future.
6. As a High School Student, I want to know what I can do if I want to switch career paths so that I can be confident and be reassured about switching to something I want to do.
7. As a High School Student, I want to know which career paths are future-proof so that I can be optimistic in making a strong confident decision.
8. As a High School Student, I want to know what career paths fit my skillset so that I can thrive in my future job.
9. As a High School Student, I want to know how to properly network and have a clear foundation and security when I am job searching.
10. As a High School Student, I want to be able to plan out all the possible different options are so that I can confidently change directions into something I want to do.
11. As a High School Student, I want to be able to have a roadmap of all possible career path options with my current education information included so that I can confidently manage my career decisions and paths.
Click here for full list of user stories
Focused Core Epic
“As a Highschool student, I want to be able to have a roadmap of all possible career path options with my current education information included, so that I can confidently manage my decisions.
Chosen Core Epic (Planning Career Path)
Focuses on the problem space of students not having confidence
Ties back in with the HMW and persona
Addresses what might be the main issue of the personas paint points, goals and motivations
Building a career path and consolidating all of the students records to show different paths. Those user stories link together that could bring a digital solution.
After defining and analyzing the main core epic, we will now devise a task flow. I assigned a user task for Jennie. I created a task flow to give a visual representation of how a possible digital solution can tackle Jennie`s pain points.
Chosen Epic : Planning Career Path
User Task : Generating a career path that fits user preferences
After defining a possible digital solution from a task flow, I began gathering UI inspiration from Pinterest, Dribble and many other sources. Here are some parts that I believed would benefit the user.
After gathering UI inspiration, I created some exploratory sketches and then created solution sketches that will help with the wireframing process in Figma.
I used the solution sketches to make a first iteration digital solution through wireframes in Figma. Here are some features shown of wireframes which are the login, homepage, the timeline, school info pages.
Click here to see full prototype
I conducted 2 rounds of usability tests with 5 users over Zoom/Discord.
After each round of tests, I would analyze the feedback and place them into a prioritization matrix.
Through this process I created 3 prototype iterations and identified major usability issues.
Here are some of the major issues identified throughout this entire process:
Click here to see the full Usability Testing Output Google Document
Final Greyscale Prototype
After applying the feedback from the usability tests, I have created my final grey-scale mid-fidelity prototype!
Click here to view Prototype!
I began focusing on adjectives that can help identify the brand image of my digital solution:
PathFinder - Chosen Name
Afterwards I began exploring other adjectives that speak to the mood and feeling of my brand. I created a moldboard based on those adjustives:
I began exploring different wordmarks through sketching and bringing different ideas into Figma. Here are some of the iteration I have chosen.
The wordmark will follow a Sans Serif Montserrat typeface style.
I chose this wordmark since it represents the entire concept of the digital solution and problem space. The broken parts of the word mark is a symbolism of students missing a few parts if their path to accomplish their goal.
Wordmark & Logo
The pencil logo was included in a wordmark iteration but I felt it made more sense as a logo. It brings a youthful but innovative mood towards the brand image.
Afterwards, I began the process of extracting color from my mood board and explored if they fit with the brand image.
Chosen Color Pallete
This color pallete spoke most true to the brand identity. It feels fresh, young, confident and empowering. These are 2 photos from my mood board that really stood out to me that made the most sense with their color combinations.
This is the color breakdown for the color injection process.
We have our final high-fidelity prototype after injecting color, wordmark and branding!
Responsive Marketing Website
I further explored the idea of creating a responsive marketing website for desktop and mobile. I wanted to showcase the different features and components from a business and marketing perspective for users. This is another way of interacting with users through a website.
I wanted to explore other platformts that PathFinder can used by users as it is only available on mobile. I have considered desktop as many students will likely be on their desktop/PC. I also considered even a kiosks for students to use when they access career support services. It can act as a introduction of the app to students who wish to use an additional resource.
Filter & Onboarding
Students are able to filter their search based on preferences, skills, grades and even types of courses they taken. Their student information will be automatically uploaded so they have a better grasp on their direction.
Students and users are able to visualize and see their intended timeline and even update them based on preferences or changes to their student records. Users are able to track what they accomplished, whats their next step and see whats their end goal.
PathFinder is able to do all the research for you in the palm of your hand. Students will have access to all information they wish to see!
I learned that students will be more likely to gain more confidence and passion when they are given more career support earlier on. Students really need more realistic information about careers paths so that they will not feel regret or unsure about their decisions.
I discovered that I have to design and ideate with the intention that it will support the user with an actual underlying issue that is overlooked.
1. Create more flows in the digital solution. Include a notification panel that will inform users about in demand careers based on news.
Create more customization options with the student timeline.
2. Create a marketing campaign (conduct A/B testing)
Creating a campaign to test out the prototype and gain valuable insight and feedback from A/B testing.