Dashboard & Widget Layout & DesignHP Touchpoint Manager

Anatomy of a Widget

Title bar with icon

Clicking takes usersto a “list page” withthis dynamic querywith more actions

Simplified,key data

(Sad vs Happy)

Options“hamburger”

Graphical,at-a-glancestatus

Time frameUsers can customizeto show data that’simportant to them

Simplified Key InformationAt-A-Glance StatusFlexible, yet ConsistentCustomizableActionable

Guiding Principles

List of Things Layout & Design, Interaction & UX FlowHP Touchpoint Manager

Simplified Key InformationCustomized, At-A-Glance StatusScalableFind what I want, fast!Should work for anything: Devices, Software, Printers, Coffee Makers, etc.

Guiding Principles

List of Things Layout & Design, Interaction & UX FlowHP Touchpoint Manager

Search

Home Alerts Users Devices Groups Services

Terms and Conditions | Personal Data Rights | Privacy | Contact © 2015 HP Inc.

Interaction Problems

In our early wireframes & mockups,

the interaction flow was disruptive to

how someone naturally reads (from

left to right).

In these examples you’ll see the main

action (the dynamic filters) affected

items above & to the right. One action

was affecting 3 different areas in an

unnatural manner which caused users

to not understand what to do in this

control.

List of Things Layout & Design, Interaction & UX FlowHP Touchpoint Manager

Interaction Correction

By adjusting the layout, the

flow of interaction became

much more simplified. The

final solution was placing the

dynamic filters on the left.

Making selections in the filters

affects the graph and the list

on the left.

Logo & Branding with Early IterationsHP Touchpoint Manager

Final

Logo & Branding with Early IterationsHP Touchpoint Manager

Large poster & banner design

Nurture email template

Themed launch poster

Early Concept MockupsHP Touchpoint Manager