← Go Back
Winter 2022 - 2023
Remote, Freelancing

Connecting and supporting women in STEM higher education by enhancing the mentor-mentee matching process.

10 minute reading time

Project Details

My Role
UI/UX Designer, Project Manager
Team
Myself, Annie Glasser, Rachel Chang, Tanuja Hadalagi
Duration
December 14 - Present
Tools
Figma, Notion, Adobe Creative Studio (Photoshop, Illustrator)

Overview

What is STEM Muse?
STEM Muse is a mentorship platform for women in STEM fields designed to meet mentees' needs - starting with letting mentees select their mentors. Through an optimized algorithm, mentees are matched with one of their top choices of mentors to guide them through their studies and career goals. Equipped with a mentor in a more advanced academic stage, flexible scheduling, and structured meetings, mentees have everything they need to grow in their field.

As a growing start-up with increasing members, STEM Muse needed a centralized online platform for new and existing mentees to match with mentors, manage meetings during the school year, and attract sponserships. Currently they are running the mentoring process through Google Sheets and needed an upgrade.

The Design Process

UX Research Plan

As a team, we performed user research, C&C Analysis, User Interviews, User flows, created Personas, Journey Mapping, Wireframes, and Low and High-fidelity prototypes for our clients. Fortunately, we were able to access a pool of UT Austin students to interview.

User Interviews

We interviewed a total of 30 participants over the course of a week. The interviewees consisted of mentors and mentees - faculty, PHD candidates, and undergraduate students from UT Austin.

The goal of the interviews was to better understand the past mentor-matching process and what the participant's grows and glows were for the program. We noticed the interviewees mentioned the same 3 statements during the interview:
"I would love to know more about my mentor outside of career coaching, to help build a personal relationship."
"I use google Calendar, and syncing events in one place makes it easier to plan since I can see everything."
"Having keywords on TYPES of mentoring about the mentor would make it easier to choose."

Interview Takeaways

From the interviews, we were able to synthesize the data and pinpointed key takeaways for mentor matching, mentee matching, and event scheduling.
‍

Mentor Matching

  • Wants a mentor in academia on a similar career path.
  • Would love to know more about the mentor other than professional information.
  • Keywords or tags about what kind of mentorship they can provide make choosing easier.

Mentee Matching

  • Receiving mentee information before the first meeting helps with preparation.
  • Meeting once a month is great for their schedules.
  • Feels like there is a lack of connection beyond academia.

Event Scheduling

  • Want reminders for upcoming events and meetings.
  • Being able to add events to my personal Google Calendar.
  • Communication preference is email, and Slack for conversations.

Creating Personas

Once we obtained enough valuable data from our interviews, we wanted to create two personas in order to properly showcase the Mentor and Mentee's wants, needs, and frustrations.

Below are the two personas we created:
For Mentor Michelle, some goals include learning personal and academic traits about their mentee, and the ability to sync upcoming events to her personal calendar. ​Because mentees select mentors, Mentor Michelle wouldn't need a feature to match. Instead, she only needs the ability to see information about her mentee in order to properly prep for their first meeting upon matching.
‍
Mentee Megan's goals are to find a mentor who has overlapping interests and works in a similar field, and has access to events that sync with her personal calendar.
‍

Competitive and Comparative Analysis

Following the interviews, we conducted a C&C Analysis in order to fully understand the current mentorship landscape and see which features should be implemented in order to enhance and support user goals.
Looking at this chart, one can see that STEM Muse currently did not possess a lot of features compared to it's competitors. However, it made sense because they did not have a website yet. But before we pick and choose which features to include in the final product, we must first identify the problem with the current state of the mentor-matching process.

Research Synthesis

With the data taken from user interviews and the C&C analysis, we were able to condense the information in order to prioritize focus areas and understand what the problem was and how to solve it.

Identifying the Problem

From the information gathered from our research, we created a problem statement:
Users need a better way to communicate and match with mentors because they currently miss important emails, are not fluent in the primary communication platform, struggle to keep track of events and dates, and are matching with mentors they aren’t fully compatible with in terms of reaching their professional goals.

MSCW Chart

After understanding what the current problem was, we decided to go back to the C&C Analysis to pick out features that would help us solve the problem.
In order to meet deadlines, we created the MSCW chart to prioritize features. We decided that Must Haves and Should Haves could be implemented for phase one delivery, and Could Haves and Won't Haves could be included in future delivery phases.
‍
Each feature in the Must Haves and Should Haves categories is derived from user insights - solving the mentor matching and event tracking problems with insightful navigation features.

The Solution

STEM Muse’s website will allow users to sign up as a mentor or a mentee. During sign-up, the user will be able to choose communication preferences and create their profile based on their goals and interests. Once logged in to their account, they will be able to access their dashboard which includes their own bio, information about their match, and a centralized calendar of events that syncs with their personal calendar. Ultimately, mentees will be able to view mentor bios and rank mentors within their portal.

The Design Process

Following the Solution Statement and finalizing our features, I created a user flow to act as a guide for the user when they sign up and explore the mentor-matching process.

After this, we started our design process.
(Click to enlarge)

Sketching

To generate as many creative solutions as possible, we ran a collaborative design studio where the four of us sketched out possible screen layouts and flows for the features we had prioritized with the user flow in mind. We prioritized the mentee profile since the program was designed for mentees.
(Click to enlarge)

