Visual Design Notes: Design Refinement


List your prop­erty page 

Search Results Page

Prop­erty Page

Due This Week

  • Design Devel­op­ment 5th Draft
  • Inter­ac­tions of the pages will be vis­i­ble on the prototype.

Class Feed­back

  • Improve main navigation.
  • Improve col­ors on the back­ground and try to inte­grate the dif­fer­ent sec­tions of the search results page.
  • Change gra­di­ent on the header.
  • Improve lay­out on both home­pages. The way it is now is not very clear that the video is not part of the search. The video doesn’t have to be so large on the page.
  • Improve tab but­tons on the prop­erty page.

Due Next Week

  • Final Design
  • Visual Pro­to­type

UX Design Notes: First Usability Testing

The first round of usabil­ity test­ing starts and the first user per­formed the test using the sec­ond draft of the wire­frame pro­to­type.
After that pilot test, the pro­to­type was revised and the third draft was used by the remain­ing three par­tic­i­pants of the test.
The indi­vid­ual tasks were recorded using Tech­Smith’s Jing screen record­ing soft­ware, which records video in Flash for­mat.
Bel­low is there are two ver­sions of the doc­u­ment con­tain­ing the facilitator’s script and all forms nec­es­sary to con­duct the test. The tasks and the over­all doc­u­ment were revised sig­nif­i­cantly after the pilot test.

Ini­tial script and forms

Revised script and forms after pilot test

Visual Design Notes: Design Refinement

Search Results Page — 3rd Draft with Interactions






Due This Week

  • Design Devel­op­ment 4th Draft

Class Feed­back

  • The action but­tons in gen­eral are too chunky, spe­cially on the search results page;
  • There is too much vari­a­tion of styles on the text. There should be more default text with default fonts and col­ors. Less styling of text will allow for more hier­ar­chy between elements.
  • On search results page, the left col­umn should be more dif­fer­en­ti­ated from the right. And it must be clear that the sep­a­rate refine­ment options all belong to the same refine­ment area.
  • The dis­tance from the descen­ders of the Y of the logo on the inter­nal pages should be pro­por­tional to the dis­tance on the home­page, where the logo is larger.
  • On the back­ground, the inner shadow in between the dif­fer­ent lay­ers is too strong.
  • There should be more space between ele­ments on the head­ers, spe­cially on the search results page and on the prop­erty page.
  • For the footer, a bar is nec­es­sary to make it clear that it is a footer. A color slightly lighter or darker than the back­ground color should be used.
  • For the logo, I should try to play a bit more with the sparkle. Make it solid but lighter than the logo’s color.

Due Next Week

  • Design Devel­op­ment 5th Draft
  • Final Logo

UX Design Notes: Wireframes & Prototype

Wire­frames were cre­ated using Axure.
The first draft of the wire­frame pro­to­type is no longer avail­able online but you can check it out at the fol­low­ing wire­frame report:

The sec­ond draft of the wire­frame pro­to­type is avail­able online.