StudyHub Case Study
Getting questions answered immediately, sharing tips on how to study more effectively, holding other fellow students accountable to their goals - there's no question, studying together is better than studying alone.
StudyHub wants to help students get to joining groups quickly and conveniently, without having to worry too much about coordinating between schedules. With their website, that is precisely what they aim to do.
Client
StudyHub
Role
UI/UX, Web Designer
Brief
Design a website that allows students and teachers to easily search for study groups regarding their degree, school, or interests.
User Research
The company had a very strong idea, but the sharpest arrow needs to hit its' target to be useful. When we know who we're designing for, we can get it right the first time, and so a few objectives became clear when designing the website.
Finding study groups needs to be as convenient and intuitive as connecting with others on a social media website or app.
Users need to be able to create events, join communities, and interact with each other in a streamlined way.
Making connections can be challenging, especially in a new environment like college. Let's make that easier.
Going hand in hand with the other items, we need to find ways of users connecting that will account for all sorts of people.
User Personas
In conceptualizing and ideating the website, user personas were created. These personas are used to have someone in mind to design for; the more specific a user's needs are, the better. These are the people I'm designing for.
Grace Shaw
Age: 19 years old
Education: First-Year College Student
Hometown: New York City, NY
Family: Parents
Occupation: College Student, Part-Time Cashier
Grace's chosen degree is in medicine, which requires a great deal of learning and studying. While she wants to start her college career on the right foot, she also wants to meet new people to hang out with while she works on her classes. A perfect way to do those things would be to join a study group, but talking to new people for the first time can be intimidating. Something that would allow for a softer way to introduce herself while still meeting people within her field of study (and ideally in her campus) would be a perfect mesh of the two.
Priya Mahajan
Age: 38 years old
Education: Master's Degree
Hometown: Mumbai, India
Family: Husband and Two Kids
Occupation: College Professor
Priya has been a business teacher for many years, and she works everyday to make sure more people can get into business and progress towards getting an MBA or similar. It's no small task however, as many of her students have trouble with studying and remembering all of the different terms. Business is a difficult degree and field to get into, so having additional resources her students can rely on is very important. She is open to tutoring and has done so in the past, but fitting it into her already tight schedule has been a challenge. Something that could help with scheduling but also be convenient for students to meet with her would be ideal, in a group or one-on-one.
Designing Wireframes
Sketching on paper is always the first thing to do. The purpose here was to layout different pages and different elements within the page, and select the ones that make the most sense. This allows ideas to be put on a tangible medium, be combined, filtered, and optimized to provide the best user experience in the end.
After sketching, the solution to the problems presented itself - make it a combination of a search engine and a social media website. The searching functions needed to be robust so users could find exactly the group they're looking for, and the social aspect would play in the group and events part of the website. Chat functions and forums could be further implemented, but for now we are focusing on users finding groups and events for their specific interests.
Low-Fidelity Wireframe
This flow explores a typical user's process in searching for a group, finding it, and looking through the group's events, also showing their profile page where their information and upcoming events are listed.
Desktop Version
Give It a Try →
Home page, where the search function is front and center. Users can type in any keywords, and the page below will present different categories they can search for.
Search results page, where users can scroll through the groups that correspond to the keywords typed. Filters and sorting options allow for further search customization.
Group page, where the user can see and respond to attendance of upcoming events after joining the group, along with a calendar view, current members.
The profile page will also reflect any meetings that have been responded to,
Mobile Version
Give It a Try →
Home page, where the search function is prominently displayed. Users can type in keywords or select categories.
Side navigation menu, which can be accessed from any point in the website.
Search results page following typing the keyword, each group displayed as a card.
When the user taps the Filter bar, a dropdown showing the different filters appears to narrow the search further.
Group page, showing a brief summary of what the specific group is along with upcoming events.
The calendar of events appears when tapping the icon, showing which days have events scheduled.
Group members can be seen when tapping the members icon. This feature will be useful to chat and see other user's events.
At any point, the user can click on their profile icon to access their current groups and events.
Usability Studies
Over the course of this project, two usability studies were conducted; the first study's objective was to determine what the user would need in a website like this, asking questions specifically about the process of finding a study group. The second was to have them test the usability of the flow on the low-fidelity wireframe, with the objective of taking them through a process of finding and confirming attendance for an event.
Round 1 Findings
Users want an easy way to find and join study groups without the additional social pressure of finding one in person or forming one themselves.
Users want to fit these study sessions into their busy schedules, whether they are student or teacher.
Users want more opportunities to form academic and professional connections while attending school.
Round 2 Findings
There was not enough information about what the website was about or what they were searching for.
There was no clear way to confirm or deny attendance to a group meeting.
There was also no way of telling whether a meeting didn't have a virtual option.
Refining the Design
To progress with the project while addressing user issues, changes were made in the design while developing the high fidelity prototype. After completion, another round of usability studies will be done to make sure those issues are resolved, spot potential new issues, and start the process of implementing new features.
The home page was expanded upon, and with the implementation of copy instead of placeholders, it allows users to scroll the page in case they need more information on what the website is about, along with several calls-to-action buttons to register their account.
The group page was made clearer, as the attendance buttons will now show which one has been clicked and have a corresponding color for each appear when the user selects it. The virtual icon will now be active or greyed out depending on what meetings have virtual access available.
High-Fidelity Wireframe
The high fidelity prototype gave way to further implement the company branding with colors and imagery. Green and blue were used to convey a learning environment, and imagery showcasing people in social settings further a sense of community.
Desktop Version
Give It a Try →
The home page (now in color!) is further expanded upon, with more information about the website and what it does. More search options are provided below the search bar, along with registration buttons and answers to potential questions further down the page.
The search results page has also been expanded, with visuals conveying the different groups and their ability to be customized with main pictures and banners. The accessibility option of speaking the search terms into the search bar has also been added.
With color being introduced into the wireframes, events now provide the immediate visual feedback of the inputted user response. The virtual meeting button has also now been simplified to a video icon, as well as showing whether a virtual meeting is available or not.
The profile page will act as a center for all the different meetings across all different groups so the user can easily access their events without having to search for the group again. Their groups, friends, and settings will also be available here for a personalized experience.
Mobile Version
Give It a Try →
The home page has the same prominent search function, but some more emphasis is given to registering an account and different search options.
Side navigation menu, which can be accessed from any point in the website.
Search results page following typing or saying the keyword, each group displayed as a card that group creators can customize.
When the user taps the Filter bar, a dropdown showing the different filters appears to narrow the search further.
Group page, showing a brief summary of what the specific group is along with upcoming events. The color changes depending on the user's response to an event.
The calendar of events appears when tapping the icon, showing which days have events scheduled, and each dot it colored to indicate the user's response.
Group members can be seen when tapping the members icon. This feature will be useful to chat and see other user's events.
At any point, the user can click on their profile icon to access their current groups and events, as well as customize their profile.
Accessibility Considerations
Immediate feedback on attendance of meetings, calendar views, seeing which members are attending which meetings, along with virtual attendance provides valuable information to the user on which meetings they can or want to attend, depending on their scheduling needs and availability.
Clickable areas are made larger to facilitate tapping and clicking, along with colors being contrasting to differentiate between different states, and font treatments having clear hierarchies, prioritizing legibility.
Search functions were made as accessible as possible, with the high fidelity wireframe including a microphone icon for users who need speech options to type. Future iterations of this website will need to include features such as comprehensive alt text and the ability to navigate the website with a keyboard to make sure all users can easily search for and find study groups.
Key Takeaways and Next Steps
The website made users feel like searching for a study group is easy, and helps with the process of finding one to join. This was the main objective, and since I learn something new with every project, with this one I learned of the several ways a screen size can change a website or an app, therefore changing the user experience. Making both desktop and mobile views a good experience for the end user is critical in launching a successful website, product, or app — in the spirit of that, the next steps for this website are:
Do another round of user testing to take in more perspectives, ensure the navigation is clearly understood, and account for more of the target audience, students and teachers.
Further build on the group aspect of the website, including chat, question, and friend functions. This will further the social aspect of the website, and allow easier communication between users. In this step, user privacy and safety will be crucial, as we expand into applying more social media rules into this website.
Develop the profile page further, integrating the previously mentioned functions and allowing for deeper profile and user experience customization with the settings.