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 a study of systems and categorization. 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.
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.
Because each garment was "layered" with data, I wanted the printed outcome of this study to reveal these layers. Inspired by overhead transparencies, I decided I would use acetate and print one category per page in a different color. I would layer the pages on top of each other and bind them into a book. When the viewer opened the book, they would see a ten by ten grid of the garments with varying colors and opacities depending on their status in each category. Much like a cross section of a specimen, the viewer would get a layer by layer understanding of the metadata of each garment; while also putting it in the context of the whole collection.
For the web version of the data, 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.
Overall, both the print and digital offerings were successful in presenting a dynamic and interactive solution to filtration and categorization of a system.