Notes - mhulse/sass-test GitHub Wiki

Summary

  1. Improve social icon experience
    • Different location?
    • Different/bigger icon look/feel
  2. Streamline search experience
    • HTML5 placeholder attributes
    • Change or remove verbiage for things that are self explanatory (like “Quick Search”)
  3. Embed slideshow and streamline typography
    • Type overlay
    • multiple images in a slideshow player on same page.
  4. Remove all unnecessary and/or “internal” verbiage
    • Like “Property Description”, “Basic Features”, “Advanced Features”, “Quick Search”, “Themes by …”, “Admin Login …”, etc.
  5. Rearrange page elements to improve lead conversion rate
    • Should contact form be higher?
    • What about map, could it be smaller, bigger?
  6. Let user know where they are:
    • Page location header (above photo)
    • Navigation bar current link highlight
    • Breadcrumb navigation
  7. Sticky search so users can see/modify the current search parameters used

Code:

  1. Remove inline styles
  2. Make template responsive

Details

1. Color scheme

  • Shades of blue with an orange accent/action color (used for links and buttons)
  • Used orange to emphasize calls to action

2. Header

  • Normalized font sizes
  • Positioned sharing links

Suggested additional changes:

  • Use different style of social icons, for example:

screen shot 2014-11-23 at 8 50 50 pm

3. Search elements

The “Quick Search” background image removed because:

  • Better readability of widget form elements
  • Image selection was not fitting for page

The “Quick Search” heading removed because:

  • Streamline page verbiage
  • It’s clear that this part of the page is used for searching

Suggested additional changes:

  • Could use HTML5 placeholder attributes in place of labels
  • Put $ before fields that deal with dollar amounts.
  • Move all “search”-related elements into the sidebar search widget area:
    • “New Search” (rename to “Advanced search”)
    • “Modify Search” (this link did not appear when developing locally)

4. Details and photo

  • Made image bigger and positioned related text on top with background gradient “scrim”
  • Clustered related copy
  • Prioritized text using color and font sizes
  • Removed the word “Price:” (seemed self-explanatory)
  • Grouped description text and details with photo to make this area appear more cohesive.

Suggested additional changes:

  • HTML could be re-structured to make this design applicable in the real-world.
  • A slideshow player widget could be embedded on page

5. “Features” text

  • Combined “Basic Features” and “Advanced Features” headings into one heading named “Features”

6. Map

  • Made map fit width of column

7. Contact

  • Reset button minimized
  • Moved address and phone contact information inside contact form area
  • Removed “DEMO - Direct2Success” heading

Suggested additional changes:

  • Removal of reset button as it does not add much overall value.
  • Should there be * = required text?

8. IDX link

  • Added IDX logo

9. Footer region

  • Removed multiple admin login links
  • Improved RE/MAX logo quality (I could not find the exact logo used on the original page)
  • Removed extraneous verbiage

Suggested additional changes:

  • Re-think “Client Account Login” button