Doyenne

UX/UI Design

This case study provides an overview of my design process in creating an experience that enables women to easily find a mentor or mentee based on shared interests, location and availability.












About this case study


Brief: Mentoring can be a great way to share knowledge and help someone be successful in their personal or professional life. But many potential mentors are often too busy to commit to regular meetings, or they have a hard time connecting with people seeking help. Design an experience where prospective mentors and mentees can be matched, based on similar interests, location, and availability.




Problem Overview

At all stages of one's career, mentors play an important role. Unfortunately, for many people, finding a great mentor remains a challenge. Consider an entry-level engineer wanting to connect with STEM leaders, or a university student needing insight on a project. They use a subpar app that matches them with a few mentors. Since the app did not suggest mentors that meet their criteria, they soon find that their mentor matches are not providing them with value or knowledge.




Solution Overview

Doyenne is a mentorship app that gets to know both the mentor and mentee first, learning about their professional life, goals and interests. From there, Doyenne will match potential mentors and prospective mentees based on similar, personalized preferences and interests. The app’s focus will be on providing users with the knowledge, encouragement and advice they need to grow in their personal and professional lives.




Prototype of my solution (Video)








My Process

I approached the exercise in 5 parts (plus conclusions) following a user centered design process:









Research


1. Understand Task

I started this design exercise by brainstorming initial ideas in order to explore the topic of mentorship at a high level and to write down my early thoughts. With research being the first part of my design process, I wrote down an overview of my research process to determine my methodology, target participants and questions to ask. In addition, I thought of some early hypotheses and assumptions based on the prompt.









2. Statistics

It was critical to understand early on which groups of people are looking for mentors most and how much of an impact mentorship has on people. The following statistics confirm some of my initial hypotheses and assumptions, and also highlight the need for designers to start designing products and experiences that assist in connecting mentors and mentees in an easy and efficient way.





One of the most interesting discoveries is that women have a much tougher time connecting with mentors, especially in STEM industries. The following statistics communicate the need to empower women in STEM and provide them with mentorship and support.










3. Competitive Analysis

I kept my competitive analysis general and focused on features, functionality, main purpose, reviews and general usability. This allowed me to assess competition and identify areas where Doyenne can have a competitive advantage. I quickly found that there are few mobile apps for connecting with mentors. This provides Doyenne with an opportunity to set the standard for mentoring mobile apps, and will be one of my constraints for this design exercise. *At this stage I did not limit myself to strictly female mentorship platforms as I needed to validate and assess several of my assumptions and hypotheses.









4. Survey

Using data to support design decisions is an important part of my design process. Both qualitative and quantitative data is useful for understanding user goals, pain points and lifestyle in order to tailor the user experience. For this design exercise, I gathered both types of data to understand what is happening and why it is happening.









Define


1. Identifying the Problem

The research and data collection up to this point suggests that people not only have trouble finding a mentor or mentee, but also experience challenges being matched with a good mentor or mentee. This is problematic because having a mentor to provide advice, guidance and encouragement has been shown to produce personal and professional benefits.



Throughout my research I identified a pressing problem that will be the focus of my mentorship connection experience: approximately 50% of women leave their jobs in STEM fields early, often because they don’t have a mentor for guidance and advice.



Below is an overview of my main discoveries from the initial research phase:






Summarizing my research and findings, I wrote the following problem statement;









2. Solving the Problem

With these things in mind, I decided on the following mission:


Connect more women mentors and mentees in STEM fields.



The ultimate goal of my experience is to help females early in their careers connect with professionals in STEM fields. How this will be achieved:





Proposal










Constraints


Defining the scope of this project

To focus on what matters most and help guide my design decisions, I’ve listed out the following constraints for this project:








User Profiles - Meet Allie and Susan

After reviewing my research and setting constraints, I created two personas who exemplify my primary user types:





1. Allie Chen: a 23 year old junior software engineer looking for a female mentor.









2. Susan Johnson: a 23 year old junior software engineer looking for a female mentor.








The next part of this case study will primarily focus on Allie’s journey of connecting with a female mentor, Susan. I paid close attention to Allie’s actions, goals, feelings, experiences and how my solution addresses and eases her pain points.








Journey Map


Allie wants to find a mentor




Empathizing with Allie and understanding her previous experience in finding mentors is important to designing an experience that alleviates her pain points and helps her achieve her goals. The following is Allie’s journey and emotional experience through connecting with a mentor (Note: This is her current experience with existing sites and apps).











User Flow


Visualizing Allie using Doyenne

