Loading

CL: Your Virtual Closet Interface design project - ist 331

Project Background

Subject Overview

Clueless, an iconic movie from the 90s, displayed the fashion forward protagonist (Cher Horowitz) using a high-tech application that generated a matching outfit based on items she already had in her closet. Numerous apps have tried to recreate this outfit generator, but all of them seem to be falling short in either algorithm, usability, or design. My goal is to create an entirely new app that would feature all of the right aspects of the 6 apps I will be pulling from. This app is relevant to lovers AND haters of fashion. It would allow people to decide on an outfit quickly or they can generate multiple outfits and choose.

Design Problem

The 6 apps based on Cher’s computer program lack the retro 90’s essence that is so present in the movie. Also, a few of them don’t allow you to take pictures of your clothes. Rather, they only allow you to generate outfits using items to purchase. One app, named #cherwears, allows you to create an avatar with your height and measurements, but it lacks an algorithm.

Goals

I’m trying to help the world become more fashion-forward and connected through clothes. My target audience would likely be college-aged men and women who are on the go and don't have time to sort through outfits until they find the right one.

Strategy

I will start my process of accomplishing my project goals by downloading and researching the apps I will be combining into one amazing app. From there, I will note what I like and dislike and begin to create my prototype on paper. From there, I will begin creating a usable prototype and employ multiple friends to interact with it.

Project Background

I was inspired to pursue this idea as my project for a few reasons. First, I adore fashion design and trendy clothes, which has led me to become an unofficial stylist for many of my friends. I’ve thought about how I can help more people help themselves and enhance their unique aesthetic through fashion. My other source of inspiration is simply the movie Clueless. The outfit generator used in this 90's film has never successfully been translated into an app, though many have tried.

Suggested Design Overview

Design: Retro 90’s aesthetic of Clueless, Simple layout, based off depop.

Edit: I felt that the 90's feel of the app looked more outdated than vintage. I redesigned the app to feel more modern.

Usability: User can take a photo of an article of clothing. Smart technology will be able to identify what it is, and attribute appropriate tags that will enable the algorithm to work For example, I will take a photo of a pair of vintage pants. Smart technology will tag it according to style, cut, era, color, season, fabric, and more: #retro #90s #red #corduroy #summer #fall #goingout #casual #buttons #gold Using these tags, an algorithm will produce an outfit based on the users specifications. Ex. User enters “Going out, 70s, gold, fall.” Algorithm will provide an outfit that matches these specifications. The user can either edit the outfit using similar items, or can just generate a completely different outfit.

Social Aspect: User can share outfits with friends and even plan to match if they choose. Can also be used as a catalog so that the user doesn’t catch themselves outfit repeating.

User Profiles, Personas and Scenarios

The three main profiles of users that I am marketing this app towards are: college students, young entrepreneurs, and fashion/costume designers. The demographic I'm mainly appealing to is college students, because they're extremely lazy but often go out and go to themed parties. Some design aspects that this population requires are social tools and smart technology that allows for quick integration of tags to categorize their clothes.

User Personas

Scenario for College-Aged Students

Low Fidelity Prototype

After a few of my friends that closely resemble my target audience viewed the app, some suggestions were made. First was that the plus sign in the top right corner was confusing (shown below the paper prototype). I intended for that symbol to indicate the addition of another item (lead to the camera app) but my users thought it would add accessories or shoes. I made the symbol a camera instead for clarity and moved the button to the bottom. Also, my users thought the app needed more features at the bottom. I added a discover page and a closet space.

Standards, Heuristics, and Golden Rules

  • User Control and Freedom (Heuristics): I think the idea of an “emergency exit” feature throughout my design would be a necessary asset for my app. Currently, my app has a photo-taking feature and users can exit the page using a “cancel” button but I’m wondering if an “x” would be more sufficient.
  • Help and Documentation (Heuristics): My current design does not have any option for a help or support section. I think adding this section would be helpful to a user who is experiencing usability issues and would provide myself with a better way to appeal to the user’s needs.
  • Permit Easy Reversal of Actions (Golden Rules): I think this particular recommendation would be very helpful to my user’s since it is easy to accidentally click on “autodress” and lose your current progress. My current prototype has no option to undo an action and I think the addition of this button would be beneficial.
  • Strive for Consistency (Golden Rules): The strive for consistency is probably one of the most essential strategies for effective HCI. I think good design is centered around a regular template and therefore should be incorporated into my prototype. My current prototype is somewhat consistent but as I expand the app I will make consistent design one of my top priorities.
  • Visibility (Norman): When I think of my favorite apps like Twitter and VSCO, I notice that the functions are visible and serve as a constant reminder of my options within the app. I have utilized this idea through the use of my menu bar which lists the functions of a home page, a discover page, a camera, a closet page, and a profile page. I want to keep this visible function bar on the bottom of the page throughout the app for maximum human computer interaction.

High Fidelity Prototype

I created my prototype using Adobe Photoshop. I'm pretty familiar with the program so I didn't run into that many technical errors. The challenges I faced creating the prototype centered around style, texture, and inspiration. I based my overall design and feel around the original application shown in the 1995 film Clueless. (Link below). I wanted to keep the authentic 1990's desktop feel for the application. I added a grainy texture to give the application a nostalgic feel.

I used a few apps to draw inspiration from. Instagram and Depop (Buying/Selling app) were of particular interest to my app since "CLCL" would be integrating a few key aspects of those apps. For the home page/newsfeed, I based this heavily on Instagram because I think it would be the simplest format for my users to understand and interact with, given the personas I outlined. The photo-taking page in my app is also similar to what the Instagram camera feature looks like.

After some usability testing, I decided to completely redesign my app and give it a more updated layout. I used vibrant colors for certain menu screens but kept the overall feel for the layout minimal since the contents of the app are so dense. I've changed the title of the app to "CL" instead of "CLCL", because some of my users said that the title was not easy to understand and was hard to say aloud.

Usability Testing: Task Analysis

Since my project involves the creation of an app, the process of completing tasks does not require the use of a mouse or a physical keyboard which eliminates many steps. The application's visible menu bar allows for the user to easily find the buttons that initiate the tasks I've outlined.

Iterating Design Through Usability Testing and Heuristic Evalutaion

Infographic for A/B Testing

As displayed by my usability testing, there was not a dramatic difference between the A Prototype and the B Prototype. The users displayed a level of competence that allowed their times to decreaqse after each trial. I predicted that each user would spend about 50 seconds completing the tasks I presented (sign up, take photo, view closet, auto-generate 3 outfits, view profile and likes.) My older participants had a little more trouble interacting with the prototype and had longer trial times as predicted. They spent time clicking random buttons until they understood what each button meant. My younger subjects were the fastest and completed their trials amazingly quick, no matter if it was A/B. The results of my study concluded that the font did not affect the user's interaction with the prototype. I incorporated recognition rather than recall into my prototype to allow all user's to know what their options are.

Credits:

Created with images by Anton Darius | @theSollers - "untitled image" • Jacob Repko - "untitled image" • Andrej Lišakov - "empty coathanger" • Cianna - "plaid yellow black pattern fabric textile tartan"

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.