Internal - IBM

Wireframe implementation highlighting the breadcrumb design and error handling for required fields of an IBM Internal project.

Wireframe implementation highlighting the breadcrumb design and responsive enabling of an IBM Internal project.

Design Approach: Task-First
Primary Actions: Inform the user that they attempted to click the "Next" button without answering all of the required questions with a blue error text display.
Secondary Actions: Provide an additional "Help" link for additional guidance on the question asked.

Typography:
Helvetica, Helvetica Bold

Colors:
Background Card - Light Gray - #F1F1F1 (241:241:241)
Card Stack - White - #FFFFFF (255:255:255)
Primary Button Accent - Blue - #23609D (35:96:157)
Help Card Fill - Light Blue - #D9EDF7 (217:237:247)
Help Card Body Text - Dark Blue - #31708F - (49:112:143)
Link Text - Light Blue - #337AB7 - (51:122:183)

Grid:
1312 x 600 px

Elements:
Header Template; Footer Template; Navigation (Breadcrumb); Primary Button; Card Overlay (Help); User Input Template - Checkbox; Link Text