Project: Designing a study app that facilitates peer-to-peer learning, support, and feedback.
Role: Lead Designer, Project Manager & Coordinator
Timeline: November 2023-January 2024
Study Buddy is an online academic platform for remote students, enabling those that wouldn't otherwise have an opportunity to form study groups to build their own collaborative student networks with other, like-minded students. Classmate style connections for students without a physical classroom experience.
Design Thinking: Empathizing
The benefits of taking classes online are aplenty, but peer-to-peer learning and group study interactions are much harder to come by when you have no classmates to speak of, no built-in academic support network to turn to, and no shared classroom or campus access in which to meet.
The BIG Idea
An online academic network that connects like-minded, atypical students from all over, fostering classmate-style bonds between those with similar academic trajectories and providing a platform that encourages collaborative study efforts among them.
User Persona: Hello, Alex!
Atypical Alex
Alex is a student. Working his way toward a BA in History, he's just enrolled in a required European History 1900-45 course for the upcoming Fall semester. Having heard how tough this course can be, Alex would love to find a study group of sorts before the class begins. Unfortunately, while it's true Alex is in fact a student, he's also 33 yrs. old, working as a retail manager p/t, newly engaged, and trying to finish his degree online, one class at a time. No less of a student, but outside the typical college student mold, makes him an outlier. Without the benefit of a shared classroom/campus etc., Alex won't have the same opportunity to form a peer study group as a remote student. However, with access to an academic network of atypical students like himself, he can easily connect with his remote peers, and form a study group anytime.
User Flows
With user persona Alex's needs in mind, 3 core app features are tentatively laid out to address them. 2 scenarios for new users, and 1 for frequent users are then mapped in the user flows below in a first attempt at imagining the apps' infrastructure and navigation placement before UI development gets fully underway.
3 Core Features
1: Student profiles
2: Finding Study Buddies
3: In-app messaging for Study Buddy communications
Low-Fidelity Wireframes
How it Started: From the visual pathways designated in the above user flows, the very first draft of the app's interface is crudely designed. These initial renderings help to nail down the basic tenets of the Study Buddy interface in order to proceed to the next step in the creative process. Essentially, the final UI is, can be traced back to the minimalist screens captured in the video below, pinpointing the beginning of its evolution to this very spot.
Mid-Fidelity Wireframes
How it's Going: Once the first design revolution is entirely complete, mid-fidelity wireframes then come into play. From low-fidelity to now, the visual hierarchy of Study Buddy is tentatively placed, and its features start to properly emerge. In this next video, the screens are dramatically altered from their previous iterations above, however, they remain far from polished for now.
A Whole Mood (Board)
Conceptually, Study Buddy has evolved considerably from where it began, aesthetically however, there's been very little, if any, movement on this front to date. The app needs a look, a style, a visceral appeal to attract users in the first place. Without that initial user engagement, a stellar user experience is essentially a moot point. To build out the visual elements, a mood-board is in order. Below, the results.
The Study Buddy mood-board depicts the human connectivity behind shared online communities. It leans into the motivational aspects study groups often provide, normalizing their positive impact on remote learning. There's an emphasis on inclusiveness as well, redefining the term student for the modern era. The color palette is made up of various shades of greens that recall the idyllic landscape photography of university catalogs, and bygone classroom staples like chalkboards to reinforce the school narrative around which the app is to be built.
High-Fidelity Wireframes
The mood-board aesthetic from above, is intentionally distributed to the next iteration of the UI as seen in the video below. The primary, secondary, and tertiary colors provide the ambience while various placeholder elements are replaced with images, text, icons etc., in the same vain. Study Buddy, the app, has now come together significantly to make way for Study Buddy, the brand. Closer still, to the polished product at the end, but not there yet.
Design Style Guide
Maintenance of Study Buddy over time is documented in its design style guide, the abridged version of which can be seen below. It holds the key to longevity for the app, preserving everything from logo usage to imagery application for future versions to rely on for updated UI builds.
Full Design Style Guide Available Here
Multiple Breakpoints
In order to make Study Buddy accessible for the majority of potential users, limiting its availability to mobile devices only, is needlessly short-sighted. In this case, mobile app design came first, but desktop and tablet versions immediately followed suit. As seen in the images below, Study Buddy goes from mobile to tablet and tablet to desktop in these two instances by rearranging the mobile content in a way that fits the different breakpoints for desktop and tablet devices.
Figma Prototype
Get a feel for the Study Buddy mobile app, firsthand. The Figma prototype provides ample opportunity to test Student Profile setup, Seeking Study Buddy, and In-app Messaging, otherwise known as its 3 core features. Click the Figma field embedded below to begin this one-of-a-kind Study Buddy user experience right here, right now.
The Final UI
The Study Buddy app is now polished, fully responsive, and marketplace ready. Check out the most current version of the app's UI at multiple breakpoints in the mock-ups just below.
Mobile User Profile Setup
Seeking Study Buddies /Mobile/Tablet/Desktop
Mobile Seeking Study Buddies
For You & Seeking Study Buddies Mobile/Tablet/Desktop
Mobile Messaging
