Study Together

Supporting students through all steps of online learning through an encouraging and supportive environment.

View project

Overview

Studying online can be isolating. There is often very little interaction between other students and mentors so it can be difficult so stay motivated. Study together is a web-app that creates an inviting space for students to feel supported as they are going through their coursework by creating a collaborative environment for students and mentors to share current work and receive feedback.

Timeline

2019

My Role

User Interface Design, Visual Design

Tools

Figma

Students need a space to connect online that’s supportive and allows for peer-to-peer learning and feedback.

This project was posed to me as a study web app that needed the UI fleshed out. I was given some basic information regarding who my user was and I defined their motivations for why they would be on this app and the features that would be most useful. I felt connected to the brief as I have a lot of personal experience in online learning and felt I could relate to my end-user a bit better. How might we make learning online be collaborative and not isolating? Taking my learnings from user stories and the brief, Study together’s user flow was created and turned into the first initial sketches. I wanted my app to feel familiar and intuitive to my user and was inspired by the functionality of Google Drive, Instagram, and Facebook (or how I looked at it, as a student a lot of the same places I spent my time).

Visual Hierarchy and Design Patterns

At this stage, I refined my designs using atomic design principles and existing design patterns from Google Material Design, Facebook, and Instagram. With these patterns, I adjusted my user stories to better meet some of the use cases my persona might run into and took the best elements of each, and made sure that they worked cohesively for my end-user. Some features they were looking for was a general news board, simple onboarding, a peer review section, a messaging function, and a Instagram inspired profile section. After some inspiration research, the next step was creating a mood board. Through this process, I collated various visual elements that would ultimately make up the feel of Study Together. I chose the Humaans illustrations by Pablo Stanely to add personality and color to Study together. This pack provided an element of play with diverse features to customize each person and allows for users to be able to identify with Study together.

Let's Study Together!

Study Together attempts to fill the gap that online learning has created by creating a fun, collaborative, familiar environment for students to share their learnings and grow from one another. While its design is inspired by some of the most popular social media apps on the market, the experience and visual design is unique in how it allows online students to interact with one another.

Initial mobile sketches

Students need a space to connect online that’s supportive and allows for peer-to-peer learning and feedback.

The feature layout is built with flex, like the hero layout. Don’t like our typesetting? You can update every detail in the typography section of the Style panel.

You can also add spacing between the heading and paragraph, swap a video in for the image, or add a button. Just make sure to drop your button into the div block that contains this content.

Mid-fidelity grayscale mobile mockups

Visual Hierarchy and Design Patterns

The feature layout is built with flex, like the hero layout. Don’t like our typesetting? You can update every detail in the typography section of the Style panel.

You can also add spacing between the heading and paragraph, swap a video in for the image, or add a button. Just make sure to drop your button into the div block that contains this content.

Study Together's Profile Screens

Let's Study Together!

The feature layout is built with flex, like the hero layout. Don’t like our typesetting? You can update every detail in the typography section of the Style panel.

You can also add spacing between the heading and paragraph, swap a video in for the image, or add a button. Just make sure to drop your button into the div block that contains this content.

Some things I learned,

Study together is the product of my education journey. I’ve experienced gaps in online learning and wanted to come up with a web app that addressed the different challenges that come with online learning. I have always wanted an all-in-one space that provided me a way to share my ideas, have my work reviewed, and create a community among other students. Study together brings the best parts of apps that students use every day to communicate and collaborate through and brings them together in one seamless package. I am proud of the direction it has taken from the user stories to its atomically designed screens. The end result is an inviting space to collaborate on work and ideas. Some future improvements I would make would be to include a video chat function and to continue to refine the news board to maybe include more functionality as needed. As a whole, designing Study together is the product of a year's worth of work and to reflect on everything I have learned in the hopes of improving another person's product journey has gone beyond anything I could have hoped for.

Want to see more? Check this out:

Tea time anyone?

Like what you see and want to have a cup of tea? Lets chat! I'd love to help you with your next project.
Let's chat

Want a copy of my resume?

I've had the opportunity to work with some awesome companies. Please feel free to take a copy of my resume if you would like to learn more.
Download resume