Lo-fi

Brainstorming I

For our first stage, we split up the main components of the site in order to explore various concepts and layouts. We actually were able to catch many problems or issues with our design. These problems came in the scope of simple interactive interface elements, but some also brought more conceptual ideas to light. One example is how we were going to be able to handle tagging. Were tags going to be linked back to an individual? We decided that this would be an effective way for people to track previously tagged items and create personal benefits to tagging items, in that the user would be able to track back and find previously viewed items. Our sketches also helped us compare various layouts to come up with a more optimal one to use in our lo-fi prototype.

At this stage we also compared our sketches and concepts to similar competition, such as This Next, Kaboodle, and Fashism. By exploring these sites we did comparative analysis to figure out which elements of these sites we liked and which ones we would be able to improve upon. For example, This Next is a very well implemented site, but it does not give personalized recommendations to users and we felt its interface made it confusing to see what parts are ads and what parts are a person’s profile.

The first round of sketches are the following:

Brainstorming II

We then met with a second iteration of our sketches, this time a little more hi-fi sketches, that would incorporate what we discussed in our earlier meeting. Here we mapped out necessary functions and how these functions relate to particular pages. We explored what features users would likely find useful on pages such as a person’s home page, or on an item page.

Many great ideas were taken and then considered within the scope of our project. We came up with some more “wild” ideas, such as viewing a user’s items and recommendations through a treemap information visualization. This option would definitely enhance the interactive experience and provide the user with a useful tool for exploring new items. However, it may be out of the scope of the course, and so we decided first and foremost we want to achieve a simple, intuitive layout that users can navigate with or without the treemap (this is also important in terms of compatibility and accessibility).

These sketches are:

Some of the specs that we laid out are below.

  • User Page / Profile:
    user name + picture
    what they’ve bookmarked
    follow user
    location + demographic
    ( feed + shoutbox )
    ( people they’re following/being followed )
  • User Homepage:
    recommendations
    add item / outfit
    feeds
  • Item page:
    comments
    images
    share: email, facebook, twitter
    rate item
    add item
    users who have added this
    tags / metadata
  • Outfit Page:
    image links ( everything an item page has)
  • Add item fields:
    image
    title
    URL ( auto-fillin )
    description
    price range
    occasion
    brand
    tag
  • Search / Browse:
    rate item
    add item
    price range
    # added
  • Navigation:
    Home
    Profile
    Recommendations
    Bookmarks
    Follows
    Outfit Creator
    Fashion Neighbor

Final Lo-fi Prototyping!

Finally, we took these sketches and requirements, and developed lo-fi interfaces using a free tool called Mockingbird (http://gomockingbird.com). Though these are certainly not our final interfaces, but we were able to produce mockups that we will use to test and interview users. From this feedback we can iterate again for when we progress to the next stages of this project.

After our ideations, our lo-fi prototype looks like this: