Background Image

quad

Making college less stressful.

Role

Visual & UX/UI Designer

Platform

Mobile - iOS
Desktop - Web

About Quad

Quad is Y-Combinator startup that helps students answer, "What do I need to get done?". By bringing together all their assignments and classmates in one place, students are able to get more done and ultimately succeed.

Overview

The problem:

The initial style of Quad was sleek and sophisticated. Individual flows were dark themed which made it obvious to the user that they were in a flow to complete a specific action. However, given the collaborative nature of the app, this dark theme did not evoke the sense of openness that was desired.

The Solution:

The design style was changed to evoke a sense of openness and sharing amongst college students. This was accomplished by using a lighter color palette, adding playful illustrations, and simplifying app flows.

Screenshot

Before: Adding an Assignment

Quad's previous design was sleek and sophisticated so many flows were dark themed. This was the flow for adding an assignment on Quad.

Pic
Pic
Pic
Pic
Long Forms and Inputs

One of the main issues with this flow was while the form seems simple at first, the form gains two additional inputs as the user fills it out. These additional inputs that appeared often shocked the user and made the form unnecessarily lengthy. In addition, the dark colors evoked a sense of exclusivity that conflicted with the idea that assignments are shared amongst classmates.

After: Dark to Light

With a new style direction, the flow was redesigned to be more simple and easy to follow with a light blue interface.

Pic
Responsive Forms

To address the perception of a long (and changing) process, the form was consolidated into 3 input fields that stayed consistent. This was accomplished by making the the Due Date input lead to an overlay hence the arrow present on the right side. This eliminated the number of taps by half and made the process shorter.

Pic

Creating Illustrations

Pic
Pic
Pic
Pic
Splash Screens

The splash screens are the first screens seen by a new user when opening the app. The goal is to get users to sign up so each screen needed to be clear without feeling overwhelming. Instead of showcasing app screenshots highlighting the main features, illustrations are used for fast comprehension and cleaner design.

Pic
Pic
Pic
Pic
Students and Mascot

These students give the users a sense of connection and makes them comfortable during the sign up process. Evan, the sloth, was created as a mascot to create a friendly atmosphere.

Campuses

School pride is an universal feeling that most students can relate too. I created these campus illustrations that encompassed the iconic buildings from each college Quad plans to launch at.

Pic

View the Live Website!

Take a peek and look out for Quad's upcoming launch!

Check out Quad