To visualize the user flow for Doyenne’s two primary types of users, I created two streamlined user flows that outline the primary journey when using Doyenne for both mentees and mentors:




Mentee






Mentor





To further visualize Allie’s movement through Doyenne, I also created a thorough user flow diagram that highlights Allie finding a mentor. This user flow should meet Allie’s needs and the overall needs/goals of the app.












Sketches


Putting thoughts to paper

At this point, I had a clear understanding of the features the app should contain, the actions Allie and Susan will take while using Doyenne, and how to best address and alleviate user pain points through design. I was able to start sketching the main user flow and several other ideas for various screens. My goal here was to visualize the user interface, user interactions and flow of the app.














Testing (Round 1)


Paper Prototype

After a few paper sketches, I had an initial design that I tested with 3 users by having them complete Allie’s primary user flow through a paper prototype. I focused on evaluating time on task, feature discovery and general feedback. After a few iterations I switched to creating wireframes in Sketch.














Wireframes













Testing (Round 2)


Wireframes

Once I had some basic wireframes created for the main user flows, I created an interactive prototype that was tested with 3 new users. I evaluated the same criteria as before and made some final adjustments before finalizing the app’s visual design.








Visual Design


Branding, Identity and Accessibility

Visual design often has the same amount of impact on the total experience as usability. Looking at Allie’s journey, my goal with my visual design choices is to engage Allie, draw her attention to the most important areas of each screen and easily allow her to complete tasks. I spent time on size, target areas, color, whitespace and hierarchy, in addition to performing A/B tests. The A/B tests were used to determine several layout and color decisions.



I used Material Theme throughout my app and I did not use any UI kits or templates for my final design. This is to showcase how Material Theme adapts to Doyenne’s brand and identity, while still maintaining set Material rules and specifications for icons, sizing, tap targets, hierarchy, interactions and overall usability.




1. Colors

I used white for the primary color to ensure copy is easy to read and important elements stand out. Purple is used as a secondary color to highlight important information to the user where it appears. To maintain distinction and consistency throughout the app, I used a deep navy blue color for buttons.










2. Typography

Doyenne uses Roboto and Helvetica Neue fonts for content, and Chapaza for the logo.










3. Components










4. Motion

Doyenne displays a quick animation on first launch to set a friendly and professional tone.





Splash Screen (Video)






Doyenne utilizes several transitions throughout the app, with attention given to maintaining focus and emphasized easing. Below is an example of a “parent child” transition when a user clicks on a card.





Parent Child Prototype (Video)







5. Accessibility

Part of making my app accessible is through color. All of Doyenne’s colors surpass W3C’s level AA requirement of a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. For users who are color blind and/or view this content in monochrome, links will have a caret at the end indicating a link (another solution is to have all links underlined by default). Here are some additional ways my app sets the bar high for accessible design:










Welcome to Doyenne







Doyenne is an app that matches mentors and mentees. The key differentiator is that mentors and mentees are suggested based on shared interests, location and availability. Personalized onboarding, customized profiles and the ability to verify one’s profile ensures that users find the best match possible.




About the name


Doyenne means “a woman who is the most respected or prominent person in a particular field.” This is a perfect fit because the name is feminine but strong, and represents the main goal of my app: Connect females with females who are leaders in their field.








First time user


Logging back into your account or signing up for a new one should be quick and simple. If you already have an account, I implemented a one click login (In the mockup below, the user would click “Continue as Sarah”).







Alternatively, I also designed a login screen that uses filled text fields. While more traditional in design and function, it does require additional user effort and can result in a pain point for some users.





Login (Video)







In Allie's scenario, she needs to create an account.











These questions relate back to our goal of matching mentors and mentees in STEM roles based on similar interests and location. Users can also be university students and answer “What is your occupation” by saying that they are a student.





Create Account Flow (Video)







I initially had users fill out the full set of onboarding questions while they were signing up for an account. Since more information from the user helps Doyenne provide more accurate matches, I thought this was a good idea. However, feedback from several usability tests revealed some use cases where a shorter upfront onboarding flow is best to reduce the friction of getting into the app.









The tradeoff to removing this from the sign up flow is that first time users will not be shown the most accurate matches when the app launches.









After Allie has created an account, she receives a view with an artificial loading skeleton screen. This is to increase the perceived value of the product and communicate to Allie that the app is working on providing her results.





Skeleton Screen (Video)










Primary User Flow


Mentee Requests a Mentor


The following prototype shows the end to end flow of a mentee searching for a mentor and a mentor reviewing and accepting the request.





Full End-to-End User Flow (Video)





