Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Screenshots

Explanation

Motivation


 

 

Image Removed

 

 

Image Removed

 

 

Image Removed

 

 

This is the menu bar on top that the user uses to switch between three different modes (browse, request, personal page) of the website.

The motivation for this design was a result of paper prototyping and user testing using this prototype.

Image Added

Hovering over an outfit on the browser shows the outfit in detail on the right side. This detailed view disappears when the user moves the mouse off of the thumbnail.

The motivation for the detail view popping up from a thumbnail was from the user testing with the paper prototype. The detailed view disappearing when the mouse exits the thumbnail was motivated from a heuristic evaluation that pointed out that the right side should be consistent with what is visible on the left browser.

Image Added

This is the browser itself, which shows a list of requests.

This interface was motivated purely by the user testing on the paper prototype.

Image Added

This is the request page, which the user may use to request advice for an outfit to be designed.

The fields of the request page were motivated by the paper prototype. The positioning and size of the fields were motivated by a heuristic evaluation.

Image Added

This is the outfit creation page. The user can drag and drop items of clothing on this page, as well as add comments.

The drag and drop portion of this page was motivated by the paper prototype (which was also very good at simulating the drag and drop). The positioning of the title details and the add comment box were motivated by a heuristic evaluation.

Image Removed

 

 

Implementation

Describe the internals of your implementation, but keep the discussion on a high level. Discuss important design decisions you made in the implementation. Also discuss how implementation problems may have affected the usability of your interface.

...