top of page

Let's Study

Let’s Study is a responsive web app that connects students in their field to discuss topics, share insights, receive peer feedback on assignments, facilitate peer-to-peer learning, get inspired, and collaborate in a fun and easy way.

Group 132_edited.png
Logo.png
iPhone 12 Pro Max.png

My Role

UI Designer

Tools

Figma

Paper & Pencil

Balsamiq

Skills

User Persona

User Flow

Wireframing

Visual Design

Responsive Design

Duration

Two months

Understand

The Problem: When studying in a field, finding a like-minded student community is a complicated and difficult process. Students need a way to engage with other peers, share resources, receive feedback, discuss topics, and collaborate on projects.

The Solution: A responsive web app that connects students online to facilitate peer-to-peer learning, support,
feedback, and motivation.

User Stories

  • As a user, I want to create a profile, so that other students can find me.

  • As a user, I want to find and connect with students studying my subject (or a related subject), so that we may collaborate.

  • As a user, I want to be able to message other students, so that we can problem-solve together.

  • As a 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.

  • As a user, I want to get peer feedback on my assignments, so that I can improve my classwork before submitting it to the instructor.

  • As a user, I want to know if someone messages me or shares something that I would be interested in reading or reviewing, so that I don’t miss anything.

User Flow

The next step was to create a user flow to document how a user might move through the web app. This step ensured that all necessary screens and elements would be included and that users could have a seamless experience.

Group 1.png

Wireframes

From there, I began sketching the necessary screens using paper and pencil.

image 7_edited.png

Grids & Low Fidelity Wireframes

Once I landed on a layout for each screen, I moved to Figma and created low-fidelity wireframes.
Grids were used throughout the design process to ensure visual consistency.

image 8.png

Grid Layout
Columns: 12
Gutter: 16 px
Margin: 6 px

Mood Board

With the UX of the app being clearly defined, I designed a mood board to explore visual directions for the app. The creation of a mood board was useful to define the style of the web app and was an important reference point throughout the visual design process.

Frame 3.png

Style Guide

Frame 3.png
Frame 3.png
Icons.png
Icons.png
ui elements.png

High Fidelity Screens

Subject dENEME 1-1.png
Arithmetic 4.png
Subject dENEME 1-2.png
peers.png
Subject 16.png
groups.png
Group Chat 2 alter.png

Responsive Design

I designed this app with a mobile-first approach and then adapted a couple of screens for different breakpoints. I included mobile, tablet, and desktop.

Group 132_edited.png

Click here to take a look at the interactive prototype.

Thanks for reading!

bottom of page