StudBuds
A responsive web app for students and educators
Goal
Create a digital networking platform for students to help them connect online to facilitate peer-to-peer learning, support, feedback, and motivation.
Strategy
Studbuds allows students to engage with a like-minded student community when and where they want, and is therefore especially useful for those juggling their studies with a job, family, illness, etc.
Research Analysis
Who: Students who’d like to connect with fellow students in their field or related discipline will be interested in Study Together.
What: This will be a responsive web app that allows students to connect, share, and discuss their interests, insights, and tasks with regards to their studies, on any device.
When: Between classes, students in the same or similar course can help each other with tasks and assignments, and share resources and articles. It will also be useful for finding collaborators on projects.
Where: The responsive web app can be used anywhere; at home, on the bus, in the library, etc. Users can stay connected anywhere, as long as they’re logged in on a device.
Why: This web app will enhance the learning experience of students by connecting them with peers who share similar interests and have varying experiences and insights. It’s a fun interactive way to share and critique work, get inspired, and collaborate.
PERSONA
User Stories
- As a new user, I want to create a profile, so that other students can find me.
- As a new user, I want to find and connect with students studying my subject (or a related subject), so that we may collaborate.
- As a frequent user, I want to be able to message other students, so that we can problem-solve together.
- As a frequent user, I want to be able to view and share articles, videos, images, and other files, and write posts for other students to read, so that we can share knowledge.
- As a frequent user, I want to get peer feedback on my assignments, so that I can improve my classwork before submitting it to the instructor.
- As a frequent user, I want to know if someone messages me or shares something that I would be interested in reading or reviewing, so that I don’t miss anything.
Feature Requirements
- Notifications feature
- Search feature (by name, subject, location)
- Contacts/friends list
- News/updates reel
- Private/direct messaging feature
- Personal profile including image, subject, specialization, interests, location, favorite articles/books
Social features: following, sharing, liking, commenting, posting (including file upload for PDFs and docs, presentations, images, videos, links)
Information Architecture
Paper Wireframes
Initial wireframes of the Splash, Login, and Sign Up screens
Initial wireframes of the Home and Profile screens
Testing lo-fi Prototypes
I reached out to 3 potential users to provide feedback on the flow. The following insights were gained in the process of user testing:
- Extra features need to be added to the Home page
- Home page’s readability needs improvement
- There is no need to have “resources” in the nav bar
- Some features should be accessible on the Home page
Finalized low-fidelity Prototypes
Digital Wireframes
Grids and Gutters
Mood Boards
1
2
We decided to move forward with Moodboard #2. The project brief asked for the style to be engaging, fun, and interactive. Although moodboard #1 is more realistic and has a more sophisticated look that fits the academic environment better, I think the styling for the second moodboard can better serve an easy-to-understand platform. As a former educator and a current student, I have come to this conclusion that students want to have a more positive perception of their learning environment. They simply expect a product to be simple, encouraging and enjoyable in use. The goal is not to make my user interface as realistic as possible, the goal is to increase users’ engagement and improve their academic performance.
The virtual cartoon characters bring the element of “fun” to the app.
The bright colors and the engaging graphics encourage users to interact more with the app.
It sets a less pressured mood and creates a pleasing environment for users/students to feel connected, amused, and delighted.
- Its mood brings an excitement and encouragement voice into user experience.
Color Palette
The color palette establishes emotions that we’d like to convey with this app. "Turquoise means open communication and clarity of thought" which is exactly the main purpose of this app. Middle blue is known as a color that recharges our spirits during times of mental stress and tiredness. A combination of blue and yellow evokes a feeling of peace and calmness. “Yellow” evokes happiness and optimism which is great to encourage users. There is also a small amount of “Light deep pink” used to uplift energy and also using a warm color can create a more welcoming app.
Imagery
The platform recommends pictures that evoke positive energy and are relevant to the academic setting with people/students in them conveying a feeling of success.
Style guide
Gestures and Animation
I created page scroll animations to show how we intend our users to interact with Studbuds' web app.
To simulate the real experience of interacting with our app, I incorporate interactions and gestures into my prototypes.
RESPONSIVE Design
I selected unique screens to make responsive and created wireframes for different breakpoints.
