A case study for improving the user experience of Margot Community, a mentoring platform for women and marginalized individuals.
Margot Community Case Study
What is this case study about?
This case study I had developed during the UX/UI bootcamp of Memorisely. During the bootcamp I had the opportunity to work with designers from all over the world and gained a lot of new knowledge in UX and UI.
The goal of the case study was to improve the user experience during the booking process at Margot Community. Margot Community is an online mentoring platform that supports women and marginalized people and brings them together in virtual 1-on-1s.
- User Research
- Product Strategy
- UX Design
- UI Design
- Prototyping
- Usability Testing
- FigJam
- Typeform
- Figma
- Maze
- 6 weeks
TL;DR
Problem
Margot Community is a great organisation committed to the success of women and marginalised individuals. The platform helps bringing mentors and mentees together and allows them to arrange 1-on-1s.
However, the current booking process on Margot Community’s website is very complicated and not user-friendly. Users have to fill out a very long booking form with a lot of information for each booking. Appointments with the mentor are made individually or through Margot Community, which requires a lot of back office work.
In order to reduce this workload and above all to simplify the process for the users, the platform is to be revised.
Hypothesis
A complicated booking process frightens users away. There is a risk that people who would like to have a mentor do not use Margot Community because it is too complicated or time-consuming.
If the booking process were simplified, Margot Community could become more attractive for interested people and more people could easily find and book a mentor with Margot Community.
Solution
The booking process is clearer, the price is immediately visible, date and time can be set immediately and before payment the user has a clear overview of their mentoring sessions.
Outcome
Through working on this case study I once more took a deep dive into the work as a UX/UI designer. I went through the whole design process from start to finish and gained a lot of valuable insights.
Prep work and goal setting
Questions and observations
In order to better understand Margot’s problem, I decided to start with questions and observations of my own. I always formulated them according to the pattern situation, action, problem/pain points for the user to make sure that I included the needs of the user and the business goals.
When booking a session with a mentor, users have to manually type in 3 dates/time and their timezone or add a calendly link, which causes uncertainty regarding the scheduling of appointments and is time-consuming for the user, so that they may cancel the booking process.
When booking a free phone consultation, users have to type in the name of the mentor, which causes extra work for the users and the risk of confusion, if the name is incorrectly spelled.
Assumptions
We believe that adding an option to select time and date for users who want to book a session will make the booking process simpler and more explicit for users and therefore it will result in higher mentor bookings. Additionally it would make it more time efficient for the Margot Community back office, because manual scheduling is omitted.
Research Goal
Identify the main difficulties that potential mentees face in scheduling time with a mentor and find out what it needs to make it an easier process for them.
UX research
Survey
In order to better understand Margot’s problem, I decided to start with questions and observations of my own. I always formulated them according to the pattern situation, action, problem/pain points for the user to make sure that I included the needs of the user and the business goals.
Synthesis
In total I gathered 21 anonymous answers through my Typeform survey.
I used the affinity map to structure the data from the survey to get useful insights. With this method I was able to identify several trends in the data from the users. Color codes make it easy to follow answers from different questions and categories and tags support to classify results.
All answers were grouped two times which resulted in the seven groups whereas I found the bold printed ones the groups most users mentioned.
- Time management
- Available time of mentors
- Visibility of free time slots
- Organisation of booking process
- Most important mentor properties
- Best places to find mentors
- Most wanted booking features
Validated observations
Using the data from the survey and its analysis, I identified the following two frustrations as most important:
Primary Frustration
When finding possible times for meetings, users are frustrated because they do not know when a mentor has free time slots, which results in time consuming appointment arrangements.
Secondary Frustration
When searching for a mentor, users prefer mentors who are from the same industry and/or have lots of years of experience, which results in an even more difficult process of finding a suitable mentor.
These two problems are key when it comes to finding a mentor and they also match with my assumptions and my research goal. Searching for a mentor seems to be difficult and, in addition, arranging joint 1-on-1 meetings seems to be a serious problem for mentees as for mentors.
How might we
These two problems are key when it comes to finding a mentor and they also match with my assumptions and my research goal. Searching for a mentor seems to be difficult and, in addition, arranging joint 1-on-1 meetings seems to be a serious problem for mentees as for mentors.
How might we make it more obvious to users that they can quickly and easily see when a mentor has free time slots?
How might we enable users to find the perfect mentor with the desired qualities they are looking for?
Ideation
The first idea is not always the best, therefore it is important to approach the ideation process in an open and unbiased way. To find as many different ideas as possible, I also used mind mapping. Without judging or evaluating the idea right away, mind mapping allowed me to let my thoughts flow freely and to move from one point to the next to expand my network of new ideas.
I split the mind map into the two areas «what can I add» and «what can I change». This way I had an initial system in which I could organize ideas for improving or expanding the app.
From the results of the ideation process, I selected three features each from «What can I add» and «What can I improve». I evaluated these three features according to the four criteria of user value, business value, effort and time on a three-level scale.
In the selection for implementation, I gave priority to the features with the highest value for both users and business and the lowest effort and/or time.
After the ideation process I decided to work on with user stories and user flows.
Based on the ideas from the mind map, I formulated several user stories. Since I was only able to work on one user story in the further course of the case study, I focused on the most important user story with regard to my hypothesis:
As a user who wants to book a session I want to see fixed dates and time, so that I can easily compare these times with my own calendar and choose accurate time slots.
As a user scrolling through all mentors on a site, I want see some important basic information right there, so I can instantly see which characteristics each mentor has.
As a new user, I want to get some instant help on the home screen, so that I can right from this point start searching for a specific mentor.
As a regular user and mentee, I want to have a list with my favourite mentors, so that I can find them very quick when I want to book a session with them again.
As a new user at Margot, I want to have comprehensive filter options for mentors, so that I can find a mentor who perfectly fits my needs.
As a regular user and mentee, I want to see my booking history, so that I can see when and with whom I had meetings and book time with exactly these mentors again.
As user flows show the various steps users need to perform in order to complete a task, I was able to identify difficult parts of the flow and improve them effectively.
As a first step, I created the existing user flow and found that the booking process was partly incomplete. For example, the setting of a date is completely missing and the selection of the session length is not very user-friendly due to the dropdown, as price and length are not quickly and easily visible.
With the help of my previous findings, I have revised and restructured the user flow. The result is a clear path that users can follow and that is clearly divided into different steps.
In addition to the advanced search for a mentor, there is a section where users can choose the length and repetition of the session with a mentor, set the date and time, and then complete the payment process. The users thus follows clear lines to book their mentoring with the desired mentor – without any further formal arrangements.
Wireframes
Before working on high fidelity prototypes I started with wireframes, to test my design decisions in a fast and easy but interactive way.
I used Autoflow in Figma to make the user flow visible and also converted the single screens into a clickable prototype. I was therefore able to conduct the first usability tests with volunteers while still in the wireframing stage.
Product styles and components
I used the lo fi prototype to test my design and to gain some first feedback from users. In preparation for the high fidelity prototype I had a close look at the actual design of Margot Community, made some adjustments regarding font size, shapes and color and set up a component library following the 4pt rule.
Setting up components made it fast and easy for me to create a hi fi prototype with a consistent product styling.
High-fidelity prototype
I used the lo fi prototype to test my design and to gain some first feedback from users. In preparation for the high fidelity prototype I had a close look at the actual design of Margot Community, made some adjustments regarding font size, shapes and color and set up a component library following the 4pt rule.
Setting up components made it fast and easy for me to create a hi fi prototype with a consistent product styling.
Testing
With the high-fidelity prototype I created an unmoderated usability test. The test included two tasks the users had to complete and three questions regarding to design and content. I used Maze to gather feedback online form the users.
Findings:
60% of testing users completed the tasks of scheduling a mentoring session at the first time. That’s okay but there is still room to improve the design.
However, it must also be taken into account in the evaluation that only the actual «happy path» is configured in the prototype and the users had no clear instruction about which session (20 min, 3 times weekly) they should choose. This could have led to frustration during testing.
For further tests, all choices should be available in the high fidelity prototype, or the task should be more clearly formulated for the users.
