Studyr

Study together in confidence.

A UI Responsive Web Deign Case Study

Study together in confidence.

Studyr is a study web app that creates an online environment of learning and peer-to-peer collaboration.

Who is it for?

Students who are looking to connect with their like-minded peers in their field or related disciplines.

My Role

During the creation of Studyr, I was responsible for the UI elements of the design, with the help of my mentor, Tara-Lee York.

Research

Studyr User Flow

Project Designed Persona: Alex

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.

I started by:

Looking at study apps and websites to see what features were popular/necessary for the design.
Implemented those features into a user flow.

Low - Mid Fidelity Prototypes

Low-Fidelity

Going off of my user flow and key aspects I picked from my research, I hand-drew basic screens for the app.

** While Studyr is a responsive app, the majority of wireframes/prototypes were created first in mobile format. I decided to do this, because students are predominantly mobile-based, and I wanted to ensure that the all the key elements identified in my user flow could be enacted smoothly in the mobile app.

Mid-Fidelity

Space and rudimentary concepts were implemented in the mid-fidelity prototypes.

Design

And Then There Were Two

I created two mood boards for the app to showcase the two sides of Studyr that were identified in Alex's needs:

the zen/inspirational side: Alex mentions that he'd like an app that is friendly, welcoming, and reassuring.
the "be calm, study hard" side: student culture has become akin to coffee-culture, and I wanted to capitalize on the trend of studying with a cup of coffee in the library, or studying in a local coffee shop.

I decided to go with "zen inspiration" (Mood Board 1) for Studyr mainly to set the app/website apart from other study tools and to bring a quiet, driven, focused type of inspiration to any user's day.

High-Fidelity

I created my high-fidelity prototypes using colours inspired by my Mood Board 1, Style Guide (to follow), and detailed mock-ups.

Hand Gestures & Prototypes:

The click-through prototype of Studyr was also showcases the simple and intuitive gestures embedded into the different faces.

Consistency is key!

All decisions made about the design for Studyr were based on how I want users to feel: determined, relaxed, and confident.

Colours & Images

The colours for Studyr are inspired from forest/mountain scenes, emphasizing the tranquil feeling you can get from watching the mist roll through the trees.

Primary

26402A

00373C

FFFFFF

Use: as a logo colour, heading option, box/button colour.
Do Not Use: as a background colour or text highlight.
Accessibility: bold as a header to gain maximum visual contrast, pair with white font, make opacity 67% or less when used for a field box.

Secondary

FFFAF7

008080

Use: as a background colour, primary button background, text/image highlight, borders.
Do Not Use: Text, or button/search box text.
Accessibility: Make sure there is maximum contrast when using these colours.

Alerts

FF0000

Use as a highlight for text to showcase where something needs to be fixed (i.e. before uploading, wrong password, etc.)

UI Elements

Buttons

Ensure contrast. Use primary colours.

Fields

Ensure contrast. Use primary colours. Same size/shape on each page.

Text Field

White text box and coloured title. Primary colours. Alert colours are used here.

Icons, Logo & Illustration

Navigation

Ensure contrast . Smooth page flow. Transitions.

Social

Add friends. Talk to friends.

Notifications

Alerts. Simple.

Icons

Maintain the concept of student culture. Primary colours.

Logos

Maintain contrast. Used as "Home" button.

The colour and size of icons & logos can change to accommodate new updates. For the logo specifically, the coffee-cup can be updated to mimic new student culture.