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 informationMy 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 greyas 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 linkson 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