STUDY BUDDY —

A study partner request website for university students

The design prompt I chose to explore was to “design a study partner request flow for an online academic service”. It needed to be a responsive web design built on Adobe XD, and I knew I could narrow the scope of this project and build a design that is simple, personal, and easy to use.

Background

Problem

University students need a way to find and schedule study sessions with their peers. In order for this to be beneficial, students want to be able to find study partners who are like-minded and can work well together.

Solution

An intuitive responsive web design that matches student profiles based on personal preferences and gives them the opportunity to get to know potential partners before committing to a study session.

mockups of study buddy website on a desktop, laptop, and mobile phone

My Role

  • UX Researcher

  • UX/UI Designer

  • UX Writer

  • Logo Design

Project Duration

1 month solo project

  • Adobe XD

  • Miro

  • Canva

  • Photoshop

Tools Used

  • Empathy Maps

  • User Personas

  • User Interviews

  • Competitive Analysis

  • Wireframing and Prototyping

  • Usability Testing and Iteration

  • Accounting for Accessibility

Techniques Used

Design Process

I used the more traditional Double Diamond framework which helped me to visualize how design thinking converges and diverges. The first diamond lays out the foundations of the project using problem exploration, research, user personas and competitive analysis. The second diamond then uses the refined scope from earlier to explore the user flow, visual design, create wireframes and prototypes, iterate, test, and launch.

gif showing the double diamond framework

stage one: discover —

The first stage of the double diamond process tells us to focus on the user and broaden our ideas on the problem. I began brainstorming and the first concept that came to mind was a peer-learning platform where students used their individual skills to learn together, rather than having an experienced mentor to teach them. I felt that the online tutoring industry was already saturated enough, but what was lacking was a dedicated space for students to connect on a more personal level and discover if they would be compatible study partners. To avoid being too broad, I chose to target this towards only university students in the UK.

image showing brainstorm including exploration of design prompt and potential demographic

Preliminary Research

There have been multiple studies over the years to propose the benefit of group work. In 2006, Hansen conducted a study that proved group work between students in higher education can be positive if all members make an effort to take part in the work, set clear goals, and have some sort of role differentiation. Hammar Chiriac and Hempel (2007) discovered that common problems with group work included group composition, individual contribution, affiliation, and group conflict. To understand the motivations and fears behind group/peer studying, I interviewed potential users; below are some key takeaways.

    • 6 participants, aged 18-55

    • 3 females, 2 males, 1 non-binary

    • current university students

    1. Do you prefer to study alone or with other people? Why?

    2. How do you feel about studying with a partner from your university on a subject you struggle in?

    3. Have you ever had a negative experience studying with someone else? If so, how did that make you feel and how do you think it could have been resolved?

more than 50% of participants would prefer to study with a partner in person
4 out of 6 participants said they prefer studying with others. the remaining 3 participants prefer studying alone, and one participant enjoys both
50% of participants work alongside their studies
100% of participants said that they could benefit from studying with a partner from their university

Competitive Analysis

competitive analysis grid showing three competitors' unique value proposition, strengths, weaknesses, gaps, and opportunities

User Journey

user journey grid showing the tasks, feelings, and improvement opportunities for each stage of the user journey

Feedback from the interviews gave me incredibly valuable insights that not only pointed out the most prevalent user pain points, but also removed any previous assumptions I had before going into research. This led me to the second stage of the double diamond framework: define. At this point, I wanted to synthesize the data I had gathered so far and start to refine the scope of the project.

stage two: define —

Who are we designing for?

After conducting user interviews, I came up with two personas for Study Buddy who are a reflection of the goals and characteristics of a larger group of users. This helped me to clearly identify what the main pain points were so that I could go on to prioritize design goals.

From this, I was able to formulate user stories:

“As a single, undergraduate student living on campus, I want to meet up with students who are open to studying together so that we can motivate each other to stay focused and provide help on the areas we are struggling in.”

Rashan Sango

“As a full-time student, psychologist, and mother, I want to schedule study sessions ahead of time so that I can find a study partner who can work with me despite my busy lifestyle”

Winnie Chen

So, if our problem statement is:

“Winnie Chen is a busy, working, post-graduate student who needs to be able to find a study partner based on her preferences because she doesn’t have time or much confidence to study with other students”

How might we:

  1. Make the process of finding a partner to study with easier, less stressful, and more personalized?

    Automate the process instead of relying on students to be overly proactive

  2. Streamline the process of finding and scheduling a study partner so that it is convenient and helpful?

    Every student could have a completed profile that matches with others based on their needs

  3. Give students more confidence in their decisions?

    Include filter preferences so that students can find a partner who will actually work well with them

stage three: develop —

At this stage, I knew the direction I wanted to take. It was just a matter of trial and error before finding the right solution for the user pain points I had now determined. I like starting the develop stage with concept exploration, and what better way to flex my creative muscles than with a crazy eights exercise?

image of a crazy eights exercise

I wanted to see the range of ideas I could come up with in a short space of time. The first idea I came up with was students listing their ‘must-have’ and ‘nice-to-have’ traits that they were looking for in a potential study partner. I also played around with the idea of taking your study partner on a date first to see if you get along. Another one aimed to merge the digital and physical experience by asking students to scan a QR code on their mobile from a friend to automatically schedule a study session.

I picked out some of my favorite features and created a sitemap/user flow to use as a guideline for wireframes, as well as to understand the relevance and relationship between each page.

User Flow

user flow illustrating the tasks users need to complete in order to schedule a study session on Study Buddy

From paper to digital

I wanted to make sure to communicate the simplicity of the design from the initial wireframes. An overarching issue that users had previously experienced was not being compatible with their study partners, so it was important for me to include a few questions that would help filter students into different categories (for example, if they preferred to study in the morning vs. the evening, or if they enjoyed a quiet studying session vs. a more conversational one). Using this quiz-style format allows the site to match students based on their personal preferences, therefore increasing the likelihood that they’ll actually get along with their partner. I made use of a sequential website structure here to lead users through a step-by-step process and so they wouldn’t have to search too hard for what they were looking for.

image of paper wireframes
image of digital wireframes

To make sure Study Buddy was going to be functional and useable across a variety of screens, I designed wireframes for mobile, tablet and web with slightly different formats.

image of Study Buddy homepage on a computer screen
image of Study Buddy homepage on a phone screen
image of Study Buddy homepage on a tablet screen

User testing: low-fidelity

With my low-fidelity prototype ready, it was time to put Study Buddy to the test. I conducted a usability study with 5 students and asked them to complete a variety of tasks. To measure a participant’s progress towards completing those tasks, I used three different KPI’s- conversion rate, time on task, and a system usability scale.

Usability study findings

The usability study provided me with a range of insights which I categorized into five main areas. I came up with resolutions for each of these and then prioritized the insights based on most to least urgent.

image of affinity map showing notes from usability study arranged in themes

Priority 0

  • Reduce the amount of information on the schedule page to streamline the booking process

    4 out of 5 participants found it difficult to schedule a session

  • Add more details about scheduled study sessions on 'my schedule’ page

    4 out of 5 participants found the scheduled sessions page confusing

Priority 1

  • Add a ‘remember me’ button so that users don’t have to enter their login details every time they use the site.

1 out of 5 participants expressed that they wouldn’t want to login manually every time

Priority 2

  • Put key information above the fold

    1 out of 5 participants found it inconvenient and inaccessible to scroll the page for important information

image showing before and after usability testing. inclusion of color-coded calendar
image showing before and after usability testing. booking a session has changed from one page to several pages to reduce information overload