The next part of this case study takes a look into my design decisions for each main page of the end-to-end user flow.








Bottom Navigation


I chose bottom navigation as the primary navigation for this app (secondary is the navigation drawer) because there are minimal top level views. I also chose bottom navigation when thinking about reach navigation and the various potential users of Doyenne. For example, some users might be commuters who can only use one hand, or someone with a physical disability where accessing the top half of their phone is challenging.









I designed and tested 6 versions of the bottom navigation bar, with each version displaying a different set of app destinations. After asking for direct user feedback on which pages are most important for quick access, the final version includes the following 4 views:




1. Matches



2. Explore



3. Messages



4. Profile




Each tab represents a different part in Allie’s journey towards matching with a mentor and engaging in meaningful conversations with them. Let's take a closer look at my design decisions for each section.








Matches ("The Homepage")


The matches screen initially focuses on Allie’s suggested mentors. I went through several rounds of iterations based on user feedback after a few tests to obtain the right balance between imagery and copy (see early designs below).









Mentors are listed in order of how much of a match they are to Allie. The final design for the matches page is displayed below. This is the first screen displayed after Allie creates an account and answers the initial questions.









If a user clicks on one or more mentor images, the card become selected, the top app bar transforms into a contextual action bar, and Allie has the ability to request, favorite or delete the selected mentors.





Select Multiple Cards (Video)





Allie can also swipe a card to favorite any mentor.





Swipe to Favorite (Video)






I have the maximum number of mentors shown on the homepage set to 5 for a lower cognitive load. If there are more than 5 suggested mentors, a “See All Mentors” button appears below the content. If a user continues scrolling down the homepage, they will see an “Explore Groups” section. Since building community is one of Doyenne’s goals, Allie can join several groups within the app to connect with other users.









Above the cards are filters. Allie can perform a horizontal scroll to reveal more filters, or tap the first filter icon to see a sheet displaying all filters. Once filters are applied, the homepage will update with new results. The thinking here is giving Allie easy access to filters so she can view and connect with the best mentors possible. This not only includes filtering by interests, but also incorporates location, availability, occupation, job title, ratings and more. The following mockup shows what the header looks like when a user vertically scrolls through the page









I also created a mockup for an alternative design for the top app bar on scroll (collapses to a short top app bar). An important thing to keep in mind with this design is that filters on this page are not always visible on scroll.









The following two videos show prototypes of filtering on the Matches page.





Filtering on the Homepage (Video)







Sort By filter (Video)





An additional way Allie can navigate the app is through a navigation drawer.









Lastly, Notifications is something that many apps overlook, though are very important to Allie’s experience with Doyenne.









Once Allie begins connecting with mentors, the matches page will display her (matched) mentors instead of suggested mentors, with a button below the list guiding her to the explore page.












Explore


The explore view is fairly simplified and focuses on discovery and filtering. While the Matches page provides curated matches that are a best fit for what Allie is looking for, the Explore page provides Allie with all mentors and groups who are using Doyenne.









I’m using a FAB for filtering on this page because it is the most suitable way to present the Explore page’s primary action. On the matches page, a maximum of 5 mentors and groups were displayed at the same time. Thus, filtering was not a primary action and did not need to be used as a FAB. Since there can be instances where hundreds of mentors and groups are displayed in one long scrollable list, filtering becomes the primary action as it reduces friction for Allie and helps with her pain point of discovering the best matches for her unique needs.






Filter Button - Updating Results Animation (Video)





Through my initial research, one question I asked my survey participants was “How important is it to find local mentors?” The feedback I received was that finding mentors nearby was not a primary need due to busy schedules and a hesitation to meet mentors in person without any prior contact. With this feedback, I included a near me icon in the prominent top app bar. If Allie clicks this icon, she is presented with a map that shows her location and the location of mentors nearby. Users can filter their results, search locations or mentors, change their location (if necessary) and easily view the profiles of local mentors.






Explore - Map View (Video)











Messages


Communication between mentors and mentees is central to the success of Doyenne and to the success of supporting and empowering Allie and other women. As mentioned, I tested 6 versions of the bottom navigation bar, with 2 that did not include messages as a primary destination in the app. In those 2 versions, I found that discovery of messages was an occurring pain point as I had it contained within Allie’s profile page.









Actions and functionality in the messages section of Doyenne were selected to ease some of the pain points Allie and others experience (Pain points include inability to share documents, no video calling, minimal filters and many steps to compose a new message). In addition to general chat based conversation that has speed and efficiency in mind, the ability to video call is provided if an in person meetup is not feasible. This still provides both mentors and mentees with the human element, and allows each other to pick up on body language and shifting emotions.

