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

2. and From Green Screens to Rich Screens

3. 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

4. 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

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

6. 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

7. 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

8. 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

9. and Product pages

10. 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

11. 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

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

13. 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