top of page

​Problem: Many high school students are anxious about making the wrong choice for their future, and are concerned that their college/university applications won't be strong enough.

Target Audience: Highschool students trying to identify a career path.

STUC -Highschool Mentor Program Website

Pain points:

  1. Not knowing what volunteer opportunities to pursue

  2. Anxiety about strength of applications

  3. Anxiety about choosing the wrong path

  4. Feeling overwhelmed

Empathize:

Persona image: Damian is a grade 10 student who wants to figure out his higher education choices and get some experience in order to build a strong application for the program he chooses. His parents are not in a position to help him and he is ambitious but overwhelmed.

This project was interesting because many of my students would come back and visit, and they would talk to me about how they did not know what they wanted to do. I interviewed a group of former students for my user research.

Students wanted the opportunity to:

  1. Explore careers

  2. Interview professionals

  3. Job shadow

  4. Be connected with       

  5. Volunteer/internship      opportunities

Insights:

Information Architecture image: Login, Register, Mentor Registration, Activity Log, My Profile

Insights informed the options - and IA was created to provide simplest format. In 'My Profile' students can select what they are looking for (interviews, internships, etc.). In 'Activity Log', they have a record of all their co-ops, volunteering, etc., which they can later use on their higher education applications.

My first paper wireframe homepage (top left image) had 2 columns of info to minimize scrolling. However it looked a little crowded so I tried other arrangements, and chose the design below. I also had a couple of iterations for the Activity Log.

Ideation:

Paper Wireframes.jpg

Moderated user testing (on students) revealed that users found the design intuitive, but felt the spacing on the homepage needed to be reduced so they would instantly notice the heading ‘Useful Sites’.

Wireframes &
Usability Testing:

Digital Wireframes image

This is a selection of screens, starting with the screens students would use, and the last two are screens that the mentors would use. The fourth frame is clickable screenshots of other websites that would be helpful for the students to visit (e.g., the Ontario Colleges and Universities websites; the Ontario Trades website; and the Canada Higher Education website). 

Mockups:

Users (teachers) felt that the Activity Log needed to be broken down into two types of activities per page, and that the color scheme needed to be more cheerful. Here are the final mockups.

Hi-Fi
Prototype & Usability Testing:

Tools: Adobe XD
Duration: 4 weeks

Role: End-to-end (researcher, writer, wireframes,  mockups and prototype in Adobe XD, usability testing)

 

Next Steps:

  1. Translation - based on regionally common languages

  2. Add illustrations created by students

  3. Outreach to potential mentors

  4. Development and testing once site is populated with mentors

bottom of page