The Campus Mentorship Program is an app/educational that helps
promote and build the student community within university institutions.

The Campus Mentorship Program is an app/educational course that I created that helps promote and build the student community within university institutions. With encouraging connections and improving the overall educational experience with a successful mentoring system exchanging knowledge and future opportunities.

Tools - Sketch, Figma, Photoshop, Illustrator - Sketch, Figma, Photoshop, Illustrator

My Role - UX/UI Design, Product Designer, Design thinker

Type - UX/UI Design, Product Designer

Duration - Juanuary 2020 (7 day design challange)

Understanding the Target Audience

⛔️ The problem

“Your school wants to strengthen the community by encouraging experienced students to connect with new students and help them adjust to campus life. Design an experience that allows mentors and mentees to discover each other. Consider the needs of both mentors and mentees, including how someone may become a mentor and how to connect mentors to mentees.”

The Solution

To design a mobile application for experienced mentors and new student mentees to connect and find one another through their university institution to build a strong sense of community on campus as well as build bonds and network for the future.​

This will create a faster and more efficient way for students to connect anywhere at anytime and help new students to adjust to campus life with mentors enrolled in the same program.

 Process Work👇

Identifying the paint points

A pain-point that I came across when thinking about the apps functionality and usability was “How do I get mentors to sign up & use the app with there busy university schedules?” The solution to this problem would be to give back to the mentor for there time and efforts by “When a mentor signs up and has around 4-5 mentees completing 60+ hours throughout the full term, they will receive 3 added credits on their transcript”

Of course it would have to be approved by the university boards, admins and the program directors of the programs institutions*

Also, depending on the mentors programs, they can keep in touch with the department head or an assigned professor to monitor as well as approve the final results. Having been a fourth year student myself and through observational research, I can see that courses are very demanding and stressful at times and it could be hard to obtain these credits with some extra time to spare.

Small Case Studies

Bumble BFF - Thought swiping could be an interesting concept to finding a mentor. However, it would be more of a time waste to find a mentor if users are swiping endlessly to find a perfect match. 

Mentorchiq - I looked at how they worked on the flow of the software. Thought it was interesting and could draw inspiration from working components.

Together - I also looked at how they branded and how they created their product walking through the different user flows .

User Personas

Hey, I’m Jackson!

I am looking to be a mentor but I have such a busy schedule, being it is my last year of university. It is a very stressful time for me though I would be interested in mentoring if I had the room in my schedule. I need a certain amount of credits to graduate.

Hey, I’m Susan!

I am a first year engineering student at York University and I am having trouble adjusting to a new school environment. I don’t know where anything is or who the good professors are. I would love to have a guide or a mentor that is a student in my program that I can ask questions and advice too.

Low Fidelity Sketches

This is the start planing stage of the using the MoSCoW rules and crazy 8's to determine what must be included in the app as well as what should, could and want in the app to help prioritize our design process. 

These are just some rough sketches and low fidelity wireframing to plan our the flow of the application. As well as playing around with what pages need to be designed and what they would visually look like such as the home screen, profiles, messaging platforms, and potential nav bars. Something I also took into considerations is designing both experiences for the mentor and the mentee using the app.

Interaction Map


Mid/High- Fidelity     Renders

These are the wire frame that I designed and worked on in Sketch, for finer details I would work on Adobe Illustrator & Photoshop. Due to the time crunch, I jumped right into high fidelity's since i had a clear vision from my low fi's and discovery phase.

The Final Outcome

Seemless Onboarding Experiance
These are the splash and onboarding screens, I chose the overall colour pallet to be very simple, clean, and professional. Being that this is a “potential” university approved application. 

I split the experience into, one for the mentor and one for the mentee, so as they are going through the app they will be seeing similar but different content. Explaining why there are different is a different onboarding for each 

Easy Sign Up & Request Form for Mentors
This is the signup/request form that the mentors have to fill out before accessing the app. The idea around this was that anyone could sign up to be a mentor and do nothing and earn 3 credits which is obviously a pain point. 

However, my solution to this is that the mentor would have to fill out a request form that would be sent to the department head of the mentor’s program and would have to be approved first from the board based on there grades and response of why the want to me a mentor and what skills they have to share. 

Accurate Matching Quiz for Mentee's
his is the signup and quiz screens that the mentee would have to go through before accessing the app. I was thinking of many ways to approach this like having it be like the tinder or bumble way of browsing but I didn't see that to be too effective. 

So I thought based on the mentors qualifications, the mentee would fill out a short quiz and through the filtering algorithm of the app, it will pair the mentee with a suited and qualified mentor that suits their needs. I will also give the mentee other options of closer related mentor that they can choose from.

User Dashboard For Mentors and Mentee's
For the Mentor, they have the profile at the top as well as the hourly process to track if they get 60 hours or more, also it tracks the number of mentors that they are working with. It also has a “today at a glance” where it will track more recent appointments and meetings. Leaving only the important info first. 

For the Mentee, the only difference is that it is more focused on their mentor since they have one. So it states the collective hours spend with the mentor, who the mentor is, as well as “today at a glance” stating daily appointments if scheduled.

Profile Pages for both Mentors and Mentee's
This is the profile page for both the mentor and mentee. All have the information that was gather from the signup page as well as a bio and list of skills that they are good at or want to learn. 

Also, for the Mentor page, there is an option at the bottom to fill out a review on how working with the mentor was and you can apply a star rating. 

Making Scheduling and Tracking tasks Easy
This is the schedule & tasks page for both Mentors and Mentees. Both have a bi-weekly calendar schedule to show a visual of different appointments. The other half of the screen has most recept tasks and upcoming tasks keeping everything in order. 

For mentors they can see appointments and tasks form all their mentees, whereas the mentee only sees the appointments with their mentor.

All Your Notifications In One Place
As for the notifications, for the mentor there is more content where he can view missed calls or messages as well as any other mentees who have requested to be their mentor. 

For mentees, it will just have notification for their chosen mentor. 

Calling & Messaging Within
The messaging and calling screens are pretty simple when it comes to communicating to one another, I wanted it to be clean and fast to function. Most of the communications will be done through messaging and in person meetings but there is also a calling options as well for faster communications. 

The Navigation Bar
I have redesigned this navigations bar many times, but I think this final design is better than the others I have designed because I am thinking about two separate user scenarios. Therefore, I wanted the icons to be universal to both users because on a development side of things it would be very difficult to code and develop to different nav bars within one app and would be unnecessary. 

Accessibility Features
I was thinking of was to make the app more accessible for users so I thought of incorporating a little accessibility icon that can help those who are more visually impaired but having the text become bigger on the screen. As well as highlighting certain words or sentences to help users read better. Also, at the star of the application when the mentee is filling out their quiz, i inputted a question that asked if the mentor needs to know or had some knowledge of American sign language.

Style Guide /UI Kit

I chose the overall colour pallet to be very simple, clean, and professional. Being that this is a “potential” university approved application. Also, keeping an organized and clean platform will improve emotions of a busy student. 


Therefore, I believe this will be a great way to get busy student mentors to sign up and participate as well as making sure there will be enough mentors for ambitious mentees. 

This will also bond and build the student community, encouraging connections and improving the overall educational experience. Targeting emotion by lowering mental health and course anxiety for some mentors, relieving their stresses by spreading their knowledge and valuable experiences.

Index ↗

Next ->