Fashion App Design Iterations

Fashion App Design Iterations

Fashion App Design Iterations

In March 2014, I attended a UX Design Workshop taught by Sheba Najmi, former UX Designer at Yahoo, and hosted by the Cal Design Lab and College of Environmental Design at UC Berkeley. During the course, we built a product from start to finish in a small team. Our process is outlined below, along with some pictures of our samples:

  1. Affinity mapping to brainstorm ideas for a product
  2. Create a persona of a typical user who would interact with our product (“Wendy”)
  3. Create a storyboard of their interaction with the product
  4. Build a paper prototype of the product
  5. Conduct usability tests with the paper prototype
  6. Construct a high-fidelity wireframe poster with modals for class presentation

 

Our product is a website and search service called closet-it. Closet-it keeps track of the items you manual enter that you currently own (“Have”), along with making suggestions based on what others purchased along with that same item (“Need”), and items you may have seen on other sites and favorited (“Likes”). With a very simple interface, these three categories are tabs that can be selected from the main page, and each category will contain icons of the articles of clothing that can be selected. Once selected, closet-it will make suggestions of pairings to that one item based on items already in the ‘have’ and ‘need’ categories. More details can be seen below in our paper prototyping.

 

From our affinity mapping and brainstorming ideas, we estimated that the average user was a young woman, just graduated from college, and she has two problems: she can’t remember what she already has, and she can’t keep track of what she needs to complete outfits. We created a persona, Wendy, who has an upcoming job interview, and uses our product to meet her need of creating the perfect outfit and getting hired. Here is an example of our story board below:

Storyboard

 

Here are examples from our paper prototype, along with sample questions from user testing:

Paper Prototype 1 Paper Prototype 2 Paper Prototype 3 Paper Prototype 4 Paper Prototype 5

 

For our final group presentation, we created a high-fidelity wireframe poster, taking into account color selection and user interface. The website would continuously scroll, with a gradient near the bottom signaling to the user to keep scrolling for more options. If the user selected an item, the item would appear on the left, alongside the current item the user already has, and a modal would appear with information about the item and an option to ‘favorite’ or ‘buy’ the item.

 

Large Poster Large Poster with Modals