Knowledge is better when we share it.
Studywavve is a responsive web app connecting students in similar academic fields, offering a platform for discussions, resource sharing, and virtual meetups. It aims to transcend geographic and educational constraints, fostering connections among like-minded scholars.
Project Overview
Objective
Connect students from various geographic locations online to facilitate peer-to-peer learning, resource sharing, feedback, motivation, and instant messaging.
Allow students to use the app when and where they want, which is useful for those juggling their studies with a job, family, and other important life obligations.
About Studywavve
By finding study buddies near and far, users can feel a sense of accountability in their coursework, reducing procrastination and improving productivity.
Studywavve makes learning fun by bringing a social element to the experience. When students study together, they exchange diverse perspectives, which enhances understanding through different viewpoints.
Why create Studywavve?
As a former educator, I had numerous opportunities to observe students' learning patterns and extensively contemplated the success of various social apps in the market (i.e Facebook, Instagram), along with their engagement levels.
The primary motivation for developing Studywavve stemmed from:
The Constructivist Learning Theory, which emphasizes the role of social interaction in learning, supports the idea that students can learn effectively from each other through collaboration and discussion, which leads to deeper understanding of subject matter and better retention of information.
The ZPD Theory (Zone of Proximal Development) by Vygotsky suggests that learners can achieve more with the help of a more knowledgeable peer.
Inclusivity: Every student should have access to equitable learning opportunities, regardless of their background or geographic location. Studywavve addresses this need by providing a free and open-source platform, eliminating the constraints posed by socioeconomic status and granting all students the chance to excel in their studies
Design Process
Empathize to understand target users
In order to gain deeper insight into the users' requirements, motivations, and challenges, I developed a proto-persona by pulling out key details outlined in the project brief. Alex’s profile represents the target audience: young adults, with busy schedules, who may not have all their educational resources close by.
The big plans
After reviewing the user story outlined in my project brief, and taking into account the larger audience who would potentially use my app, it was time to craft a user flow diagram. The diagram below represents the potential journey that individuals like Alex, as well as other users could take to accomplish specific goals.
Major I features I wanted to include:
An onboarding flow that auto-populates a new user profile card including image, language, subject, interests, & location.
Find and filter different resources relating to specific categories the user needs (i.e., quizzes, vocabulary, videos). There is also a filter to find students studying the same subjects with shared interests and languages nearby.
Scheduling virtual meetups to share work and collaborate in real time.
Send/receive feedback on assignments through instant messaging.
Mapping out some Wireframes & Prototypes
Low-Fidelity Wireframes (Mobile First Design)
The next step involved creating initial sketches of the core features of my app using pen and paper.
Responsive Breakpoints
After utilizing a mobile-first approach for my app, I began designing for different breakpoints so that users could access the Studywavve through different devices. I focussed on the home screen for this approach as it was most important feature to solidify and build off of.
Example plans for mobile, tablet, and desktop:
Ready for Mid-Fidelity Wireframes
It was now time to bring my app to life with more details. I added basic design elements, text, and images to show how Studywavve works. I also chose to use dark mode as it’s a current trend in UI today and an excellent choice for users like my persona, who would probably use the app at night after work. I also drew inspiration from my students who always without fail, switched their computers to dark mode!
Bringing Studywavve to Life with High-Fidelity Protoypes
Now that the general features within the app were established it was time to have fun with the interface design. I wanted Studywavve to feel fresh, modern and appeal to a diverse set of users, so it was really important for me to have color palettes and imagery to reflect that concept.
The Process For Creating High-Fidelity Wireframes and Prototypes
ESTABLISHING A Mood Board
For this step, I assembled a mood board to collect inspiration and establish the project's overall tone and mood for its users. I also selected a color palette that felt fresh and images that displayed a diverse mix of students so users could see themselves in Studywavve.
GETTING ORGANIZED WITH A DESIGN SYSTEM AND STYLE GUIDE!
After setting the vibe with the mood board, it was time to get down to business and build my design systems. I wanted this app to be smooth, efficient, and good-looking, so a solid design system was non-negotiable. I tackled the big components first—nav bar, main buttons, text fields, and more! I anticipated that diving deep into Figma and building this design system might be a bit of a grind. The learning curve was real. Yet, after hours of immersing myself in YouTube tutorials, I felt like I was able to build anything. Developing my design system not only elevated the visual aesthetics of the app, but it also contributed significantly to its overall usability. I also created a simple style guide with some further breakdowns. Some examples below:
MULTIPLE ITERATIONS
While Studywavve initially served as a case study for my bootcamps, my passion for innovation in EdTech propelled me towards its continued development. The design underwent a couple of facelifts, with feedback solicited during substitute teaching and insights gathered from both faculty and students. Moreover, my progress in Figma and contract visual design roles provided valuable lessons in enhanced design practices, which I eagerly applied to this project. Below are some illustrative A/B examples of the improvements made.
Landing Page
What Changed?
The bottom nav bar now includes words on under icons when selected for accessibility.
The CTA has only two words, 20px to 16px, and shorter text and an arrow icon to direct the user to take action.
Subheading moved from 20px to 16px for better visual hierarchy.
New font from Inter to Poppins to match a lighter feel for the user base.
Rounder picture edges at 16px to also match rounder font.
Onboarding
What Changed?
The navigation breadcrumbs at the top have a brighter color for more contrast.
Dropdowns available for faster onboarding of users.
Text fields have examples to show the user what to input in the the boxes (ex. Jane Doe).
Tertiary button is smaller and now a brighter blue to add some contrast and button size hierarchy.
Buttons placed higher up and spacing between buttons and bottom of screen moved from 42px to 70px.
Messages
What Changed?
There is a FAB in the bottom right corner to create a new message as opposed to the top section for better CTA and visibility.
Space theme background, which can be selected by the user is shown in the message background similar to home frame design.
There are two new icons in the search bar: profile icon for easy access and a hamburger menu for settings.
Profile Card
What Changed?
The profile card is darker with lighter and brighter text.
The size of the font went from 12px to 14px for better readability
There cards are not filled for cleaner design.
There are edit icons scattered throughout each section to easily change information.
User’s name is larger and brighter at the top with school clearly visible.
Home
What Changed?
Eliminated search bar to have space for an inspirational message for the user (i.e Keep Crushing Alex!).
Buddy icons are smaller and their usernames are revealed as opposed to names (note from students).
Cards text is at the top and brighter for accessibility.
Subheadings are spaced at 16px apart.
Similar course bubbles not have matching color.
Meetups are now in a card with time, name, and calendar icons
More spacing yields to a longer scroll frame, which familiarizes users with other pages (i.e resources) where the user will scroll to see everything.
So how did it turn out?
Lessons & Outcomes
From a creative standpoint, it was a fun experience envisioning the myriad of future possibilities for this application. Specifically, Studywavve’s impact on today's young adults was particularly intriguing; imagine an app that skillfully incorporates design elements similar to their favorite social media platforms, yet dedicated solely to the purpose of studying!
What if teens and young adults used Studywavve in the same way they used Facebook or Instagram? Would academic improve? These were just some of the many questions I asked myself upon completion of this case study.
As a student, creating Studywavve was incredibly valuable as it centered around enhancing my UI design skills and tapped into my artistic background. As a former educator, it was a concept I also felt passion about. The design process also provided ample opportunities to hone my UI skills by utilizing Figma, which I found particularly enjoyable.
Moreover, it reinforced fundamental concepts from my bootcamp such as selecting color palettes, manipulating images, working with typography, and more. I now feel thoroughly prepared for whatever project comes next!
Next Steps
If I were a true User Interface Design on this project, my next phases for development would include:
Begin an initial cycle of usability testing to validate the accuracy of design choices.
Develop iPad and desktop designs further.
Continue to iterate based on user feedback.