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.

Alex user persona






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.

User flow for meeting the criteria of the above 3 user stories.






Prototypes

With user flows defined, initial designs were created as low-fidelity wireframes in Balsamiq.

Userflow shown as a low fidelity paper wireframe.
Userflow shown as a low fidelity paper wireframe.



These were soon followed up by the creation of mid-fidelity wireframes in Figma.



Userflow shown as a mid fidelity wireframe.
“As a new user, I want to create a profile, so that other students can find me.”



Userflow shown as a mid fidelity wireframe.
“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.”



Userflow shown as a mid fidelity wireframe.
“As a frequent user, I want to be able to message other students, so that we can problem-solve together.”






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.



First moodboard for Hapori design.



Second moodboard for Hapori design.



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

Hapori runnning on an iPhone and iPad

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.

Button animation

Link to Figma prototype






Polished Mockups

The hi-fidelity prototype was then put into different contexts through a series of mockups, illustrating different screens and breakpoints in action.



Hi-fidelity mockup.
Hi-fidelity mockup.
Hi-fidelity mockup.
Hi-fidelity mockup.






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.