Bridge The Gap
Transforming Lives, Bridging Futures
PROJECT OVERVIEW
As a former teacher, I had to deal with frustrating educational tools that didn't understand what students and teachers really needed. That's one of the reasons why I switched to UX design.
This case study breaks down how I created a complete MVP to solve a genuine problem for adults who love lifelong learning.
Role: UX/UI focused on research and testing
Topics covered: Setting research Goals, Competitive Analysis, Interviewing users, Affinity mapping, Research Analysis, Persona creation, Information Architecture, Prototyping, Usability Testing, UI Kit
“I learned things out on my own, and I felt like there should be mentors out there to teach and help”
K. S. during the interviews phase.
FIRST THINGS FIRST
I had an idea in mind. The goal of this project would be:
“Building a platform where we can publish what we seek to learn, and others can offer their help. At the same time, you can pay the favor to them or someone else.“
So, the first step I took was establishing research objectives within a research plan, which would help me have a structured approach to investigating the topic.
While recruiting volunteers to tell me about their experiences in teaching-learning environments, I researched other companies that I thought could compete directly or indirectly with our project.
I evaluated their strengths, weaknesses, opportunities, and threats (S.W.O.T.) and discovered that their success may lay in effectively connecting people, with increasing competition and shortage of mentors being their biggest problem.
LISTENING TO PEOPLE
I recruited six volunteers for the interviews. I was looking for three experienced mentors to give us the teacher’s vision and three people currently living a mentee’s experience. I was interested in their experiences and pain points, so I wrote a script for the interview that included open-answer questions to guide us to what was important.
Once all the data was collected, we processed all the information and made an affinity map.
PRODUCT OF OUR RESEARCH
I discovered very valuable insights. Among various revelations I found out that:
Online mentoring is still effective so the connection could be done this way.
Students must select teachers.
Teachers’ knowledge and experience must be visible.
Students can check teachers’ availability and book a time slot, which could be auto-accepted.
There could be automatic matching based on affinity criteria.
Two personas
I had collected some excellent information, but now I needed a representation of our user type. I created two personas to empathize with: a teacher and a student. We focussed on the student persona for this MVP to make the design decisions.
One Question:
I disclosed a revelation (POV statement) from the data collected during the interviews. This statement was transformed into a question to solve (HMW question), which guided us through the ideation process.
Our question was:
How might we help people eager to learn to easily find a mentor in that subject so that they can grow personally and professionally?
Finding an answer:
It was time to brainstorm. I selected the most interesting idea and gathered proposals from the interviewees to consider in our design if they helped solve our question.
THE ARCHITECTURE
Our MVP consists of a mentor search system and an account creation system. Our sitemap had to include a sign-up path, a login path, and one more where users could search through mentor profiles.
I included more details about the navigation in the user flow.
Finally, I reviewed the main task flows of the MVP and designed mobile-first sketches with Whimsical before getting our hands on designing an initial concept with Figma.
IDEATION
At this point in the design process, the flows were clear, and I had enough information to start designing the app. I put meaningful elements for the project in a mood board to help me remember the concepts I needed to communicate with my design. Soon the first sketches appeared.
INITIAL CONCEPT
I kept the designs I thought would perform better, but I still had doubts about where to place the filters and how users would behave when choosing a mentor, so I decided to test two different designs of the results page.
READY TO BE TESTED
I created a mid-fi prototype using Figma where the following taskflows are simulated:
TASK FLOW 1:
Do a search to find a mentor.
TASK FLOW 2:
Select a profile that you think could help you.
TASK FLOW 3:
Schedule an appointment.
TIME TO TEST!
I wrote a plan to document what and how I would conduct the usability test.
I searched for five volunteers and prepared a usability test script.
And I created relationships with the results.
USABILITY TEST RESULTS
Tasks 1 and 3 (do a search and schedule an appointment) managed to be successfully completed, achieving a 100% success rate. As for Task 2 (select a profile), it was completed on all four occasions, but on one of those occasions, it didn’t meet all the minimum requirements. Because of this, I had to make some iterations and improvements to ensure it met the necessary standards.
ITERATIONS
The First Round
After meeting the first three volunteers, I realized that there were small repeated frictions easy to fix. I thought making those small changes to reduce friction in those points was appropriate, so perhaps I could bring out other new usability problems.
Landing page
CAUSE
Two of the three volunteers so far tested showed confusion as to the purpose of the page. Their concerns were whether it was free (volunteer 1) and whether limiting the search to one location was a good idea (volunteers 1 and 2).
EFFECT
Although the landing page was just a low-fidelity prototype, I changed the main headline and the support one, informing about the local aspect and giving it a more supportive vision. I also planned to include an appealing photo in the final design that conveys the project’s spirit.
For the following usability tests, I decided to influence more on this aspect when I introduced the activity.
The informative banner under the navigation bar
CAUSE
None of the volunteers so far had read the banner effectively. That means they couldn’t know that the search results page could offer a better product.
EFFECT
I wrote a more explicit message and put the vital information in bold.
Back button (I)
CAUSE
None of the volunteers could find the back button when comparing some profiles with others.
EFFECT
I gave the button a more predominant color to be more easily locatable
The Second Round
I confirmed with a fourth volunteer that the changes were successful. Nor did new friction appear, so I set out to make the most significant changes.
Lateral vs. top filters
CAUSE
For task 1, I used a filter-on-the-side layout; tasks 2 and 3 used a filter-on-top layout. The two filters were equally effective.
EFFECT
I decided to place the filters on top to free up more space for the results.
VS
Scroll
CAUSE
Two of the four volunteers did not scroll at the beginning for the tabs of other mentors; none used the scrollbar.
EFFECT
I used a gradient to make it more visible that more cards are hidden; I reduced the width of the scrollbar.
Search Results
CAUSE
Three of the four volunteers attempted to compare the cards listed in the results. Two of them showed confusion when opting for one of them. One volunteer verbalized that seeing three specialties was challenging to read.
EFFECT 1
The number of skills displayed in the results list is limited to the searched one. Labels with specializations, job title, company, and a reputation system in the app are included to help compare results better.
EFFECT 2
Thinner cards allow more results to be displayed, so users can better compare.
Log-in to get Recommendations
CAUSE
Two volunteers tried to understand the criteria for using the app to display recommendations when you weren´t even logged in. Three volunteers could not understand why a location filter could be helpful for online mentorship. After the first iteration, the fourth volunteer suggested sorting by distance instead of filtering by location.
EFFECT
The recommendations button will only be visible when the user is registered and has filled out precise information. This way, users will see the value of logging in and completing their profile information. The “filter by location” button turns into a “sort by distance” button.
“How I like to connect” information
CAUSE
All the volunteers clicked on the mentors’ tabs to read more details within the profile, and none read the section on how mentors like to connect.
EFFECT
I framed the information better, considering the user’s “F” reading pattern.
I added more information to the profiles, including subskills, reputation, and whether they offered in-person mentorship, online, or both.
Booking appointment on the card vs. in the profile
CAUSE
None of the tested volunteers booked an appointment from the mentor card. Everyone entered the profile to confirm to do so.
EFFECT
I opted for the most simplified card design.
Add to calendar button.
CAUSE
Two tested volunteers said they would send a message to introduce themselves and ask questions before the appointment.
One volunteer informed me he did not have a Google calendar.
EFFECT
I have improved the experience with a two-step form, where users can enter doubts and concerns and confirm the appointment.
The “add to google calendar” button changes to “add to calendar.”
Back button
I removed the back button for the final design and relied on native OS elements. This change intends to make this button not compete with other design elements.
OUR FINAL PRODUCT
MEASURING SUCCESS
Do you remember Sarah, our persona?
HER GOAL:
Gain knowledge and connections.
HER FRUSTRATIONS
It feels forced to chat with people she admires. She cannot offer anything they need;
It is hard to find people willing to help;
She doesn´t know how to start.
What is the result?
She now has easy access to people from her neighborhood with knowledge and experience willing to help her start her business to make it suitable for her and the community.
Did I solve the problem?
ORIGINAL STATEMENT:
How might we help people eager to learn to easily find a mentor in that subject so that they can grow personally and professionally?
Our product:
The usability tests of our prototype have been a complete success. I have also made iterations to improve the aspects that I considered weaker.
FINAL THOUGHTS
-
Designing user´s personal area and a UI to manage contacts and conversations.
Looking at designs from David´s (our mentor persona) perspective.
Research more about the affinity between mentors and students and design an effective form to match them correctly.
-
Although the design is made for different profiles, it is necessary to focus on a single persona to carry out an effective design.
It is wise to return to your person often to see if you are still designing for them.
Sometimes the usability tests do not go as expected, and you need to trust your gut.
Better to do without one feature if it is not tested. We must design in parts.
It´s never too late to go back and iterate.