Top 100
PROJECT OVERVIEW
Project Type: UX Design and Research, Visual Design, Interaction Design, Web Design, Systems Design, Illustration
Client: Passion Project
Awards: 2016 ADDY'S, Digital Creative Technology - Silver
Software: Axure, Photoshop, Illustrator
Top 100 was my good ole college stab at the “Clueless closest.” This project was part of the curriculum in my Interactive Web Design class in the Graphic Design program at Michigan State University. Before beginning this project, we were given a selection of readings about information architecture and accessibility. We were challenged to pick a subject and design a digital experience where the data could be filtered, sorted, searched and edited with consideration to standard of accessibility and IA best practices.
As a first taste of the world of UX, I wanted to tackle a study of systems and categorization with a fashionable twist. Selecting a collection of 100 items, in my case 100 tops from my closet, I wanted to find a unique want to filter, organize, and categorize the garments. While looking at examples of categorization studies, I saw many radial graphs and was deterred from this solution because the form of the object was lost.. Because I love clothing and have a story for every piece in my closet, I knew from the start I wanted to find a way to "see" all the tops and create an iconography to serve as part of categorization vocabulary.
TARGET USER
The target user for Top 100 was based off of myself. So in the context of this experience, the target user would be a tach-savvy fashionista who has a passion for building a unique wardrobe with a story. This user would be someone who comfortable using mobile and web based interfaces, knows their way around a camera (to document garments), and has a deep understanding of fashion.
MY Role: Research and Design
Before beginning this project, we were given a selection of readings about information architecture and accessibility. With no previous UX research experience to speak of, I simply used the information readily available (namely the articles we were assigned to read, watching Clueless, and reflecting inwardly about the kind of experience I would want) to me to inform my design strategy.
Process Work
Below you will see the initial thumbnail sketch that lead to the final deliverable. Once I had narrowed down my collection to 100 tops (and got over the shock of how much clothing I really do have), I determined the categories of filtration. The first would be top type: jacket, t-shirt, sweater, vest, etc. Next would be pattern: Pattern or solid color. These would be the two "visual categories" and the rest would be accessed through interaction.
I was inspired by my favorite mindless microsite game: doge2048. The microsite is extremely minimal, a singular page, no hyperlinks, and a limited color palette. For the Top 100 site, I kept it one page with a mere three drop-down options, no hyperlinks, ads or information. After a stint of online-shopping for a friend's birthday, I was reminded of Target's "Quicklook" feature on their website (a small pop-up window giving a quick description of the item and a high resolution photo) and thought this was the perfect way to create the garment profile and incorporate an element of storytelling. Each garment would have an actual photo, a list of the metadata, as well as a short story.
Again inspired by the information architecture of Target's website, I utilized collapsable drop-down buttons to create a dynamic filtration system for the user. They could filter or sort the data in a variety of combinations, in addition to being able to submit their own garments to be incorporated in the mix with the "add" feature.
