and Design recommendations overview for Advisor Portal – workshop out puts Author: Windahl Finnigan JD Williams

and From Green Screens to Rich Screens

and Branding and navigation  Early concept of the navigation depicting tabs to break the site into 3 main sections  Customer advice  My JD Williams  Help & Information

and Branding and navigation Application level navigation – final version with names Customer Services – Resources – Company information My JD Williams – Employee dashboard and details Final icons - supplied Main JD Williams branding colours + grey Grey used for all functions Colours used to identify sections Dark blue (Brand colour) used with grey as the application colours

and Navigation  Buttons on main navigation are large and support users new to a mouse  Active and rollover states the colour is reversed

and Design Descriptions  Primary actions in button design  Secondary actions use link style with an icon if needed  Break up actions so there is less chance of the wrong link being chosen – mistakes when too close together  Final price last – closer proximity to action

and Design Descriptions  Primary actions in button design  Secondary actions use link style  Use spaces when showing price numbers to make it is easier to read  Use separator lines for additional charges  Make total cost larger  Product links mouse over and show image with link to product

and Design Descriptions  Logo in colour  Customer name in JD Blue and bigger to standout  Links to use link style  Optional icons for order build and buy now  Use separator lines  Tabs for low navigation

and Product pages

and Error Messages  Error messages are contextual  Use colour – red and an asterisk Contextual error messages In red and near form field with error message at top of page

and Interactions  Use buttons  Calls to action for interaction elements  Place instructions next to labels and above functionality  Error messages are to be displayed in red and appear on page – contextually Use close links on windows – always upper right corner Use instructional text next to labels

and Principals of design  Use of mouse overs  Use of screens that open up and grey behind  Using full width of page

and Displaying forms  Use drop downs to sort in heading tab and include instructional text  Make links clear  Use faded blue (or grey to separate lines)  Use space around date to make it easier to read  No lines vertically or horizonally If possible include instructions or jargon busters to aid use