YUROU ZENG

Violet Connect

VC is a student mentor matching service meant to help incoming freshman and transfers get use to life on campus. It's a personal project I'm proposing to Student Affairs at NYU that I think could be beneficial for the NYU community.

Role

Art Direction & Visual Design, User Research, User Testing

Tools

Figma

Identifying the Problem

Just last semester, I had participated in a small scale mentorship program within my major. There was an application process for the upperclassmen and if they were chosen, they were then matched with an incoming freshman with similar academic/career goals. While I considered my experience a decent success, I still had to deal with problems that had emerged. The experiences of the other mentor/mentee pairs were also more neutral than good, with many finding it hard to communicate and get across to their mentor or mentee.

So just what was it that makes these relationships difficult? I reached out to the participants of that mentorship program, as well as some of my peer, and from that research I identified three different areas where issues often arise.

  • Fit - There are many factors involved in establishing connection and trust between a mentor and mentee. An important one that was mentioned was finding a good "fit", creating a pair that's compatible and comfortable with one another, which didn't seem the case for many.
  • Retention - Communication between a mentor and mentee tend to be very active at the beginning but start to fizzle out as time passes. This could be due to "fit", or the natural awkwardness that arises when the two sides don't really know what to do next.
  • Community - When mentors and mentees only meet up privately and in isolation, they miss out on a lot of learning opportunities with the other mentors/mentees. One-on-one meetings might not be effective for certain mentees, we want to provide an environment that would work for more than one type of student.

Research

To start, I did a quick brainstorming session, jotting down what I understand of mentor and mentee relationships and what I wanted to investigate further. From there I did some research on existing "competitors" for mentor/mentee matching services. While the insights I got from seeing how other services worked and their features were very informative, I also need to understand that what our product offers is a bit different from the typical professional mentor/mentee relationship.

From that, I was able to write down a rough draft the process for how the app was going to work and its possible discovery/matching methods.

Solving the Problem

For now, I wanted to focus on the experience of discovering and establishing a match between a mentor and mentee.

The ultimate goal would be to pair up a mentee with a mentor that best suit their needs as well as be someone they'd get along with. The experienced student won't only be helping the new student academically, but also in the different areas of school life. So the more comfortable they are with one another, the better.

To achieve this, it's important for the app to offer a more personal touch in the selection process, to promote the relationship as mutually beneficial and not just a means to an end, and finally, to find a means of increasing community engagement to satisfy the school.

Sketching & Wireframing

With a general understanding of the skeleton of the system, I mocked up a user flow to visualize the process students would go through.

I want the app to integrate with a university's system in order to 1) ensure that all the users of the app are students to ensure security, and 2) allow information to be automatically imported for ease and accuracy.

A student would log in, authenticate through their university ID then be directed back to the app where they can setup their profile. The profile would be auto-filled in certain areas (i.e. school and year), and they would complete the rest. After that, prospective "mentees" (any user who has not applied and been approved as a mentor) can go to the Discover Mentor page. There they have the option of completing a questionnaire to get a list of recommended mentors, or browse through all possible mentors.

On the Mentors' side, the use of an external Google form will help administrators view and approve mentor applications without them needing to configure to the format and UI of the app itself.

I want to go in depth on two experiences (or rather, one continuous experience) within this app, one in the filtering and discovering of Mentors, and the other in how Mentors and Mentees connect and then are paired.

Filtering and Discovering Mentors

Upon registering for the app, students must immediately set up their profile. To prevent the onboarding process from lasting too long, the questionnaire that filters mentors for prospective mentees is postponed and shown as a banner only when they start to browse for mentors.

Once the student clicks to fill out the questionnaire, they are shown an initial screen that gives them the option to start or go back. I wanted to provide both options in case the banner was tapped on accident, the short text would give students an incentive to continue (showing the benefits of answering the questions) but also gives them a way out in case they are unable to fill it out at the moment.

The actual questionnaire will contain a progress bar on top and a counter on the bottom with the option of tabbing through the questions. The questions mainly pertain to the logistics of a mentor/mentee relationship, since questions regarding personality or interest is hard to assess in just a few multiple choice questions. It might ask for their level of commitment, preferred methods of contact and what they're looking for out of the mentorship.

Once done, there'll be a short "waiting" screen so that there's visual feedback that their questionnaire has affected the results of the mentor list. Another obvious feedback would be certain cards disappearing from the list and the rest moving up into empty spots.

Messaging and Matching Between Mentors and Mentees

While drafting the sketches, I decided on a mix of algorithmic matching and giving mentees a choice in what mentors they are matched with. The list of mentors are algorithmically filtered based on the questionnaire, and from there a mentee can message and start talking to prospective mentors. If they find someone they particularly like talking to, they can then choose to form a mentoring relationship with them.

A concern I had was that giving students the reigns in deciding whether or not to pair up could result in a low number of matches. However, mentors should be incentivized to pair up with their mentee on the app as they would continue to show up on the results page for other students otherwise.

Like I mentioned above, once a mentor and a mentee pair up, they are free to communicate however they like on or off the app. However, many of the other features of the app will no longer be available to them.

On the app, mentees have two resources in decided whether or not they will pair up with a mentor, through their profile and directly messaging them. I had considered adding much more to the profile page for mentors and mentees but I ultimately decided to keep it simple. A freely written bio will allow more of the students' personally to shine, and the profile is just a gateway to the messaging portion, a much better indicator of "fit".

High Fidelity UI

I used Open Doodle to incorporate illustrations in my design as I wanted a perky and fun tone to this application. The vibrant color scheme and slightly wide-set type will make this much more appealing to students and feel more social than professional.

Landing/Login Page

I kept it to two call-to-action buttons on the landing page, focusing on the two items most integral to the application.

Recommended Mentors

A short excerpt from a Mentor's about page should be enough to set the tone of the Mentor's personality. I wanted to keep the cards simple as to not distract a mentor with too many comparative factors.

Mentor Profile

I was inspired to add it last minute but I thought that listing in courses that a student is taking in the current/upcoming semester can be very telling of their interests as well as a great ice breaker.

The entire experience might resemble how a dating app functions, which is partly my inspiration for the application. Because the mentorship isn't directly defined as professional, I want to help establish a more personal level of connection between the mentor and mentee. The ability to chat with multiple possible mentors could also widen an incoming/new student's social circle, interacting with all walks of life and making more than just one friend!

Going Further

Accessibility

Since (in my mind) this is a university application, it's especially important for it to be accessibility compliant. On the baseline level, color contrast across the app should pass WCAG AA, text shouldn't be under 12px and ideally most should be 14px and larger.

In order to optimize VoiceOver, I've kept the design of the pages relatively linear, which will help it when the different selectable areas are tabbed over. I've also tried to keep a short and consistent list of Text Styles so that integrating VoiceOver isn't overcomplicated for the developer. Lastly, since there is iconography without labels in the app, it's important that alt-text is programmed in for VoiceOver.

After the Match

The application might be a valid solution for the first issue I found in mentorships, fit, but it doesn't go too far beyond that. There are two extra feature implementations that I think could assist with the other two points: retention and community.

A feature in the messaging portion that could guide conversation or give suggestions could be very helpful in very step of the mentorship. Either the two students are just connecting (ice breaker suggestions), or have already established a relationship.

During my interview with students with mentorship experience, many noted that they aren't sure what or how they could best help their mentees. I think this is a problem that arises when mentoring is done in isolation. Another possible feature would be community events hosted for mentors and mentees, discussions between mentors (or mentees) can help individual students perform better by getting opinions and advice from their peers while also fostering community.

Using Format