Summary
Research Synthesis Design Solution

Design

01 Sketches

We began designing the website by sketching out various layout ideas. Even once we began to put things together in dreamweaver, we still referred to the pen and paper process for hedging out details. Below are several examples of sketches created throughout the design process.

Home page- registered user:

Some problems we were able to resolve by sketching out ideas for the homepage included deciding on the ideal location for the search box, how the page grid should be sized, what features should be included in the right hand registered user customized section, and how left hand sidebar searches should be divided up. Two ideas we sketched during the development of the homepage are presented below.


Wine detail page:

We printed out each of the wireframes and made notes based on class critique and our own brainstorming in preparation for the next design stage. Some things we considered were what the user would really find useful, a shopping list or recently viewed wines list, wine events or a where to buy section, a favorites list, and how the how the ratings systems should work.

Wine detail page:

Sketching out the wine detail page after reviewing the wireframes allowed us to see how our changes might look. From this, we were able to narrow down which changes needed to be made, and which weren't as appropriate for our target user.

Wine detail page:

We refined and labeled the wine detail page during several iterations, moving closer to our final solution.

 

IID 2005 . Human-Computer Interaction Institute . Carnegie Mellon University