Internal - IBM

Wireframe implementation highlighting the breadcrumb design and responsive enabling 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: Distinct typography has been used to separate the question from the answer choices. Display a "Next" button on the right hand side of the screen to allow the user to navigate to the next question
Secondary Actions: Display language options for users whose first language is non-english

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)
Link Text - Light Blue - #337AB7 - (51:122:183)

Grid:
1312 x 600 px

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