Building a digital community
for students
Connecting students with likeminded peers
Project Overview
GoodStudy is a responsive web app that helps students connect with their peers
Responsive social studying web app that allows students to engage with a like-minded student community whenever and wherever they want. They can connect with others in their field to chat, study together, share insights, receive peer feedback on assignments, and collaborate with on projects.
This UI design project was completed for the Careerfoundry UI for UX Design Specialization course.
Role
UX/UI designer
Duration
2 months
Tools
Figma
The Challenge
Students need an easy and nondistracting way to connect with their peers in their field or related disciplines
Studying can get boring alone. Studying with others is proven to have multiple benefits, such as more effective learning, higher motivation, and increased engaging discussions. However, circumstances such as lacking transportation, Covid restrictions, disabilities, and financial restrictions can make this difficult.
The Opportunity
Enhance users' learning experience by creating a digital space for students to study, chat, and connect with their peers on the go.
Body doubling is when someone works alongside you as you complete a task you might otherwise find challenging. Young people might join Discord voice channels in an effort to have some company while they study. However, as Discord is primarily a gaming platform, it can be demotivating and distracting to try to study when friends are gaming.
The Solution
GoodStudy — a responsive web app that helps students connect with their peers.
The Thought Process
Why make a social study network?
I grew up sharing notes and comparing homework with friends. "What'd you get for question ten? 42? I got 23.8!!! How'd you get that?" The community we built out of wanting to improve our scores was small but mighty. I felt supported while I struggled through my hard classes, and my friends felt the same way.
I thought that there was a big potential here to create a space where students could do the same — but online! Younger generations are constantly using their phones these days, with quick and easy access to information online and group chats galore on TikTok, Snapchat, Messenger, and Discord. Nowadays, even classes are online, with requirements to complete tests and submit assignments using specific school softwares. I wanted to consolidate community and resources for students into one efficient and aesthetically pleasing package.
What use would students get out of GoodStudy?
User Stories
As much as I wanted to dive into user research and conduct surveys and interviews, the purpose of this project was to dive into designing the UI. Expanding into the motivators behind why Daniel would need to make posts, find a study buddy, and study groups revealed the potential of dynamic features that could elevate and round out his experience with GoodStudy.
Breaking down Daniel's tasks into steps
How would he move through the app? User flows kept me in check as I began designing screens. The whole point of creating GoodStudy was so Daniel could stay focused on his work and gain real value from the app.
Make a post and add a file to get feedback
Add a study buddy
Message a study buddy
Iterating with Daniel's goals in mind
Initially, I thought of creating the home page as a hub with study tip articles… However, Daniel isn't opening GoodStudy to read a blog, his aim is to connect with students and co-study! I realized it would be more beneficial to users to minimize study tips to a small blurb, and to instead show the study goals on the home page.
I wanted the students of GoodStudy to succeed, and out of sight is out of mind. Having their goals visible on the default home page would enhance their responsibility and dedication towards success.
Mid-Fidelity Wireframes
I was on a much shorter timeframe for this project, but if I wasn't, I would've loved to conduct usability testing here and get some feedback.
Getting the vibe right
Moodboard #1 was created with a chic student aesthetic in mind, inspired by stationary, academia, and revisited 90’s trends.
Moodboard #2 was created with a neo-futuristic, colorful, and refreshing aesthetic in mind, inspired by high graphic fonts and extreme colors.
It was honestly really hard to choose between the two, because both concepts excited me. With the right execution, I thought that either visual concept could work. But what would my users want? What would inspire them to stay in the study mindset?
I chose Moodboard #1 to focus on delivering a product that feels natural for students. I think it’d be a smooth transition for students to use a mostly neutral color palette similar to their notes, with a few color accents here and there. It still feels cool, but in a much more effortless and subtle way. Moodboard #2, while exciting, could be too distracting for students who are trying to focus on their work.
Narrowing down the color scheme
Using the chosen moodboard, I started experimenting with different colorways. “Blue ballpoint pen” was almost overwhelmingly blue, and the “iced coffee” palette combined with the GoodStudy logo almost made the app seem like a coffee or chocolate brand. While they all look great, I thought that the third option, “posty on a notebook,” communicated the most neutral, friendly, and relevant aesthetic for studying.
Playing around with the color schemes was really fun and gave me a few ideas for possible future features, such as one where students could customize their color schemes for GoodStudy on premium accounts.
Dictating the look with a Style Guide
I had already chosen the mood and color scheme, but here I got to further dictate the app's consistent visual story. The font I chose for the web app is Figtree - minimalist and casual, fresh but not childish. The style guide contains guidelines to the brand mood, logo, typography, color scheme, UI elements, iconography, imagery, and responsive layouts.
I really enjoyed creating the style guide for GoodStudy, and I think I did a great job developing a strong branding! I imagined the branding extending to merchandise like stickers, notebooks, hats, hoodies.
Final MVP
GoodStudy — a responsive web app that helps students connect with their peers.
Make a post and add a file to get feedback
Add a study buddy
Message a study buddy
Mockups
Takeaways
Designing GoodStudy was an exciting challenge, and it was fun to be able to focus on the UI side. I still found myself wanting to test little features, and often had my sister and friends look at my work in progress to give quick feedback. Next time, I’ll make sure to keep a log of others’ notes, as well as conduct more formal preference testing, since it has a faster turnaround. It was a good reminder for the future that I don’t have to (and should not) linger in my own thoughts, and conducting smaller scale tests can help give me fresh perspectives!
If I had more time…
I would add more micro interactions to make the user experience more enjoyable. I would also continue building out the tablet and desktop versions. I think there’s a lot of potential in how to utilize the larger real estate in the larger screens for this web app, such as giving students the ability to have a study room open at the same time as a chat room. It would also be important that the users have flexibility in what features they want to access and when, rather than restricting them to one thing at a time. Contrasting that, I’m excited at the idea of giving users a feature that restricts other apps in a “focus mode” or incorporating timers for studying.
These are all interesting ideas to implement, but all in all, I’d say that I’m satisfied with GoodStudy’s starting point and had a lot of fun with this project!