Google UX design Plus Mentorship

Project type

Google UX design course project (Responsive website)

sds Role

Product designer

Tool & method

User Interview Wireframing diagram Usability Studies Figma

Duration

2 months

OVERVIEW

Product Preview

Background

Before conducting the user interviews, I prepared a set of common questions for both potential mentees (students) and mentors (graduates). Following the interviews, I analyzed the responses and considered how the mentor-mentee relationship could be complementary in meeting their needs.

Students, potential mentees

Graduates, potential mentors

After conducting user interviews, I summarized and analyzed the interview contents of both the mentor and mentee groups. By grouping similar needs into the same theme group and separating them, I was able to define the needs of each group into three main categories.

Feature Requirements

I also categorized the essential features required by the users into three main categories, which are crucial for designing the website.

For mentees

Problem
Statement

DEFINE

"As a current student of the Google UX Design course,

The Google UX design course provided by Coursera has been well rated by many students for the reasonable price and quality lectures. However, many students have difficulties finding a job and networking even after achieving a certificate of the course.

RESEARCH

User Study

  1. Want to contribute to the UX design community and help others learn and grow.

  2. Want to network with other UX designers to exchange ideas and experiences.

  3. want to share their career story as UX designer to inspire and motivate others in the field.

Mentees

Review

Mentees would like to read session reviews written by other mentees.

Ideation &
Solution

IDEATE

USABILITY TEST

An unmoderated usability test was conducted with three participants to evaluate the booking flow from search to session booking, as well as how users interact with the graduate talk page.

“It would be great if I could easily find the most popular and most viewed graduate talk video.”

“I would really appreciate a chat feature with the mentor before booking a session.”

I also created a main user flow to understand better their core experience. It allowed me to understand how both side can be interacting each other to achieve their goal.

“I would like to have a mentor available ASAP.”

"I am always curious about how graduates landed their first job after completing the course."

"I want to give back to the community where I used to study."

"I can easily empathize with students and understand their worries and frustrations."

2. Choose a mentor

3. Book a session

4. Confirm the booking

Color

Typography

  1. want to easily book a mentoring session.

  2. want to be able to see a mentor's availability and well-organized profile.

  3. want to hearing about graduate’s career stories after completing the course.

"It would be very helpful if a mentor could review my portfolio."

"As this is an online course, I have not had the opportunity to get to know anyone."

"I understand how difficult it can be to find your first job after completing the course."

"I feel a sense of fulfillment by helping others."

“I want to network with other Students and graduates”

"I want to help prevent students from making the same mistakes I did.”

Mentors

Mentor’s availability

Language

Mentees want to be able to easily book a mentoring session with simple and straightforward steps. They would like to search for a mentor with ease and then view the mentor's organized profile, which includes their availability.

Mentees want to know the availability of a mentor for a session as soon as possible.

Mentees would like a language filter option when selecting a mentor.

Graduate Talk page is where graduates can upload short videos discussing their career stories as UX designers, along with any advice or skills they would like to share with current students.

Easy booking steps

Creating a framework

Graduate talk

DESISGN INTERATION

“I didn't quite understand what "90 min" means.”

“what does it mean when it says "available"? Would it be helpful to add the soonest available date?”

“It would also be helpful to see the mentor's profile below their graduate talk video.”

For mentors

To book a mentoring session

To share a career story

Search a mentor in desktop web

Become a mentor in desktop web

Final Solution

Easy search to find a mentor

Search bar :

I put the search bar at the center of homepage as it is the most important tool to find a mentor. Users can easily type anything that they want to search.

Dropdowns options :

Users can choose a mentoring topic and country & language options from dropdowns.

Popular topic :

Below the search bar, I also listed the most popular mentoring topics found through user research so that user can choose them immediately.

For mentee

Next session date :

I found from user research that mentor's next session available date is very important when mentee chooses a mentor. Therefore, mentor's next session date is highlighted on their profile.

Earliest session toggle :

I put this toggle feature in so that users can easily see a list of mentors available for the earliest session.

Concise profile card :

Users can easily see where mentor works for, their expertise topics and if there are reviews or not.

key design #3

Book a session easily

Detailed mentor’s profile :

User can see more detailed mentor’s information here like Linkedin link and more specified work experience, etc.

Send a message :

Users can send a message to mentor before the booking.

Highlighted booking box :

User easily can see mentor's available date and time to book a session on their profile page.

For mentee

key design #4

Become a mentor

Why become a mentor :

It encourages graduates to become mentors by explaining the good reasons to become mentors.

Other mentor's mentorship experiences :

By introducing mentors with a lot of mentorship experience and sharing their mentoring experiences, I encourage them to become a member of the community.

Mentor benefits :

Mentor certification, opportunities to be selected for Top Graduate Talks, and networking with other mentors are explained, encouraging sign-up as a mentor.

For mentor

key design #5

Graduate talk

Top graduate talk :

By selecting three of the most popular graduate talks each month and placing them at the top of the page, users can easily identify the most popular talks.

Search bar :

User can use a search bar or select dropdowns options to find the talks that they want.

Book a session :

If a user wants to do mentoring with a mentor who took a video of the graduate talk, they can click the profile picture below the video to go to the mentor's profile page and book a mentoring session.

For mentor

how can I design a mentorship website where students and graduates can learn and grow together?"

1. search a mentor

“I want to learn how mentors improve their UI skills.

"I am unsure how to identify the root cause after conducting user research."

Find a mentor available ASAP

key design #1

For mentee

key design #2

Visual Design

Reflextion

REFLEXTION & NEXT STPES

As a student of Coursera Google UX design course, I felt the need for a mentor throughout the course, so I could empathize with the users' perspective a lot. Through user research, I found that current students (mentees) were much more in need of mentoring than graduates (mentors). Therefore, when designing the website, I focused on how to appeal to graduates to participate in mentoring experiences. For current students (mentees), I focused on making it easier for them to book mentoring sessions.

During the design process, I also had some concerns such as:

  • Does the design align with Coursera's commercial objectives?

  • How can I design in a way that encourages graduates to participate more in the Graduate Talk? "

Next Steps

Product features

  • Add videos of actual mentors sharing their mentoring experiences on the 'Become a mentor' page.

  • Design the Q&A page where users can find the most frequently asked questions and they can ask their own questions.

  • Make a mentees' profile page in more detail.

  • Design the process of accepting or rejecting a mentoring request for a mentor

Design

  • Change the color of the booking button from green to blue For a consistency.

  • Redesign the mentor's profile card to

  • Improve the website design for the mobile version