Redesigning the Lumo Play software interface

Written by: Jocelyne Le Leannec, Chief Design Officer at Lumo Interactive

Original post source: jawzlean.com

Background

Lumo Play is an interactive display software platform that can turn any projector, tv, or touchscreen into a custom interactive experience. You can use it to make interactive floors, walls, window displays and more.

Lumo Play software has been used in almost every country in the world. Originally it was called ‘Po-motion’, which was a fun word to try to communicate to people. 

Our software has been used in all kinds of setups, in all kinds of environments by all kinds of different people since 2011.


Previous versions

We currently offer 3 tiers of software (Basic, Plus and Pro).

Each tier has 3 versions, one for every sensor (Kinect, webcam, and webcam for Mac).

That's too many versions!

Curtis Wachs, our Director of Research and Development, was tired of updating 7 versions of the software, and our users were super confused and often downloaded the wrong version.


Introduction

In 2016, after spending a few years on our website chat support speaking directly with people who use Lumo Play software, we decided it was time to make some big changes.

Over the next couple months, I worked with Meg and Curt to re-design our desktop software interface. The goal was to make it as easy as possible for families and businesses to set up an interactive display using almost any hardware they want.


User Research

LUMOplay Live Chat Popout

LUMOplay Live Chat Popout

To better understand our users needs, we talked to them via live chat, email, Facebook, Twitter, and even had phone and Skype calls when we could.

We added Zendesk's live chat support on our website in 2015, and the feedback just flowed in. I was manning the chat support, since I'm in charge of designing our software. It was extremely valuable for me to speak directly with the people who use our software. I quickly discovered what was working and what wasn’t working for the users.

What did we learn?

We have two main user groups, and both groups have had different experiences with our software:

Families who want their children to have more active play than tablet games on the couch.

Businesses who want to put motion reactive displays or interactive floors in their stores.

Conclusion - simplify the software tiers and target the features correctly.

  • Families need a low price point and a minimum amount of features.
  • Businesses need Pro to have all the features.
  • All users should be able to easily identify which software tier and version they need to install.
  • All users need a simple, step-by-step setup and calibration process that covers the most common installation types.

User Goals

Who uses our software and why do they use it?

Parents, teachers, and family-focused businesses. Entertain kids with a fun way to exercise Help people with disabilities further develop their motor skills Educate in a creative engaging way

Parents, teachers, and family-focused businesses.

Entertain kids with a fun way to exercise
Help people with disabilities further develop their motor skills
Educate in a creative engaging way

Retail and advertising Advertise and engage Manage multiple installations from home Run playlists, set it and forget it Customize games and effects Rebrand and resell to customers

Retail and advertising

Advertise and engage
Manage multiple installations from home
Run playlists, set it and forget it
Customize games and effects
Rebrand and resell to customers


Competitive Analysis

While keeping in mind the current software hiccups, who are users are, and why people use Lumo Play, I began to shop around for experiences that I could get inspired by. I asked myself two questions while looking for great examples:

  • What similar interfaces are people using right now?
  • What works really well?

Here are a few websites, programs and apps that I was really inspired by:


User Flows & App Map

Curtis was involved in this part of the planning, since he'd be developing the new version (and he built all the past software versions). We had a bunch of talks, did a bunch of napkin sketches, we stole all whiteboards in our office and just sketched and erased for a couple days. 

After we got over the fact that our new software would have a different flow then all the other versions, it started to get easier.  

LUMOplay User Flow

Wireframes

Identifying what the new interface needs

One installer, three running modes

Offline
No download
No software updates
No game updates
No games list downloads
No game downloads
Only access to play downloaded games. 

Online
Normal operation 

Online  - Remote Management
Force assigned playlists from lumoplay.com Ignore local playlists.

Getting started

My first go at the interface was based on the current software interface. I started here because this is what the users are currently used to. I thought a lot about how drastic changes to the interface would make the user feel. If it would be too frustrating or if it was done well it would be a relief because it’s easier to use than what we have now.

  • Tabs for main navigation
  • In software games library
  • Create new playlists
  • Access downloaded games when offline 
  • Visible list of all your playlists
  • Search bar to search your games library

Prototype

I created and refined wireframes based on the sketches I had made and the feedback I got on them. I wired them all up and put together an interactive prototype using Adobe User Experience designer, and tested the new interface on 3 users who have never use our software before. 

I watched the testers navigate and explain to me why they were making certain decisions during the process. They pointed out things that were confusing and with their feedback, I made the following changes:

  • New download icon 
  • Grey out the game if it has not been downloaded to indicate that you need to take an action

Just minor changes, it went really well. They understood everything and knew how to use it.


Visual Design

  • The design will be responsive
  • 3 different colors to differentiate between Demo, Home and Pro
  • Color scheme and text weight adjusted so information will read well on screen and projection
  • Calibration setup is 4 steps of a wizard
     

Color palettes

Because our software is built for projections, I had to make sure that it was usable and that all text could be ready when projected. 
The original website color scheme really needed to be adjusted for this. 


The Final Version

“The lag is almost gone and the UX looks like it’s a contemporary web app! It’s awesome. It looks like a big upgrade.”

— Les Klassen

LUMOplay notifications

Lumo Play Software Notification banners:
Yellow: Warning
Red: Error
Green: Success
Blue: Note


Here’s a run through of Lumo Play 3.0. Almost ready for public release!

If you’d like to beta test or give me your feedback about the project please leave a comment - I’d really love to know what you think!