Study with Me
A mobile app that connects students online and makes learning more effective and motivating.
Overview
A key component of learning is enthusiasm. Peer-to-peer learning can increase motivation and engagement with a subject. This responsive web app will allow students to connect with others in their field to discuss topics, share insights, receive peer feedback on assignments, and even find others willing to collaborate on projects.
This web app will allow 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.
Goal
Responsive web app that allows students to connect, share, and discuss their interests, insights, and tasks with regards to their studies, on any device.
Design Process
Wireframes
UI Design
Mockups
Prototype
1
2
3
4
5
Design Process
User Persona
This user persona defined who Study With Me would be designed for and helped me form a deeper understanding of the users' goals, needs, experiences, and behaviors. I used this throughout the project whenever I wanted to get the user's perspective and reconsider initial ideas.
Stressed
Concerned
Busy
CURRENT FEELINGS
OPTIMISTIC
LOVING
GIVING
MOTIVATIONAL
PASSIONATE
PERSONALITY
SNAPCHAT
SOCIAL MEDIA ACTIVITY
Find supporting materials to help master the more complex subjects in his course
Connect with like-minded students to share his work and collaborate
TASKS
GOALS
Alex wants to complete his course as quickly as possible and gain marketable skills
Find relevant supporting materials and advice from follow students
Find like-minded students to collaborate with.
AGE
33
Engaged
STATUS
Los Angeles, CA
LOCATION
A student enrolled in an online course who works part-time as a retail store manager.
ABOUT
Alex
USER PERSONA
As a new user, I want to create a profile, so that other students can find me.
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.
Finding like-minded peers
Collaborating with peers via messaging
Adding a post to share resources
Wireframes
Once I finalized the user flow, I adopted a Mobile-First approach to design, recognizing that a significant portion of users would access the application on the move. I began by sketching low-fidelity wireframes to outline the initial screens and refine their structure.
Next, I transitioned these sketches into mid-fidelity wireframes using Figma. At this level, the designs were detailed enough to enable basic prototyping and interaction testing, allowing me to navigate the user flows and identify potential usability challenges. Based on these insights, I made several adjustments to the screen layouts before progressing to the creation of high-fidelity prototypes and mockups.
“As a new user, I want to find and connect with students studying my subject (or a related subject), so that we may collaborate”
UI Design
UI Design & Style Guide
Study with Me is an app designed to make learning more effective and motivating. It connects students in virtual study groups where they can collaborate on tasks, share knowledge, and support each other. By fostering peer interaction and motivation,
Study With Me improves academic outcomes and creates a supportive community for collaborative learning.
Primary
Secondary
Neutrals
Use for primary buttons, text, frames and icons, and brand logo
Use for unable buttons, text, icons and frames, backgrounds
#666363
#666363
#D9D9D9
#FFFFFF
#BEBCFB
#FFE0B4
Colors
#6D68F1
#FF9705
Typeface: Nunito
Typography
Microtext | Regular 12px
Body 2 | Regular 14px
Body 1 | Regular 16px
Heading 4 | SemiBold 18px
Heading 3 | Regular 20px
Heading 2 | Bold 34px
Heading 1 | Bold 64px
Titles
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Body Text: Regular 16px
Microtext | Regular 12px
Body 2 | Regular 14px
Body 1 | Regular 16px
Heading 4 | SemiBold 18px
Heading 3 | Regular 20px
Heading 2 | Bold 34px
Heading 1 | Bold 64px
Titles
Iconography
Guidelines
Sharp outlines
2 px width
45 px circle
2 px margin
#666363
#6D68F1
#FF9705
Study With Me Final Mockups
Thank you for reading!
