Overview

After we launched the latest version of the Dallas Market Center website, it was clear the header needed to be redesigned. Some key improvements I wanted to see were:

  1. Reduction in the header height

  2. A Sign In area without animation or other disjointed layout elements

  3. Move the secondary navigation from the Footer to the Header

 
 

Before UI Development Effort

Featured
Header before rebuild
Header before rebuild

Snapshot of default view for dallasmarketcenter.com before rebuild effort

Header before rebuild (sign in overlay)
Header before rebuild (sign in overlay)

UI before rebuild effort - shows disjointed sign in UI after user chooses "Sign in" button.

 

UI Iterations

Featured
Header design iteration 3
Header design iteration 3

Sign in UI exposed in header

Header design iteration 1
Header design iteration 1

All states of sign-in UI (guest, sign-in, secure)

Header design iteration 2
Header design iteration 2

Sign in using an overlay for UI

 

Final Solution

 
Featured
Header rebuild
Header rebuild

Snapshot of the upgraded header for Dallas Market Center website