Violet Connect

ROLE Art Direction, Visual Design, User Research, User Testing

Violet Connect is a student mentor matching service meant to help incoming freshman and transfers get use to life on campus. The project began as research done out of personal interest, but was expanded upon when I decided to propose this app to the Student Affairs team at NYU. The project plan includes research, user flows, detailed app interactions and supporting high fidelity designs.

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?

  • Fit - Creating a mentor-mentee pair that's compatible and comfortable with one another.
  • Retention - Communication between a mentor and mentee tend to be very active at the beginning but start to fizzle out as time passes.
  • Community - One-on-one meetings might not be effective for certain pairs, 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.

Flow & Wireframes

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. After that, prospective "mentees" 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.

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.

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

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.

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.

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.

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! 

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.

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 with getting opinions and advice from their peers while also fostering community.

Accessibility

Before pitching this to the University, I had to make sure that at the very least, the design side is 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.

Post Proposal

Violet Network

My proposal was ultimately not taken on as a project for the Student Affairs team at NYU, and it was due to another service that was in development with a similar goal. The new service is an online community that help connect students and alumnus of the school, while mentorships did play a part in the new Violet Network, the project had already been well underway by the time I brought up my idea.

Despite the project not moving forward, I still learned a lot during the process. I was later tasked to assist to conduct user research for Violet Network, and the work I had done for this project definitely helped in the design decision making process.

Using Format