Project Overview

The Brief

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.

My Role

UX Designer
UI Designer

Tools Used

Adobe XD
Illustrator &
Photoshop

Start decoration

Time

Two Months

Objective

Girl saying hello

Connect students online to facilitate peer-to-peer learning, support, feedback and motivation

Persona

Alex

A student enrolled in an online course who works part-time as a retail store manager.

Illustration of persona Alex

Goals

Start decoration

Alex juggles studying and working part-time. He loves his subject, but also wants to complete his course as quickly as possible and gain marketable skills.

To help with this goal, 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.

Start decoration
Start decoration

Tasks

Start decoration

Alex wants to find supporting materials to help him master the more complex subjects in his course.

He wants to connect with like-minded students to share his work and collaborate.

He wants a tool to keep him motivated and support his development as a student and beyond.

Start decoration
Start decoration

" I love the idea of having the right support at the right time for my course, such as study materials and advice."

User Flow

Wireframes

Wireframe development from low to high fidelity

MoodBoards

I created two mood boards to explore the energetic vibes in two directions. I choose the Option 2 because the orange colour and bright modern illustrations would reflect the vibrant and energetic vibes that the app is trying to evoke.

OPTION 1

Moodboard 1 with purple hues

OPTION 2

This is the moodboard I decided to use with the vibrant hue of orange

Moodboard 2 with vibrant hue of orange

Designing for different breakpoints

Breakpoint GridsBreakpoint design for Study rooms

Final Screens

HOME

Home screen shot of returning userHomescreen shot of new user
Illustration of new user

The home screen gives a summary of all the activities that can be done for a New User

SCREEN

Illustration of persona Alex

While a returning user will be able to access their newsfeed from the home screen in chronological order.

SEARCH

Screen image of Search for Study rooms

Search For Study Rooms

Search For People

other screens

Typography and Colours

Style Guide

Style guide

I finally created a style guide to document all the style decisions for this app. Please find the link below.

GO TO STYLE GUIDE.

THANK

Girl saying hello

YOU

Thank you so much for staying with me through the case study. Please feel free to get in touch if you have any feedback or just to say Hi.