Further, if a mentor wants to schedule any type of communication with their mentee (for example, a coffee chat), they can access this option through the overflow icon in the top right corner. This scheduled event will appear in the chat.









Send an Invite (Video)











Profile


Arguably the most important section of Doyenne, the profile page is where I spent much of my time designing. For mentees like Allie, it allows her to learn more about potential mentors and provides all necessary information to allow for informed decisions on which mentors to request. For mentors, they are able to review a prospective mentee’s profile to learn about their interests and background. Just as mentees can request mentors, mentors are able to browse mentees and request to mentor them.




One of the challenges I faced was prioritizing information shown on profiles so users can quickly read through to decide whether the mentor or mentee is a good fit. The design of the profile page was determined through my competitive analysis and an activity I presented 5 potential users. To validate what information is most important on a profile page, I created a disassembled profile page and asked each potential user to assemble a profile page that would provide them with the most value.









Depending on when a mentor or mentee is using Doyenne (i.e. first time user, request sent, request pending, request accepted), profiles will appear slightly different. I will be focusing on Allie being a first time user browsing Susan Johnson’s (a mentor) profile. Subsequently, I will show what Allie’s profile page looks like to a mentor and the different variations of the profile page.








The Mentor Profile (Susan)




Mentor Profile Prototype (Video)







1. Images and Info









A concern some potential users raised to me during the research phase was profile and user authenticity. Since anyone with a valid email address can create an account, and the intended audience for Doyenne is females, verifying your account is a top priority. This will follow the user flow that apps like Bumble use. Once verified, a blue badge with a star is displayed beside their name.




2. Interests


Shared interests provides Allie insight into topics she and potential mentors have in common. When a mentor creates an account, they are also asked to select interests.









Future idea: I would have the chips on one’s profile be clickable and take users to the “Explore” page. Once here, the selected interest chips would appear along the top of the page, providing users another way to quickly find prospective matches through filtering.





3. About Me


This section allows users to add some personality and thoughtfulness into their profiles. Info here can include background, career experience, hobbies and more. It helps to differentiate users from other profiles and establish credibility and trust.








4. Location


Doyenne is a global app, and females who live anywhere in the world can create an account to connect with prospective mentors and mentees. Although, there are scenarios where local coffee chats and in person meetups are preferred.








5. Mentoring Style








6. Who am I looking for?


Mentors do not always want to mentor people who are unmotivated to learn and grow. This section allows them to explain exactly what they’re looking for in a potential mentee.








7. My Availability


By default, availability will not be displayed until a match is made. This is because it makes most sense to display availability to a mentee and mentor who are matched and will be communicating more frequently, in addition to some privacy concerns from a mentor's perspective.








8. Recommendations


Reading reviews from other mentees who have been mentored by Susan offers Allie real world examples of the positive impact and success of a potential mentorship.








9. Footer


The footer is central to profile pages as it remains fixed to the bottom on page load and while scrolling.








Time permitting, I would test multiple versions of the footer, in addition to testing a profile page that uses a traditional FAB for sending a request.



There are two primary reasons I chose this “sticky” functionality for the footer. First, as a user is scrolling through a profile, the main action for the page is always in view and within reach. Second, when considering accessibility, by having the FAB remain in focus the entire duration of a user scrolling through, users with screen readers can access this action at any time without needing to scroll to the very bottom or top of a long page.








The Mentee Profile (Allie)


A mentee’s profile appears fairly similar to a mentor’s profile, with some differences that I’ve highlighted below.




1. Profile Progress


To reduce friction of getting into the app, I decided to keep verifying your account and the full questionnaire until after you have created an account. This will appear as a status bar at the top of a mentee’s profile.




Profile Progress (Video)






Since the onus is on mentors to have their profiles fully completed sooner in their user journey with Doyenne, mentors will have these steps presented to them while creating their account, with the option to skip.




2. My Mentors & My Groups


Once Allie is connected with a mentor or joins a group, the homepage of the app will show her mentors and groups first, followed by an outlined button to explore other mentors and groups. Suggested mentors will now appear in the explore section of the app, with the highest matched mentors appearing at the top of the list.







One important thing to note with finding mentors and requesting them to mentor you is that a mentee can have multiple mentors at once. For example, if Allie wants mentoring on career progression, personal life, a project she can openly discuss, or about one of her hobbies, one mentor might be unable to provide expertise in all of those areas.




