Moving From Windows to the Cloud;
From Mouse and Keyboard to TV Remote.
Netsolace’s products power thousands of store locations. Their Digital Menu System (DMS) is a core offering. The original DMS uses a Windows PC as a central hub that is located somewhere within the shop and is cabled to multiple screens.
Cloud-based servers and connected TVs running modern operating systems presented an opportunity to redesign the entire product as a modular, decentralized solution without the hub; removing the need for the PC, shedding the cables, and eliminating the potential for the entire system to go down due to a single point of failure.
UX Challenges
Rebuilding the system directly into the smart TVs meant no more keyboard and mouse without adding direct touch.
- Everything would be managed with a TV remote.
- Standard visual cues such as a cursor, hover states, and tooltips would not be present.
- Clear indications of focus, action, success, and failure would be needed.
A streamlined app structure with a minimum of necessary actions would improve the experience of using a TV remote. The labeling was also non-intuitive.
Removing the navigation when not in use would maximize the screen real estate and place focus on the task at hand.
UX Solutions
Mapping the App Structure
Using medium-fidelity thumbnails, all features of the app were mapped out, discussed, debated and further streamlined to allow the user to access all functions as easily and clearly as possible.
Android + Google’s Material Design
The decision to build in Google’s Android operating system allowed us to design our solution using Google’s Material Design system. Working closely within their system, we had access to a large set of layout and interaction patterns that had already been tested and adopted by users.
In addition to usability, Material Design patterns are easily branded for the customer while remaining true to the platform and familiar to users.
Motion Design
Native applications usually don’t have the ‘page refreshes’ or ‘page loads’ that are so prevelant in websites or web applications. This means that everything needs to transition seamlessly; widget states, pages, focus states, etc.
Animation for transitions was kept to a minimum. Only essential items animated from position to position on the page. The rest appeared and disappeared in place, with direction hinted at if necessary.
Clickable animations were drafted for developers to follow along with so that they could see the intended flow and effects. Written guidelines were included at each stop.
In addition to the overall flow, specific animations such as button hits and menu interactions were created as a reference as well.
Tasks
Research
Flow Mapping
Wireframing
Rapid Prototyping
Final Mockups
Animation Specs
Tools
Sketch App
Adobe Animate
InVision
Team
Client – Netsolace, Inc.
Product Manager – Deborah Petrelle
Creative Director – John Belancik
UX Designer – Christopher Wilson
Interaction Designer – Christopher Wilson
Visual Designer – Christopher Wilson
Technology Architect- Abdullah Malik
Development Agency – BroadPeak Technologies
