Study together

Where education meets collaboration

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

DECEMBER 2018 - FEBRUARY 2019

MY ROLE

UI DESIGNER, INTERACTION, VISUAL DESIGN

APPROACH

DESIGN THINKING

 

TOOLS

FIGMA, INDESIGN

THE CHALLENGE

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

MEET ALEX

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

ALEX NEEDS

A way to connect with other students and find support as he works through his course.

USER FLOW AND SKETCHES

Taking my learnings from user stories and the brief, Study together’s user flow was created and turned into the first initial sketches.

GRIDS AND GRAYSCALE MOCKUPS

I chose to work with a 12 column grid with an 8px gutter to try and keep with the rule of 8’s so as the grid scaled up, it would be even every time. This rule also add flexibility to the content blocks as they are scaled up.

VISUAL HIERARCHY AND DESIGN PATTERNS

At this stage I refined my designs using atomic design principles and existing design patterns such as Google Material Design, Facebook, and Instagram. With these patterns I took the best elements of each and made sure that they worked cohesively for my end user.

MOOD BOARD

At this stage I refined my designs using atomic design principles and existing design patterns such as Google Material Design, Facebook, and Instagram. With these patterns I took the best elements of each and made sure that they worked cohesively for my end user.

STYLE GUIDE

I took inspiration from my mood board and built the style guide pulling the vibrant colors and personality from it to create the overall feel of Study together.

Colors

Light Teal

#89C5C

137,197,204

Dark Teal

#69A1AC

105,161,172

Red Orange

#FF4133

255,65,51

Cinnabar

#DB2721

219,39,33

Blue

#2B44FF

43,68,255

Persian Blue

#1F28CF

31, 40, 207

Black

#000000

0,0,0

White

#FFFFFF

255,255,255

Greenery

#88B04B

136,176,75

Chetwode Blue

#8991DC

137,145,220

Sunshade

#FF9B21

255,155,33

Tango

#E87613

232,118,19

Typography

Alfa Slab One Regular

Study together Logo Typeface

24pt

Avenir Book

Avenir Book is meant to be a paragraph and body copy font at a 20px line height

14pt-16pt

Avenir Heavy

Avenir Heavy is used as a headings font in instances of overlays and tabs

16pt-24pt

Avenir Black

Avenir Black is used as a headings font in Titles and cards

12pt-16pt

UI Kit
Illustrations: Humaans

Humaans by Pablo Stanley can be used to add personality and color to Study together. This pack provides an element of play with diverse features to customise each person and allows for users to be able to identify with Study together.

Icons

Study together’s design pulls from google material library which allows for a certain familiarity and standardization. After research of other apps on the market and their use of icons, I have decided to not deviate too much from Google’s material design standards as they are clear and familiar to users through their size, shading, and shapes.

INTERACTIONS

After defining the styles, I built the screens and created the personality of Study together making sure each one flowed effortlessly into the next.

RESPONSIVE SIZES

Taking the 12 column grid, I doubled the gutter size to 16px to give the design a more natural feel.

STUDY TOGETHER FINAL SCREENS

AND FEATURES

NEWS BOARD

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

Collaboration and sharing resources is key to learning new skills. Study together provides users with a central News Board allowing them to share new work or articles with ease.

SIGN IN AND UP

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

Study together is designed to be a friendly and inviting environment for students and mentors to interact in. Allowing new users to sign in and up with ease makes for a important first impression.

PEER REVIEW

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

Peer feedback is a key feature of Study together so its important that when collaborating users can quickly access their progress with other students with ease. The pie chart icon in the upper right corner of each card indicates feedback to the user whether or not their work has been approved by others and is good to be turned in.

CHATS

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

Group and individual chats provide spaces for ideas to flow and questions to be answered. Study together combines these elements in one neat area.

PROFILE

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

For the users profile, study together combines a record of a users posts and friends with the addition of tasks so that through collaboration users can keep track of any work or edits they need to make.

FINAL THOUGHTS

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 it. 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 everyday 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 imagined.

©2020 by Ariel Blackman

  • Ariel Blackman's Instagram
  • Ariel Blackman's LinkedIn