OutFIT

PROJECT OVERVIEW

Within the first 7 weeks of my apprenticeship at Intrepid Pursuits in Cambridge, MA, I collaborated with a team of 8 people including 1 Project Manager, 3 Web Developers, 3 iOS Developers and 1 other Designer to create a web/iOS app called OutFIT.

OutFIT is an app that helps you manage and minimize your wardrobe by keeping track of what clothing items are in your closet and how often you wear each one; it also allows you to mark particular items to be donated. By providing those functionalities, OutFIT aims to enhance its users organization skills as well as to encourage their pay-it-forward mentality.

BASICS

  • Duration: 7 weeks

  • Team: 9 membered multi-disciplinary team including Design, Web Developing, iOS Developing and Project Managing.

  • Deliverables: Wireframes, App Mockup, MVP of OutFIT

  • Tools: Sketch, Photoshop, Keynote

UNDERSTANDING THE USERS

Ideas that initiated the birth of OutFIT originated from the 2 main personas. They then served as the mental models that dictated the design decisions throughout the whole process.

APP FLOW

Based on conversations with our client, scoping exercises and timeline considerations, below is the proposed app flow of OutFIT. Thee are 5 main flows that Designers put focus on when we ideated and created wireframes:

  1. Sign-in/Sign-up using Google credentials.

  2. Adding an item into the wardrobe.

  3. Viewing detail of an item from the wardrobe.

  4. Marking an item for donation from the item detail view.

  5. View Profile - Log out

WIREFRAMES

MOOD BOARD

The first step we took to initiate the visual stage of the project was to propose to our stakeholder a mood board that portrays the minimalistic and fashion-forward characteristics of our main user personas. By bringing in serif font as well as clean, crisp elements, we wanted to bring about the editorial and simple feels to this app.

STYLE GUIDE

Taking inspirations from the approved Mood Board, we created a singular, universal Style Guide with details on visual and UI components that could be applied across both web and iOS platforms for OutFIT

HIGH FIDELITY MOCKUPS

Minimalist wardrobe

The first screen that users will be landing after signing in will be this clean and simple layout of their wardrobe. The top tappable category filters allow users to narrow down the populated grid below. Item tiles have prominent photography, item name and simply the numbers of times it has been marked as worn. The FAB for adding item into the wardrobe is located within the easy reach thumb zone.

To wear or to spare

This page was designed for 2 main functionality: to mark an item as ‘worn’ or to mark it to mark it for ‘donation’. Also, users can easily see the dates that the item was added to the wardrobe as well as when it was last worn. Tag on top of image provides category information. Users are also allowed to edit the data if needed to.

Profile Page

Informations such as email address, full name and profile photo are pulled from users’ Google account credentials. The main functionality of this page is to allow users to log out of their account if needed.

Add them in

The item builder page allows users to add clothing pieces into their virtual wardrobe. The functionalities include adding titles, descriptions, choosing categories, adding item photo and save.

© Jason Ma