Alex Young-Davies

User Experience Designer

Kevin Luong

User Experience Designer

Project Background

Margot Community is an online, inclusive network helping women and gender-marginalized individuals provide virtual 1 on 1 guidance to their peers. Their goal is to provide a mentorship platform for individuals who don’t always feel represented.

With the respect to searching for and booking a mentor, the Margot Community platform was disorganized and lacked the clarity, confidence, and support users were looking for. Text-heavy, visually bland mentor profiles discouraged users from engaging with mentor profiles, and those who did engage were left confused by conflicting form fields regarding the necessary financial commitment.

When users got as far as the actual booking form, they were presented with a form that "resembled more of a job application than a mentor booking form". This in combination with tedious information entry often resulted in abandoned forms.

Solution

To tackle these challenges, Kevin and I re-structured the mentor profile and redesigned the entire form-entry process, opting for simplicity and comfort throughout.

Profiles now focus more on mentor personality and package clear pricing information in an always accessible location that doesn't interrupt the flow of the profile content.

The booking form has now been broken down into a simple step-by-step guide that is friendly, supportive, and comprehensive for the user’s needs and goals. This allows the user to feel in control and confident about booking a personal mentor.

Duration

4 Weeks

Role

Research
Experience Design
Interface Design
Prototyping

Tools

Figma
Miro

Highlights

Profiles focused on personality

Previously, mentor profiles made cost and number of sessions the primary focus. Now the mentor profile focuses on communicating personality and a mentor's unique offering.

Before

After

Clear pricing all in one place

All relevant pricing information now lives is an expandable drawer at the bottom by of the screen. Extracting the pricing information out of the profile content ensures that the mentor’s personalized content isn’t interrupted.

Clear pricing all in one place

All relevant pricing information now lives in an expandable drawer at the bottom of the screen. Extracting the pricing information out of the profile flow ensures that the mentor’s personalized content isn’t interrupted.

Simplifying the whole process

To ensure users feel fully supported and in control when booking a mentor, the redesigned booking form is now a friendly step-by-step guide. With simplified screens to focus on the question at hand, information gathering can be more thorough while not overwhelming the user.

Bringing the experience to life

To bring more life and engagement to the experience, micro-interactions and transitions were integrated into the product. These help the experience feel more fluid and professional.

The Process

The challenge

Despite a plentiful catalogue of mentors and a fair amount of site traffic, Margot Community still struggled to convert users into active mentees. Thankfully, with the help of traffic-monitoring tools, Margot Community was able to pinpoint a few possible conversion barriers. What they found was a lot of profile bounce (quick departure after arrival) and booking forms being abandoned partially finished. This gave Kevin and I some great insight as to where our observations and research should begin.

Margot Community's desire was to have Kevin and I evaluate their current product experience, identify why users may be hesitant, and put together a solution that will make users more likely to book mentorships.

The goal of this project was to help potential mentees feel comfortable, confident, and supported while booking a mentorship session. Our aim was to improve user experiences throughout; from landing upon a mentor profile to completing the booking form.

Gathering observations & research

Personal observations

After learning about Margot Community's challenges, Kevin and I each went through the process of booking a mentor. With a first-person understanding, we each took note of points we felt were detractors to the experience.

Prospective user survey

To follow up on our personal findings, we put together a survey to better understand prospective Margot Community users. Our aim was to learn what prospective mentees look for when trying to connect with a mentor, and what would help them feel supported in getting this set up.

Question 1 of 9

Have you ever had an interest in being mentored?

Yes, I've thought about it

Yes, I've been mentored

No, never had or been mentored

Question 2 of 9

What did/would prompt you to engage with mentoring?

Short answer response

Question 3 of 9

What would you hope to get out of a discussion with a mentor?

Career advice

Personal advice

Guidance through something difficult

Inspirational

Other (Please specify __________ )

Question 4of 9

Would you prefer to have a brief introduction to a mentor before engaging with them more personally?

Yes

Question 5 of 9

What would you want to know about a mentor ahead of time?

Short answer response

Question 6 of 9

What about a mentor would make you likely to connect to them?

Long answer response

Question 7 of 9

Would you want your mentor to know more about you ahead of time?

Yes

Question 8 of 9

How would you prefer to book mentoring sessions?

Start with one session and see where it goes

Book multiple sessions upfront

Question 9 of 9

How would you prepare for a mentoring session?

Long answer response

Click to expand/collaspe full survey

Affinity mapping our responses

After collecting our survey responses, we used an affinity map to group thematically similar responses and see if we could identify trends in what past, present or future mentees are looking for.

Our themes shaped up as “What prompts people to find a mentor” (blue), “What helps people connect with a mentor” (green), "What people want to know about a mentorship ahead of time" (red), and "How individuals might prepare for a mentorship" (brown).

Key findings

Perhaps our most important piece of feedback was that connecting/committing to a mentor can be a very vulnerable process. This seems to hold true regardless of whether someone is finding a mentor for the first time or they've had many mentors in the past. As well, the actual monetary cost of mentorship went practically unmentioned in our responses for both past and potential users. While this doesn't mean price is not important, it definitely seems less crucial an aspect than we had anticipated it being.

Based on this, we believed that a refined mentor profile and a more thorough, engaging booking form would address some of the negative and confusing experiences.

Ideation & UI developement

For both the profile page and the booking form, we began with "improve vs add" mind maps. This forced us to see what could be improved first rather than just resort to new and shiny features.

Using these mind maps as a foundation, Kevin and I went away to generate some initial ideas and explore solutions via sketches and low-fidelity wireframes. After that, we discussed our ideas, iterated upon them, and finalized some concrete directions to develop in higher fidelity.

Mentor profile mind map (Improve vs Add)

Booking form mind map (Improve vs Add)

Early ideation via wireframe sketches

Rethinking the booking user flow

To improve the experience, we rebuilt the booking form in a way we felt reduced the cognitive load.

By breaking the process down into dedicated sections, we could be more thorough with each, while keeping screens simple, personal, and supportive of the user's needs.

Detailed user flow diagram

Below is the fully revamped user-flow diagram, indicating what users encounter at each stage of the booking process.

Greyscale wireframe development

Now that we had a well-defined user flow, we turned our earlier ideas and sketches into more developed greyscale wireframes. We also illustrated how users would move from screen to screen with arrows connecting up the flow.

Refining components and styling

Since Margot Community was open to improving the branding palette, we tackled this when we revamped all the user interface components and patterns needed for our high-fidelity prototype.

To improve the branding palette, Kevin and I took the existing colour values and tweaked and expanded them. Now Margot Community would have a flexible colour palette with enhanced contrast in the interest of accessibility.

High Fidelity Prototype

To move through this high-fidelity prototype of the booking process, please follow the steps below.

Book a single mentoring session for 14/10/2021 at 2:00 PM.
Select Google Meets as the video platform choice.
Add motivation for finding a mentor (tap the text box or "Unsure where to start?").
Select "Yes" for providing material to review.
Attach a file (tap drop zone) or paste a share link.
Select credit for the payment method and fill in (tap) the form.
Review & book your mentoring session.
Exit to the mentor profile once complete.