Project 2: Lookiloo


The following recounts my design of a new social shopping web experience entitled Socialite Lookiloo for a fictional angel investment group. Following user surveys and interviews, a low fidelity prototype was created and reviewed. Next, a high fidelity interactive prototype was created using the Adobe Flex framework and included features deemed desirable by users. A usability test was conducted and the results showed that users were happy with the new interface and satisfied with the new shopping experience.

Introduction Meet Lookiloo

An angel investment group has decided to fund an effort to create a new social clothing shopping web experience for women called Lookiloo. I have set out to actualize said desire.

Design Requirements How It's Going Down

The design of Lookiloo requires that a new social clothing shopping experience be created in a web interface. The interactive prototype should have some basic code written for it. The design process should apply principles of good user experience design and evaluation of prototypes and evaluate throughout the design process any design flaws or successes. The design will stick to the motto: "Give the user: what they want; how they want it; when they want it."

Understanding the Problem How do we shop online?

The following section outlines the research for understanding how web users currently shop for clothing online. To better understand what features the new interface should implement a survey of web users was conducted, and a task based user observation of a web shopping user was conducted. The aim was to understand user desires, expectations and experience of web clothing shopping. These were used to drive prototype features.

Site Interface Design Review

A review of the top five most visited US clothing shopping sites (as reported by was conducted. These included Gap, Inc., ZapposVictoria's SecretH&M, and Forever 21. Research was focused primarily on the women's shopping experience.

Generally, all of these sites include a "Shopping Bag" or "Shopping Cart" where the user can add items they wish to purchase where they can later "Checkout" and buy their items. Clothing items are listed in categories on the left side of the page or along a menu bar. The user is expected to sort through the items to find what they are interested in. Often, the sites offer the user help in finding trending styles or fashions into "look books" or list the new arrivals or sales. These items are grouped into a single page where the user can sort through, piece together and add them to their shopping bag. All these sites also require a user account with which user information like name, shipping address, email, and payment information are saved for later visits and shopping transactions. These sites also include a wishlist where once a user account is set up, the user can save items they wish to buy at a later time.

All of the sites offer the user a "Quick Look" option when looking through items. The "Quick Look" allows the user to check out a particular items details without leaving the main listings page. From this page, the user gets the key details from about the item and user can pick a size and add it to their shopping bag/cart. Often users can select different colors of the item as well and preview it in pictures on models.

Gap and Zappos appear to be the only site implementing social features (reviews and item ratings) directly on their site. The other sites, however, offer the user the ability to share the items by email or to popular social networking sites like Facebook, Twitter, etc. 

Interestingly, H&M is the only site that does not allow their users to buy clothing online--but they do offer a very unique shopping experience. User's can shop for clothing and then "try the clothing on" onto computer generated virtual models. This allows the user to group items into outfits which they can share and save. Saving requires the user to set up a user account. User's can select a new virtual model (perhaps to find one that looks like the user), change the background, and rotate the model to get a semi rear view of the clothing as well. The outfit total price is also shown to the user.

Survey Results 

The survey was devised to inquire with users about other popular clothing shopping websites they frequently visit, may be satisfied with and are therefore familiar with. It also sought to understand whether users enjoy their current web shopping experience, whether or not they felt satisfied, and if there were any other specific concerns they had.

The survey was shared on the San Francisco free gigs page, sent out via my Facebook account, and shared by several friends. It received six responses from users primarily in California.

The following is a list of highlights from the survey responses:
  • A majority of the online web shoppers in this survey were females in their 20s.
  • All users have purchased clothing online indicating that they only buy clothing online once a year, presumably opting to physically buy clothing in stores instead.
  • Popular online sites were Forever 21, Target, and Victoria's Secret.
  • Users indicated they enjoy being able to collect all their items and see them displayed easily.
  • One user indicated wanting to be able to buy items in three clicks (like Groupon)--possibly desiring a user account that sets defaults for sizes and purchase information
  • One user liked the website's ability to create outfits and share them with others.
  • Users all wished there was an easier way to know whether the sizing of items would truly fit them.
  • Two users desired a virtual fitting room.
  • All users try clothing on in a dressing room before purchasing when shopping at store in person.
  • Regarding the way they look in different clothing, all users said they would value the opinion of their friends and most users indicated they would value the opinions of others
Primary Users

From's page ranking of popular web shopping sites, it appears females are the primary online web shopping users. Gleaning from the site target demographics, it would appear these female users are age 20-30 something.

User Scenario Kyra M's Adventure to Buy "Cute-fits" for Upcoming Weekend City Trip with Friends

The following is a possible user scenario of Lookiloo that satisfies the above expected user experiences and survey results:

Kyra M. is a 23 year old young professional living in California's Bay Area. She works for a popular outdoor hiking brand as a junior marketing director. A friend of Kyra's, living in the heart of San Francisco city has invited her to come visit in two weeks for a weekend out on the town dinning, dancing, and catching up. Feeling that her clothes are a little outdated, she decides to browse her favorite clothing websites to see if she can find a few outfits for the upcoming trip.

She recalls hearing about a site called Lookiloo and decides to check it out. Upon arriving she decides to sign up for an account. She provides the usual contact information and then is asked to provide some unique info. The site asks for her dimensions, head, waist, arm, shoulders, chest, hips, legs and shoe size. Intrigued, she quickly measures her dimensions with a measuring tape from her sewing kit. She also inputs her credit card information but the site ensures her she will not be charged until checkout. Lastly, the site shows how to take a picture that will be uploaded to try clothes on virtually. Kyra calls her roommate over, has her snap the picture, and uploads it to the site. She adjusts a few widgets on the image to indicate where her head, shoulders, waist, and feet are located in the image. The mannequin image now changes to an image of herself.

Now she can shop! She clicks through the categories and hovers her mouse over the items. Details about the price, quantity available, and product description are displayed. A rating shows the popularity of the item. She clicks the item, a blouse, and sees it appear on her photo of herself she uploaded. "Hey! I like that," she exclaims. She clicks the skirts category and tries to find a matching skirt. A box below provides suggestions of popular skirts that would match the blouse. She clicks one of the popular skirts and it displays on her user image. "Cute! And in my price range!" she states verifying the outfit price displayed above her user image. She finds a pair of shoes and jewelry and decides to save the outfit and create another. She clicks the Add to Closet button and the outfit is moved to a panel on the right with a total price. 

She adds a few more outfits to her closet and the closet total price is displayed. She adds these outfits to her Shopping Cart and decides to remove one of the items she didn't really need. The final price is displayed and indicates the total plus shipping. Kyra wants to know if her friend likes one of the outfits so she goes back to her closet and clicks the outfit. Her user image refreshes with the outfit and she clicks the Share button. She is presented a few options (email or social networking sites) and she decides to share the outfit on Facebook. The image of her in the clothing is then shared to Facebook. A few minutes later a friend messages her and tells her that it looks great and to add her as a friend on Lookiloo.

Satisfied, she clicks the Checkout button and a prompt pops up to verify the Shopping Cart items, the price total, and the shipping address. Satisfied, she clicks OK and decides to keep playing around on the site, looking and "trying on" other outfits her other friend has already put together. She gives the outfit a thumbs up by clicking a thumb icon underneath the outfit and adds it to her favorites by selecting a heart icon next to the thumb.

From this scenario, we see that the user maintains the familiar online clothing shopping experience, but the new user image experience gives the user more confidence that they will like the way they look in something they've never tried on. It also allows users to get input from friends and others on how they look.


The following section outlines the evolution of prototypes. I first began with a low fidelity wireframe created in Balsamiq and moved on to a higher fidelity interactive prototype created with Adobe Flex.

Lo Fi Wireframe 1
I really desired to create a simple, quick, and easy shopping experience that allowed users to see exactly how they would look in their clothing (something similar to the H&M Dressing Room but instead with an image of the actual clothing on the user). Everything would be on one page and maintain a simple layout. No need to go through pages upon pages of items. I would allow users to quickly search through categories of clothing in the same familiar side bar.

Key to the experience would be a user image that fits all the clothing in the sites inventory directly on the user. This would require a crafty algorithm, but I think it is possible if users provide all their dimensions and the site maintains dimensions of all their items' dimensions. Users would be instructed to take a picture in a specific way and then size that image with widgets that identify their head, shoulders, waist, feet, etc. Items sizes (e.g. small, medium or large) whose dimensions fall within the user dimensions would automatically be selected unless desired otherwise. A default mannequin or models could be selected otherwise. The user image would not be shared unless given approval by the user.

Categories of items selected would be displayed in an item category box where users can hover their cursor over for a more detailed item tooltip (similar to the familiar Quickview). The user could then add this item directly to their user image. As the user adds and removes items from the outfit, the total price of the outfit updates. Once satisfied, the user can either purchase the outfit directly or add it to personal "closet" where it is saved for others to view. 

Social features would be implemented as like buttons, reviews of items, and opinions on outfits. Ratings would allow particular items and outfits to be displayed for all users to purchase. An algorithm would be needed to display popular looks or items that match the style of the user's currently displayed outfit. The user could also have friends in a buddy list that allows them to see outfits their friends have put together and give opinions of. Lastly, users would be able to share their outfits to social sites or via email.

Interactive Prototype

After the wireframe, the interactive prototype was made with Adobe Flex. The project file lookiloo.fxp (an original name...) is included as an attachment at the bottom of this page and the application is displayed below--right click it and select View Source Code to review the application code. 

Given initial feedback, it was decided to add the familiar Shopping Cart and Checkout buttons. Users may not desire to purchase an entire outfit, they may want only specific items and the original design did not provide that option. This first prototype lacks the ability to add only those items in an outfit that are not currently in the shopping cart--in other words, all items in an outfit are added to the shopping cart regardless if they are already there.

In the interactive prototype, users can upload an image--ideally for this first prototype, the user should take the photo such that their silhouette matches the default shown. An example of such a photo to try can be found here.

Custom tooltips provide more in depth item details when the cursor hovers over an item.

A "Share to Facebook" button was included that takes a snapshot of the currently displayed outfit, saves it to a *.jpg on the server via PHP, and publishes it to the user's Facebook page. The user can get feedback on the selected look from their Facebook friends and decide to purchase the outfit after. Given the lack of time and unfamiliarity with designing the back end of a social database, dynamic social features (such as reviews, opinions, and ratings) were removed and the dropdown box and sub category descriptions in the tree selector do not currently work and users were told so in the user testing.

All clothing pictures and descriptions were taken from ModCloth and Urban Outfitters without permission. Photos were edited to be transparent when necessary.

Usability Evaluation

Two female users were recruited to evaluate the ease of use of the Lookiloo interactive Flex prototype. To understand the effectiveness of the interface design, a usability test was conducted where the users were told to create three outfits and purchase all the items in two of them. User images of the users were taken and the testers were shown where they were saved on the computer.


Prototype testers were given a printed out document with the following scenario before their interaction with the new prototype:

You have been recruited to test an exciting new web shopping experience called Lookiloo. We have already registered a user account on the site for you and asking that you help test the new interface and design. The new design is an early prototype, so do not focus on the look, but rather think about the interface design. For the usability test, we ask that you use the prototype put together three outfits and purchase two of them. After the test, we will ask you a series of questions. There are no wrong answers. Please be as honest about what you think about the design and your experience with it.

User Tasks

To evaluate the prototype usability, user's were given a printed out document with the tasks below and asked to complete the following tasks while talking aloud about their thoughts:
  1. Upload your Lookiloo user image to the Lookiloo app
  2. Put together three outfits each containing an accessory, top, dress or bottoms and each one to your closet.
  3. Re-try on each outfit in your closet and evaluate your favorite two.
  4. Purchase the items in your two favorite outfits. 
Evaluation Methods

While attempting to complete the given tasks, users were asked to talk aloud as a means of understanding their thought processes when interacting with the new website interface design. Observations of the user's experience were made during the evaluation and a post test interview was briefly conducted. 

Evaluation Measurements

The following measures were recorded to aid in evaluating the new interface's usability: 
  • Task success
  • Time to complete task
  • User opinions on interface usability

Results and Discussion


The table below contains the results of the usability test. Notes from each user during their test are also included below the table.

  User 1  User 2 
 Demographics  23, Female, Shops online once a month  22, Female, Browses clothing online frequently  Mean Time
 Task 1  22  6  14
 Task 2  2:23 1:43  2:03
 Task 3  40  25  32.5
 Task 4  1:54  45  1:19.5
 Notes 1. Took longer than expected to find the upload button. Didn't take photo first time.
2. Went straight to subcategories of items--had to be told to select only "folder" categories. Liked the outfit total.
4. Took a bit to understand how items from outfit were moved to cart. Purchased with ease. 
2. Wanted to put on two accessories 
3. Liked all three. Haha.
4. Confused at first how items were moved. Concerned outfit had disappeared and confirmed it was still there.


All users were able to complete the given tasks with the user interface. It appears the only issue was with the new type of feature--My Closet. Users refereed to the Closet as a "wishlist", believing it was similar to the popular wishlist on most shopping sites.

Future Work

The future design for this prototype should continue more testing on a wider demographic. I am curious to know how such a feature would be used by 20-something males (like myself). I am interested in such a feature, especially if my girlfriend and friends can tell me what they think would look good. It somewhat simplifies shopping a bit.

It would be interesting to create microcosims or groups for different "styles".  Users could also gain popularity on their own page for their sense of style.

It would be unique also if multiple different clothing bands offered their clothing to the Lookiloo app. It would be like a virtual shopping mall.

A back end should be designed and implemented that includes social features like user account, friends list, rating system, and reviews and opinions of user outfits.
Corey Gwin,
Aug 1, 2011, 2:52 AM