Hapori - a peer-to-peer study platform
2022
Roles: User Research, UX/UI Design
Tools: Balsamiq, Figma
Client: CareerFoundry UI Project
Team: Solo (designer, researcher)
Timeline of Two Months
Summary
As the way people work has changed over the Covid-19 pandemic, so has the way students study together. Students can work with peers to study and work on assignments in realtime as well as asynchronously, using tools that they already use but repurposed. Switching between existing apps and working around the constraints of tools not built for purpose, students may struggle with keeping track of and managing their study as a result.
Hapori aims to centralise and simplify the entire remote study process. From gathering resources, giving feedback on drafts and communicating with peers on shared projects, this web app will provide students with a single unified tool to study with peers in any environment.
This project allowed for the creation of an early mockup, but in a real life setting it would require more rounds of usability testing with students of different backgrounds and needs. Doing so would ensure the continued success of the product as remote learning continues to change over time.
Objective
Design a responsive web app that enables students to manage their study with peers, facilitate the sharing of resources and feedback, and provide a centralised means of communication on shared projects.
Design Process - the 5 Ws Method
What is the product? - A responsive web platform for peer-to-peer learning
Who is it for? - Students working remotely with others on shared projects and assignments
Why does it need to be created? - To help students manage their shared study on one unified, purpose-built platform, rather than having to retrofit existing products
What does it need to do? - Store study materials and resources, allow for feedback on individual work such as essay drafts, and messaging amongst students working on a shared assignment
Where and When will it be used? - Between classes, students in the same or similar course can help each other with tasks and assignments, share resources and feedback. It will also be useful for finding collaborators on projects. As a web tool built for remote study, it can be used anywhere.
“Students need a way to find peers that are working on the same tasks, assignments and courses, so that they can share resources and feedback with each other.
We will know this to be successful when students report using Hapori more compared to existing methods, such as Discord or Facebook Messenger groups.”
User Personas
A proto-persona was created to better understand the students and place them at the center of the design process.
Alex
Alex is a student enrolled in an online course who works part-time as a retail store manager.
As he juggles working with his study, Alex wants to find things like relevant supporting materials, advice from fellow students on studying efficiently, and receive peer feedback. He wants to connect with like-minded students to share his work and collaborate.
User Flows
From the above proto-persona, we can create the following three user stories to begin defining our flows:
-
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.
Prototypes
With user flows defined, initial designs were created as low-fidelity wireframes in Balsamiq.
These were soon followed up by the creation of mid-fidelity wireframes in Figma.
Visual Design
In order to further define and refine the visual identity of Hapori, two moodboards were created as a starting point before a full visual language system could be established.
After re-examining the key requirements of Hapori, moodboard one was chosen as it has the potential to give friendly, welcoming and reassuring feelings and hold a unifying green palette as the core colour without sacrificing usability in the process. Using colour as accents to enhance communication, rather than as mere decoration, was identified as an important point of focus for Hapori.
An initial visual design guide for Hapori was then developed and released. The guide establishes a set of design principles, patterns, and UI components that will be used to create consistent experiences across all breakpoints and future iterations.
View the guide here
Hi-fidelity Prototype + Animations
After finishing the mobile design, I started designing Hapori’s content for other breakpoints so that it can respond effectively based on different screen sizes and devices. Subtle hover animations were also added to further enhance user interactions for buttons and other input methods across the platform.
Polished Mockups
The hi-fidelity prototype was then put into different contexts through a series of mockups, illustrating different screens and breakpoints in action.
Reflections + Next Steps
What I’ve learned:
-
Creating a visual design system helped to ensure consistentency across screens, particularly as we began designing for different breakpoints.
-
Utilizing universal and common design patterns ensured that both usability is as clear as it can be for the end user, as well as helping to speed up design + development.
-
Creating moodboards can be helpful in contextualising the overall look and feel of an app before the hi-fidelity design is finalised.
Challenge:
The greatest challenge for this project was following a design process with little user testing and usability research. While universal design patterns and guidelines were adopted through the development process, it would have been hugely beneficial to follow this alongside user tests and usability studies to ensure the project was meeting the needs of our target audience.
Next steps:
Conducting the first round of usability testing to validate current set of designs, as well as identify any potential pain points that need addressing. Further screens also need to be designed in order to clarify and expand functionality in Hapori.