Future idea: An update to the UI is displaying more defined mentor categories on Allie’s profile and throughout the app. Being able to group mentors based on category and the type of mentorship they’re providing Allie would provide her with a better user experience.




3. My Learning Style


Learning styles will be provided to mentees. There will be no limit to how many someone can select.












Profile Page Variations


Depending on the part of the primary user flow a mentee or mentor is at, elements on profile pages will appear slightly different.











Group Page


With mentoring being kept to a mentor/mentee relationship, a feeling of community is often missing from a mentee’s experience in using mentorship websites and apps. A question I asked my survey participants was: “Would you consider joining a group that held discussions and events on topics you’re interested in?” All of my respondents answered yes, which led to the creation of group pages.




Group Page (Video)





Creating a group page is easy and they can be started in a few ways. If a mentor is mentoring many people on the same topic, that mentor might want to create a group page while still maintaining individual mentorships. Any mentee can create a group, and all Doyenne users would be able to join.







Group pages use the same layout as profile pages for consistency and ease of use by users, but contain several unique features. I’ve provided a brief overview of the 4 sections that differentiate group pages below.




1. Members




Future idea: With the ability to add friends, a new section will appear on one’s profile for friends. The above graphic would also have a “Friends” label beside each user who you’ve connected with.





2. Highlights


When someone creates a group, they will select these highlights from a provided list.








3. Events


Before Allie joins the group, the “Attend” buttons would be removed.








4. Discussions


Much like a conversation between mentors and mentees, group discussions can benefit people in many ways. Learning about other mentee’s experiences, having more casual conversations, getting opinions from more than just one person and receiving encouragement from a wide range of females reinforce community and female empowerment. Group chat becomes available once you’re a group member.








Measuring Success


If I had the opportunity to develop and release this application, these are the ways I would measure its success and the effectiveness of this proposed experience:











Conclusions


This case study has covered my approach to solving the problem of connecting mentors and mentees based on unique requirements. Early on, I identified a few problems that I focused on solving through an improved experience for mentees and mentors. These include current mentorship platforms having a poor overall user experience, lack of personalization, long and unclear sign up process and dated designs. My research also communicated a gender gap in STEM fields and a general difficulty for women finding a mentor and feeling encouraged in the workplace.



Doyenne solves these problems and many others in a number of ways. Initial onboarding gets to know the user, understands their interests and provides them with immediate mentor suggestions based on how well of a match they are to each other. Personalized profiles not only give a human element to Doyenne, but provide trust and authenticity. Including chat, video calling and community groups allows mentors and mentees to build relationships, stay connected and easily receive advice and tips from mentors and other members. Lastly, with a focus on females in STEM fields, Doyenne plays a role in empowering women and provides them with a space to seek advice when needed.




The following section provides insight into what I would change and some ways Doyenne can be improved in its future evolution.








General Changes/Updates to the App




1. Bottom Navigation

The initial needs of a user can change for several reasons. Once I had my high-fidelity mockups prototyped, I tested the final design with 3 of the original 6 testing participants. The overall consensus was that the app was easy to use, user friendly and accomplished the goal of providing females with mentorship opportunities.



One piece of feedback that stood out was that users wanted and were expecting the bottom navigation to contain different destinations. While this was tested early on in my design process, I’ve found that when a user interacts and sees a final product, their goals and user flow(s) become much clearer to them.








2. Load Screens

Keeping users informed that something is happening is important. Users might abandon an app if pages take too long to load with no indication that anything is happening. Loading animations will go a long way in keeping users engaged, and again, continue building trust with Doyenne.




Request Sent (Video)






3. College Students + Section for Projects


My solution is primarily focused around prospective mentees who are females early in their careers in STEM. My survey and research at the start of my case study communicated a need to include female college students in STEM as a primary user group. Something I would adjust is creating a more balanced UI that is equally centered around professionals and students. For students, a place to get tips and feedback on projects would be valuable, while still being able to receive advice on what it’s like entering the workforce.





4. More Inclusive


For the purposes of this case study, I narrowed the scope to design an experience for females in STEM. A future iteration of Doyenne would include a name change and the ability for a user of any gender and profession to be a member. This is best when considering growing this idea at scale and attracting the highest number of quality users possible.





5. Swipe Design








Design for Different Users


Not every user is going to use an app in the same way and for the same reasons. It’s important to consider these use cases ahead of time and throughout the design process. Below are some ideas for future iterations of Doyenne when considering all user types and cultures.









Multiple devices, not just mobile




1. Watch






2. Desktop








Building for Google Scale


There are several Google apps and products that can be included in a user’s experience with Doyenne: