Studdy Buddy’s Website Design Nicholas Ramlakhan
Project overview
The product:
Studdy Buddy is a collaborative website that allows students to find others to study with. The average user is between 17 and 30 years old and are currently in college. Our goal is to make finding study buddies quick and enjoyable.
Project duration:
February 2023- April 2023
Preview of selected polished designs.
Project overview
The problem:
Current study partner website are often slow or uninformative which makes finding the right person difficult.
The goal: Design the Studdy Buddy website to be user friendly with a clear flow on how to reliably and quickly find a study buddy.
Project overview
My role:
UX Designer leading Studdy Buddy’s website design.
Responsibilities: Creating wireframes, conducting usability studies, iterating on designs, and finalizing high-fidelity prototypes.
Understanding the user
● User research
● Personas
● Problem statements
● User journey maps
User research: summary
I conducted user interviews to create an empathy chart and pinpoint their specific needs. I learned that many users try to find study buddies when they are currently taking a class that are a struggling to understand. However, many websites do not show which classes students are taking which can cause a lot of stress when finding a study buddy because users will not know if others will understand the work that they need help with.
.
User research: pain points
Information
Study buddy websites do not show which classes users are taking which makes the experience stressful to find the right person.
Time
Messaging users to find what times they are available and setting up dates to meetup can waste a lot of time.
Navigation
Trying to sort through study buddies that may not be what users need create a frustrating experience.
1 2 3
Persona: Valerie
Problem statement: Valerie is a busy college student who needs a quick and reliable way to find others to study with as she doesn’t have much free time.
User journey map
I created a journey map of Valerie’s experience using the website to identify pain points and opportunities to reiterate on the design.
● Sitemap
Starting the design
● Paper wireframes
● Digital wireframes
● Low-fidelity prototype
● Usability studies
Sitemap
Information and time were key pain points for users, so i used that information to create a rough sitemap.
My goal was to make the flow of the site as simple as possible while providing enough information to find exactly what users are searching for.
Paper wireframes
I create paper wireframes with the pain points of interaction and time in mind. The home page wireframes on the right focus on ease of use and useful information.
Refined Paper Wireframe
Paper wireframe screen size variation(s)
Studdy Buddy is a responsive website which allows users to access all the information they need while being re-organized for whatever screen size they are using.
Digital wireframes
The digital wireframe made it easy to redesign user pain points. I prioritized having a simple layout that was easy to understand and quick to navigate.
Quick access to any page the user might need.
Simple design for easy navigation.
Digital wireframe screen size variation(s)
Low-fidelity prototype
I connected all of the screen in a typical user flow such as the home page, profile page, room page, and others to create a low-fidelity prototype.
Usability study: parameters
Study type:
Unmoderated usability study
Location: United States, remote
Participants:
5 participants
Length: 20-30 minutes
Usability study: findings
Insert a one to two sentence introduction to the findings shared below.
Users had no way to search for specific people that they added as study buddies.
There were no options to filter study buddies by.
Users had to use outside sources to create notes during study sessions.
Search Filtering Note-taking
1 2 3
Refining the design
● Mockups
● High-fidelity prototype
● Accessibility
Mockups
Based off the usability study, I enhanced the user experience by adding filters to the study buddies page. This will allow users to sort through users to find others that would best meet their needs.
Before usability study
After usability study
Mockups
To find specific study buddies that you have added, I added a search functionality to find the study buddies that you connected well with.
Before usability study
After usability study
Mockups: Original screen size
Mockups: Screen size variations
I created variations of each screen to best fit other screen sized. This allows me to organize the information to best fit the device the user is using. These variation are meant for mobile devices such as phones and tablets.
Accessibility considerations
I used different size text for Headings and other text to show the visual hierarchy.
Buttons and text boxes were color coordinated to show what can be clicked and which menu is selected.
Similar items were placed in close proximity. This helps make navigation as quick and smooth as possible.
1 2
3
Going forward
● Takeaways
● Next steps
Takeaways
Impact:
Our target audience shared that the website was easy to navigate, had engaging colors, and very informative.
What I learned:
I learned that sometimes too much information or color can be a bad thing. This can sometimes make it hard to navigate or become a little overwhelming at first glance.
Next steps
Conduct more usability studies to identify new pain points that users may have.
Ideate and reiterate the design from new user feedback for future updates.
1 2
Let’s connect!
Thank you for reviewing my work on the Studdy Buddy responsive website!
If you would like to see more, or get in contact with me, my information is provided below: Email: nicholas.ramlakhan@gmail.com
Website: https://issuu.com/nicholasramlakhandesigns