The following recounts my design of a new social shopping web experience entitled
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 Alexa.com) was conducted. These included Gap, Inc., Zappos, Victoria's Secret, H&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.
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 craigslist.org 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:
From Alexa.com'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:
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.
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.
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.
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:
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:
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.
The following measures were recorded to aid in evaluating the new interface's 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.
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.
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.