I led the whole UX and UI design process of the responsive web application and worked alongside with software engineers, product owners and a project manager. The free open source application is being built now and you can check the current progress here.

Previously, managing the PuPPy mentoring program has been a time-consuming and low-tech task. It involved manually reading through Google Forms, updating Google Sheets and sending numerous emails. The tedious work has contributed to the high turnover rate of volunteers and it has become burdensome for veterans to keep training new volunteers about the system.

The program owner sought help to build a responsive web application that streamlines the administrative tasks in hopes to alleviate the workload. The open source project strives to become a tool which any tech community can use to start and manage their mentorship programs.

The high level goals were to:

1. Create an open source platform to help organizations to facilitate and start their mentorship programs effectively.
2. Grow a community dedicated to helping early-career software developers overcome the challenges of starting their new professions.

After gathering insights from stakeholders, I began to analyze the UI patterns and mentor matching process solutions from competitors. From the research, I learnt that there are two common ways mentors and mentees are matched.

The most popular method, which is also PuPPy’s pre-existing method, is assignment. This experience is to do the heavy lifting on behalf of the mentees; volunteers manually sort through mentee’s applications and assigned mentors based on their preferences, skill sets and characteristics.

The second method is self-selection where mentees can browse and dive into mentor’s profiles, request to match with the people based on their needs. The new application will adopt this method, where we assert control back to the users on the mentor selection process thus minimizing administrative loads of volunteers

Administrator roles will change from primary to ancillary. They will provide suggestions if mentees struggle to seek the appropriate match. And with the new structure, they will focus on overseeing the overall program operations and act as mediators to resolve conflicts between mentors and mentors when they arise.

Based on the insights and findings I got from competitive analysis, I created personas to cover the three main audience groups that will use the application.

Based on the insights I gathered from the product owner and market research, I proceeded to lay out the information architecture and user flow to cover the primary use cases. The application will be introduced and used in PuPPy meetings, hence the design utilized a mobile-first approach that lets participants to sign up via mobile and allows me focus on the necessary contents and elements on the page.

Iterations and explorations details

Mentor Scarcity

Mentors are a scarce resource and individuals who have agreed to be mentors have a strong commitment to the process. Throughout the mentorship, mentors and mentees are given the discretion to decide on the mentorship arrangements and meetings. While no specific rules are in place, mentors and mentees are encouraged to meet on a regular basis. We want to avoid situations where mentors become an idle resource. Every mentorship will naturally taper off over time - but not end. One thing we have to design for is to adequately identify mentees who are not actively meeting their mentors so the system will be updated and the mentor’s valuable time can be reallocated so more mentees can benefit from their knowledge in the community. And to do so, we need to design to enable mentees to notify the program when their mentorship has stagnated.
‍
Though this might sound like an easy step, the are a few potential roadblocks: 1) Feature discovery 2) Incentives for mentees to use the feature.

Initially, the team decided to reuse the “Discontinue Pairing button” for the purpose of enabling mentees to notify PuPPy that the mentorship has be paused. But after some debates, I recognized that it is important to distinguish and break down the inactive mentorship notification functionalities into a more discrete non-overlapping functions with the discontinue button.

The reasons for the decision is unlike the discontinuing pairing function, which is usually used in early stage of paring: when a mismatch is discovered by the mentor, the mentee, or both and volunteers. Once clicked, administrators will be notified and step in to mediate and resolve the conflict at hand and help mentees to seek for a new suited mentor. In addition to that, the verbiage “Discontinuing pairing” might discourage and deter mentees from using the feature when they have amicable relationships with their mentors. To overcome these roadblocks, I designed the pausing mentionship feature that allows mentees to inform PuPPy that their mentorship is inactive.
‍

With the increasing number of participants joining the program in the foreseeable future, there are three design questions that helped shape my design strategy.

1. One of the constraints of the program is that there are far more mentees than mentors. If a mentee is no longer meeting up with his or her mentor on a regular basis, we would like the mentee to notify the program so that the mentor can be freed to mentor a new mentee.
2. The new mentoring pairing model will depend heavily on mentee self-selection; how much of a mentor’s information should we display on the online profile before a pairing is made?
3. How to create a smooth notification process for users when there is a mismatch?

After some brainstorming and research, I proposed four key feature ideas: Hassle-free reassignment, Mentorship Pause, periodic status check-in and progressive personal information disclosure to better streamline the overall administrative process and protect the privacy of mentors. Central to the features were these key ideas:

The PuPPy matching process will focus on self-selection. It raised the question on how much information to display when mentee is browsing through mentor’s profiles. The application takes privacy very seriously . Before the match, only mentor’s usernames, expertise, introduction are displayed. It does not release the mentor’s full name, slack handler, e-mail information until mentors accept the match request.

Intended to be modern and distraction-free, the style of design places emphasis on important information such as call-to-actions, and contact information.

By the end of phase one of the Hackathon, we completed the core functionality of the product and delivered a presentation to share the prototype with the community.

During the application presentation, we highlighted the major features and presented the vision we have for the application. The project owner was happy with the design and reception of the project is positive. The demo also served the purpose to persuade developers to support its vision and cause.

It was incredibly meaningful and rewarding to design an open source solution that helps the tech community to implement and scale their mentorship programs. This project is especially close to my heart because I graduated from a coding bootcamp several years ago. I remember vividly the frustration and nerves I experienced when I was starting out in the tech industry. And it was the formal and informal mentoring I received from the community that has enriched me on a personal and professional level that help me along the way.

This project gave me the opportunity to not only touch upon some basic user research and I was able to take the project from an early prototyping stage, giving me a chance to not only work in a group setting, but also the whole design process. Designing for PuPPy mentorship was a successful project in more ways than just a completed mobile experience. It allowed me to be part of the effort that helps foster mentorship in the community and provide a means for me to express my gratitude on the embarrassing amount of free pizzas 🍕  I have had in their meetings.