Making college less stressful.
Visual & UX/UI Designer
Mobile - iOS
Desktop - Web
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.
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 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.
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.
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.
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.
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.
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.
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.