Project Brief:

How do we connect students online to facilitate peer-to-peer learning, support, feedback and motivation?

Timeline:

August-October 2020 (10 weeks)

Role:

UX/UI Designer: User Flow, Wireframing, Prototyping, Visual Design, User Research

The Design Process

processStudyHub.jpg

Problem

Despite the large amount of educational information available online, students still face trouble learning because they are juggling their studies with a job, family, illness, etc. Their busy schedules lead to both loss of motivation and engagement with their school subject.  

Design Challenge

Create a solution to enable busy, on-the-go students to connect and learn with their peers in a fun, interactive way.

UserFlow.jpg

Building the architecture

User flow: This was structured around the primary use cases. Users find and connect with other students, message them and collaborate and get feedback on assignments to stay motivated.

Development

Transforming research (user stories, key features, user personas, etc.) into a tangible UI and flow. From paper to high fidelity wireframes, the design process was iterative and done with a mobile-first approach. A select number of screens with key features are highlighted below.

 

Usability Test Insights

People had positive remarks on the prototype and were able to complete the main tasks, such as adding a friend and messaging them, but there were a few things to improve. The most significant one being the home page.

 

Problem

Make the home page clearer so that users are able to complete primary tasks right away.

Solution

Add “Connect with Students” and “My Profile” cards at top of home page.

usabilityphotopurple.jpg
 
 

Aligning with the user

The first moodboard created did not align with StudyHub’s user persona and targeted a younger audience than intended. I went back to the drawing board and did another iteration of the moodboard.

Design System

Final Mockups & Hi-Fidelity Prototype

mockupStudyHub3.jpg
mockup2_StudyHub.jpg
mockup3_StudyHub.jpg