part 4 – Final Design

Revision were made to the interface prototype after gathering feed-backs from user testing. The interface now has a more consistent title bar. Changes were made to the fonts for better readability. See design document and interactive demo for the final design.

This slideshow requires JavaScript.

Interactive Demo

Design Document

Redesigning: Smith and Goldsmith Inc. Rental Properties website <;

Audience: This site targets current or future residents of the Salem, Oregon area looking for temporary housing arrangements. This company is well established, having been around for over 50 years, and uses this as a marketing strategy to build their credibility. This is a small, locally owned, professional business that seems to be looking for professionals or students who would enjoy living in smaller buildings in residential neighborhoods near the heart of Salem.

Major Design Problems:

  • distracting background
  • poor color scheme
  • labeling of information – menu buttons vague (“Available” should say “properties” or something more descriptive), pictures unlabeled/ not tied to other info, don’t know which houses the indoor photos correspond to
  • flow – hard to focus/ know where to start and hard to navigate through the page
  • organization of information – not consistent between pages and includes pictures, contact info, purpose of the site, and supplementary information – need to employ grouping
  • buttons poorly coded/ only work if you press around edges
  • buttons open new tab instead of updating current page
  • Header lower-case and not descriptive enough (“home”, “available”, etc… instead of “Smith and Goldsmith Inc. – Home”)
  • user tracker unnecessary and distracting (doesn’t add to the credibility of site)
  • unnecessary icons and images
  • typeface boring (san serif for Company name, it looks fine with the rest, but use varying font sizes)

Design Goals:

  • to develop a site that presents Smith and Goldsmith Inc. as a strong and established professional business instead of simply stating so
    • Use a strong typeface for the company name and then san-serif for readability of the rest of the text on the page
    • Use colors that accent each other well, that feel professional and calm, but that are also slightly warm and welcoming
    • Keep the background simple and make sure that it accents the rest of the page
    • Create well organized groupings of information with intuitive menus that are easy to read and navigate
  • To present information about the surrounding community and local accommodations
  • To have other desirable information such as security systems, how-to guides, among other helpful articles which will lend to their credibility as a trusted source

Feedback 1 (In class):

  • The Home page should contain more information about the company – maybe 4 sentences
  • Make the boxes in each page the same – consistency between pages
  • Get rid of “lists per page” on the properties page
  • It is a small company, so don’t draw attention to how small it is
  • Make all typeface (including company name at top) san-serif and make the site seem a little less formal to fit the small company feel
  • Make the titles in the boxes on the properties page smaller so that they don’t seem trapped
  • Do something about the Tree in the Logo so that it doesn’t compete with the G
  • Do something about the rounded lines that border the left and top of page, there needs to be some sort of balance and the lines stick out past the other boxes and looks sloppy
  • Good use of color
  • Nice logo

Redesign 1: We took all of the feedback into consideration and redesigned our logo using the full company name instead of simply SG for Smith and Goldsmith Inc. as well as changed the typeface to a san-serif. This resolved the issue of the tree in the logo competing with the letters. We took away the roundness from the border lines and took away the line bordering the left of the page so that the page had more balance. We redesigned the 3 pages we had made for consistency and changed the typeface to make it more informal and more inviting as a small company. After fixing all of the things our teacher and fellow classmates pointed out, we commenced with creating more pages to fill out our website.

Feedback 2 (Wei –UI designer for Motorola China – Jack’s friend):

  • The bolded fonts on some of the pages looks out of place and font sizes differ greatly between pages
  • Consistency of content across pages- border boxes, grouping
  • Title for the local map unnecessary
  • Change the color of buttons so that they don’t compete with the background as much
  • Add contact information about the company instead of just asking for the customers’ information in the contact page

Redesign 2: We used this feedback to improve our product. We deleted the title for the local map, changed the opacity of the buttons instead of the color which resolved the color issue, and reformatted the grouping of each page and the content for consistency between our 8 pages. Also created a Salem page and reformatted our Task bar ordering the options based on relative importance from left to right. At this point we also made our interactive demo using Power Point. We spent several hours attempting Flash, but we struggled with the coding and thus changed our strategy.

Feedback 3 (Michelle Vela – Using Interactive Prototype):

  • Change the history pic so that the colors balance better with the other pictures on the Salem page
  • Change the size of the titles on the properties page so that they fit better in the given boxes (same feedback from Nassim, still not small enough)
  • Change the size of the font on the testimony and about pages for readability- the font is too large
  • Highlight “About” instead of “Home” on the about page and change the font of the people’s name titles to make them stand out more from the surrounding text
  • Un-highlight “Home” on the local map page since it is no the home page
  • The flow works well but maybe add a back button to all pages
  • Prototype would look better in a different program (too simple and not enough indicators such as when you scroll over clickable text or buttons)

Redesign 3: Based on the usability test from a former student, we corrected the small issues such as font sizes and the errors such as the wrong item in the task bar being highlighted for a given page. As far as making the prototype more engaging and including more UI indicators, our options were limited given the time frame and our troubles with the Adobe Flash program. We settled on idealizing our design more than the interactive nature of the current prototype.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: