Post on 18-Jan-2017
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
Large poster & banner design
Nurture email template
Themed launch poster