Here are the key features we decided as a team to include and the reasoning behind it:
We wanted to make the Home Screen concise and showcase an efficient format - showing their mission, testimonials, and a variety of imagery. Ultimately, it provides all the necessary information for the user.
Something we learned as we conducted interviews was that users relied on Google Calendar to organize their daily lives - their classwork, extracurriculars, etc. Therefore, we thought it was imperative that STEM Muse's events was able to sync with their current calendar so they can see everything at once.
In the current algorithm, STEM Muse had their mentees rank their top 7 mentors on a Google Sheet. As one can imagine, when there's over 100 mentors to choose from, it could get overwhelming for the mentee.

Because of this, we decided to create a drag and drop method to help users be able to visualize their selection.

Wireframing Low-Fidelity Concepts

Once we agreed on the overall design of the website, we began wireframing.

Because our pages posessed multiple new interface designs, we met with the company's web developers and software engineers to confirm interfaces such as a drag function and Google Calendar sync was feasible.

Additionally, we implemented a creative incentive for users to be rewarded for attending events and logging meetings. That way, STEM Muse could use this data to improve their program and be able to obtain sponsors. Once users checked off tasks, a seed on the main dashboard would grow every time a task was completed. Our vision was setting mentors as watering cans and mentees as growing seeds.

Below are our sketches coming into fruition:
For our low-fidelity wireframes, we wanted to implement some of the colors our clients currently enjoy: navy blue and yellow.
Like the sketches, we wanted to give users the ability to add an event directly to their Calendar.

Additionally, in order to incentivize more members to attend events, we included a "Who's Attending" section so that they are able to see who's going to a certain event. If they see a lot of people attending or someone they know, members will be more likely to show up to an event.
When mentees scroll through mentor profiles, they are able to save it and go to this page here. From here, they are able to drag their favorite mentors to be their top 7.

Low-Fidelity Prototype

View here ✨

Usability Testing

Using our wireframes as a mid-fidelity prototype, we conducted 10 usability tests over Zoom. As I listened to users talk us through their thought processes while selecting a mentor, I gathered critical insights into where our prototypes needed to be improved and implemented the chances to make the product more efficient.

What I heard

Overall users were able to navigate through the prototype, however, there were some instances that I noticed prevented the prototype from being completely seamless.

Here is what we heard and what we changed:
"Buttons are a bit confusing."
Originally we had the buttons centered and noticed that users were clicking the back button instead of next to go to the next page.

In order to combat this, we separated the buttons (left and right of the page respectfully) and made the buttons different colors. The navy blue will be the primary button while the white with navy stroke will be secondary.

Additionally, we created a hover state for the mentee/mentor buttons and provided a stroke when clicked. We were informed that only 5% of users were "both" mentors and mentees and eliminated that as well since selecting one profile was more practical.
"What do I do now?"
We found that users paused upon entering the Dashboard and did not know what to do next. Therefore, I created an onboarding experience for users, educating new users on how to navigate through the pages.
"Oops, I accidentally deleted a mentor I actually want. How do I get them back?"
When ranking their top choices in mentors, some users accidentally clicked the "X" - deleting the profile. In hindsight, this would've been frustrating for the user because they had to sort through hundreds of mentors, only to accidentally delete the profile and go back to find it again.

To solve this, we created a separate section to the right. That way, they will always have access to their "Favorites" and even if they accidentally delete the profile in their Top 7, it'll be in their saved section.

Journey Map

To synthesize all of the usability testing we conducted, we created a journey map to illustrate the possible opportunities and how the users overall felt when using our prototype.
(Click to enlarge)

UI Refinement

Once we made changes to our prototype based on user testing, we conducted a second round of usability testing to eliminate further errors or factors that caused any confusion. When we were satisfied, we moved on to the high-fidelity prototype to refine and enhance each element for the final design.

Journey Map

I created a Component Library to keep us organized and keep the final website consistent. The color palette were given to us by our clients, and we added a couple of more colors to compliment it.
(Click to enlarge)

Final Designs

The gifs below exhibits the features I designed and presented to our clients. Each design was driven by research, user interviews/stories, usability testing, and the feedback we received.

Demos

Sign-up Process
When users enter the website, they have the option to sign-up with STEM Muse for the first time. They can either sign-up through Google/Microsoft, or through their email. The progress bar will indicate where they are in the sign-up process and they will be able to sign up either as a mentor or a mentee.
Onboarding
I created an onboarding to help users understand how to navigate through the website. Everything will be labelled, including the steps, to help guide first-time users.
Mentor Matching
Mentees will be able to explore pages of mentors and be able to "Favorite" the ones they intend on putting on their top 7. From the "Favorites" page, they can officially submit their ranking and wait for the results once the algorithm matches them.
Plant Growth!
In order to give users an incentive to log their meetings/events every month (per request from our clients), I created a plant that can grow. I created this illustration using Figma, Adobe Illustrator, and Photoshop.

High-Fidelity Prototype

View here ✨

Next Steps

Below are the next steps we presented to our clients so they have a clear, concise roadmap.

Reflections

My first clients! I've actually been to UT Austin and have friends who go there, so it was such an honor to work with the longhorns - hook 'em! Our clients were immensely kind and knew exactly what they wanted so working with them felt so easy. We would have weekly meetings with them to update them on our process. We knew it would be nearly impossible to completely satisfy them, but thankfully we were able to compromise on some parts and they loved the rest.

Interviewing UT Austin students was also a delight - despite their busy schedules they wanted to help out as much as they could because they loved STEM Muse so much. Witnessing the love and care the owners and users had for STEM Muse inspired me to work even harder so that I could produce a website that could reflect their love for this mentorship platform.
← Previous: Home
Next: Sero →
↑