• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Chris Wilson

UX + Visual Design

  • Portfolio
  • Project History
  • Articles

Netsolace Digital Menu System

Portfolio · January 15, 2019

Moving From Windows to the Cloud;
From Mouse and Keyboard to TV Remote.

High-Fidelity Mockup of the Feed Selection screen for the DMS.
High-Fidelity Mockup of the Feed Selection screen for the DMS.

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.

Screen grab of the old DMS' screen selection interface.
The original DMS was a strong product for its time but was ready for an update.

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.

Screen grab of a portion of the flow maps produced for the DMS.
Each interaction was meticulously flow mapped for all possibilities.

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.

Image comparing our branded take on Google's Material Design patterns to their recommendations.
Comparison of App UI to Google’s Material Design pattern.

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.

Animated gif showing the motion design of the initial setup of the DMS app.
Motion Design specs for the first-time setup of the Digital Menu System.

In addition to the overall flow, specific animations such as button hits and menu interactions were created as a reference as well.

Animated gif showing the visual effect for a button click.
Animation of a button “click”.
Animation showing how the screen reacts when the navigation drawer is opened.
Animation showing how the screen reacts when the navigation drawer is opened.
Animation showing how the navigation scroll and selection works.
Animation showing how the navigation scroll and selection works.

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

Filed Under: Portfolio

Christopher Wilson

A seasoned digital designer with more than a decade of experience working in Technology; UX Design for mobile and web apps, Visual Design for websites, video 
games, and print.
--

A current resume can be viewed and downloaded as a PDF here.

Previous Post: « Percipio: Mobile App
Next Post: 2-1-1 Childcare Search »

Footer

Contact Me

Fields marked with an * are required.

Me. Online.

  • Dribbble
  • LinkedIn
  • Medium
  • Twitter

Service Area.

Wilson VisD Service Area
click map for larger view

Soooo... This map is horribly out of date. I have been living in Vancouver, Washington since just before the pandemic.

I need to replace this map, but have not yet. Since I don't want to leave the spot empty, enjoy the nostalgia of my old life.

My Other Projects.

  • Illustration Portfolio
  • Website Design + Hosting
  • Creative Independence Podcast
  • Answers for Freelancers!
  • Esmaya & Me Board Games

© 2023 Christopher Wilson & Aithene Multimedia