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.
2019
User Interface Design, Visual Design
Figma
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).
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.
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.
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.
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.
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 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.