How might we design a social application that promotes peer-to-peer learning when and where they want in order to increase motivation and engagement within a subject?
Role: UI/UX Designer
Scope: 3 months
Process: Lean UX Principles, User Personas, Information Architecture, Ideation, Wireframing, Prototyping, User Interface Style Kit.
Tools: Figma and Adobe Photoshop.
In order to increase motivation and engagement within a subject, users need a social application that promotes peer-to-peer learning when and where they want.
Problem Statement
Today’s students are finding it difficult to study and aren’t engaging with the material like they should. By allowing students to connect with others in their field to discuss topics, share insights, receive feedback, and collaborate, engagement will go up. Engaging with like-minded students in their community can also help alleviate the stress that comes from juggling studies with a job, family, illness, and etc.
The research for this project was provided for me. I transformed the data into the 5 W’s as a guide to help me make the target user come to life.
Research
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.
Meet The User
PERSONAS AND TASK FLOWS
Alex
Age: 33 years old
Gender: Male
Education: Working towards a Bachelor’s in History
Status: Engaged
“I love the idea of having the right support at the right time for my course, such as study materials and advice. I think teamwork will be key to my professional development, so I’d like to find like-minded students to collaborate on projects.” - Alex
Physical: Alex lives in a small house with his partner.
Social: His mentor told him about this tool. On weekends, he likes exercising at the gym and going out with his partner and friends.
Technological: As a retail manager he uses stock management software. His course is very text-based, but he’s used online tools in the past to help with other academic endeavors
Environment
Goals
Alex loves his subject, but also wants to complete his course as quickly as possible and gain marketable skills
Alex wants to find things like relevant supporting materials, advice from fellow students on studying efficiently, and receive peer feedback.
Alex would like to find like-minded students to collaborate with.
In order for Alex to reach his goals, I simplified each of his goals into tasks. To break it down more, I created a flow or a series of steps Alex would have to take in order to accomplish those goals through StudyTogether.
Information Architecture
Task 1
Alex wants to find supporting materials to help him master the more complex subjects in his course.
User Flow
Entry Point: Open App
Success Criteria: Save profile information
Task 2
He wants to connect with like-minded students to share his work and collaborate.
user flow
Entry Point: Open App
Success Criteria: Make A Post
Task 3
He wants a tool to keep him motivated and support his development as a student and beyond.
user flow
Entry Point: Open App
Success Criteria: Send A Message
I take these tasks and turn them into features. I use the user flows as a guide to understand the steps a user will need to take throughout an application in order to reach a goal or success criteria.
Wireframing
I enjoy going the traditional route with pencil and paper. I find that by messily jotting down anything and everything that comes to mind, it always seems to come together in the end.
I then take my paper ideas to Figma and created mid-fidelity wireframes. I enjoy adding icons at this stage because It feels more life-like, especially when brought to testing mid-way.
On this particular project, I was tasked to prioritize the UI while still designing with UX in mind. Here is StudyTogether’s style kit, including a few graphics that quickly identified the brand.
UI Style Kit
High-Fidelity Wireframes
Here are the final results of implementing the style kit.
Shown below indicates where each screen would break to fit the current device it is on. Examples include laptop and tablet.
Responsive Breakpoints
Conclusion…
StudyTogether Taught Me
The importance of spacing and grids. Prior to this project, I never focused on making making sure my elements were divisible, or worried about using the perfect grid size for the job. I had always enjoyed how my worked turn out, and never thought there was an issue because I had the mindset that I am a UX Designer first. Although, once I took the time to learn the proper techniques, it has made mine and potentially a developers life a whole lot easier. This project had made me fall in love with UI a little bit more. It is more enjoyable when the elements and icons fall into place because I took the time making sure everything was sharp and cohesive from the beginning.