Accessibility considerations:

  • Avoid solely relying on color by using shapes and different entry points for information. Users can either select a date that is circled to reveal study session details, or can also tap on any study session listed on the left side of the page to see more details.

  • Reduce the number of touch points on one page. For those who are using assistive technology, it may be difficult to scan and select multiple CTA buttons on one page. After making some changes, each step of the booking process is on its own page, and users can now focus on one thing at a time, as well as making it easier for screen readers to interpret the information on the screen.

  • Keep key information above the fold. A lot of assistive technologies such as screen readers and switch devices require more time and effort to activate scrolling or carry out advanced gestures like hover or swipe. For this reason, almost every page on the Study Buddy website only requires users to tap once or twice at a time, and has all of the most important information above the fold. On any page that does require scrolling, such as ‘your potential study buddies’, users can either tap on the downwards facing arrow, or on the text that says “more study buddies below“ which will automatically move the page down to reveal the rest of the information. They can then press “back to top” to take them to the top of the page again.

After reflecting on the feedback from the first previous round of testing, it was time to bring Study Buddy to life with color, style, and personality. The final stage of the double diamond framework is deliver, but the iterative process never stops. I used this moment to refine the design and test again before handing it off. And if this was a project in the real world, I know that the work wouldn’t end there, and it would continue to improve and evolve.

stage four: deliver —

image of UI style guide

UI style guide

I kept the color palette bright, colorful, and youthful. I noticed during my competitive audit that a lot of similar websites were more monotone and felt uninspiring. For this reason, I wanted to inject life and fun into the design, while still keeping it clean and professional.

I made sure to test the color and text contrast ratios to meet Web Content Accessibility Guidelines.

Using the feedback from the first round of testing, I developed a high-fidelity prototype that could be used for a second usability study. I made all of the necessary changes based on my prioritized insights, as well as improving the overall visual image so that users had a more realistic idea of what the final product was going to look like and I would be able to assess how users would naturally move through the flow.

User testing: high-fidelity

The results from the second usability study revealed:

image explaining an iteration is that users want reminders for upcoming study sessions
image explaining iteration. users want repeat sessions

Based on these insights, I made a few more changes:

image showing addition of button to make study session regular
image showing addition of button that allows users to set reminders for upcoming study sessions

Key Findings:

100% OF USERS:

  • Were able to complete all of the prompts during the second usability study

    KPI: conversion rate

  • Completed the user flow from beginning to end in under 5 minutes

    KPI: time on task

systems usability scale diagram showing 82.5% rating after first usability study
systems usability scale diagram showing 97.5% rating after second usability study

“I love the personalization of the site. I get to decide whether I want to study in-person or virtually, if I want to book a regular session or a one-off, and I get to discover more about my partner through their profile before committing to a study session with them.”

Mockups:

image of study buddy logo in four different colors
image of study buddy mockup on iphone
image of study buddy mockup on laptop
image of study buddy logo
image of study buddy homepage mockup on laptop
image of study buddy mockup on tablet

“I really like the concept of goal setting on here! I think it would encourage me and my study buddy to stay focused!”

After a busy month of researching, designing, testing and iterating, I am really proud of how Study Buddy has developed. Throughout the process, there has been an improvement in usability, user satisfaction, and success rates, and in general I have really enjoyed receiving feedback from students about their experience with the site.

final thoughts —

The future of Study Buddy

If I had more time, I would definitely continue to work on all aspects of Study Buddy. I think change is fundamental in UX design; there are always more features to develop, more user voices to be heard, and so many more ways to make our designs inclusive for everyone. I would love to spend some time building a strong design system, as well as work on the site’s accessibility by making the experience as seamless as it can get with assistive technology. I would also like to add a feature that allows users to easily make a group study session.

What I’ve learned

“All I know is that I know nothing.”

Going into this project, I had a rough idea of the kind of product I wanted to build and of course the end result looked very different to that. I realize this is because the changing needs of users is what leads the way. From the content, to the navigation, right down to the size of a little button on a page you think no one will even see, every design decision is informed by users. The biggest thing I will take away from this is to prioritize usability studies and feedback as frequently as possible, and to put effort into the small details (because they matter to somebody).

see the final prototype in action!

or play around with the prototype yourself here!