LUMO

PROJECT REPORT Digital Experience Design 03-ME-804.06

Nisha Desai - University of Bremen, 299237 2 Arun Geo John - University of Bremen, 299238 8 Sobin C Jayaram - University of Bremen, 299223 6 Denitsa Todorova - University of the Arts Bremen, 32102 Ricardo Baquero Gomez - University of the Arts Bremen, 32092

LUMO A free and open platform on which developers and enthusiasts can build and develop games.

The vision The project began with an idea to build a

on the smartphone. The user on the app connects and configures the bluetooth

product that brings games back to the

connection between the devices. The players

physical world. But in our digital era, we

can start playing the game immediately

now have unique ability to harness the best

after a successful connection.

of both the physical and the digital worlds.

Embracing this idea, we decided to bridge the gap between the two worlds, by building

The Product

a platform on which a player can play the

The product that resulted out of our vision

same game using a physical device or using

is a hardware board with 5x5 buttons

a software app (application). This bridging

(representing the tic tac toe grid) and a

makes gaming accessible to all age groups

mobile app running on a smartphone with

especially to the elderly who have no or very

Google’s Android Platform. The board is

little experience with technology, thereby bridging the “generation gap” for gaming.

To implement this idea, we looked to the earliest form of gaming; board games. Board games have entertained people for centuries and continue to do so despite their simple

connected to the application via Bluetooth and a game can be played between the two devices. The hardware board consists of an Arduino Nano 328P which forms the central part of the hardware. The Arduino is

and trivial nature. By creating a hardware

connected with peripherals such as MAX

for a board game, we have opened our

7219 LED Matrix driver and HC-06 Bluetooth

platform to a wide variety of games played

module. A custom 5x5 Matrix Keypad and 5x5

by millions of casual gamers everyday.

Bi-Color LED matrix is made using custom PCB board which is driven by Arduino and

The experience

LED matrix driver.

The first game that we chose to put into

The Android application includes the game

action was the simple strategy game called

interface and interface for connecting and

Tic Tac Toe, a game where two players mark Xs and Os on grid of nine squares (3 x 3) If a player gets three of their marks on the board in a row, column or one of the two

configuring the platform and a guide to help the novice user to get the platform up and running.

diagonals, he/she wins.

The platform currently supports multiplayer gameplayer in which one player plays the game on the hardware and the other plays

How it works The Arduino on the board is programmed to

the game on the software. To start the game, receive and send serial data through the board is turned on and the app is opened Bluetooth Module. The Keypress events in

the hardware board are serially transmitted

Product Design and Development

by Bluetooth module to the software

The hardware board consists of a hard

counterpart which has established

wooden casing with acrylic button crowns

Bluetooth connection with the module. The

on the top. The hardware was sketched and

Arduino receives data from the bluetooth

designed initially on paper which was then

module sent from the Software Application

converted in full virtual 3D(dimensional)

which is used to light up the LED with the

object. The software used was Rhinoceros

desired colour.

3D.

The Arduino is not pre-programmed for

The chassis of the board was among the first

Tic-Tac-Toe game logic, but programmed in

objects that was made and it was 3D printed

generic form so that, the board can be used

with slots for a matrix of 5 x 5 buttons. The

to develop new games, or applications

cushions for the buttons themselves were

without altering the hardware and arduino

also made using 3D printing after which

firmware, as the logic is determined using

they was carefully hand polished. Crown of

the software application in the smart

the button was made from two layers of

devices.

acrylic that glued together to form a thick

The Android app was developed as the brain for the project. Since none of logic for the game is hard coded into the Arduino, the

layer above the cushion protruding slightly for the top face of the board.

17 Hard wood layers was used to form the

app takes responsibility of driving the whole external casing with the logo etched on the project. This not only enables more

back. The layers of wood were cut using the

flexibility, it also allows for more power

laser cutter to form adequate shapes for

saving on the hardware and the ability to

stacking the layers. The top layer was also

run highly computational tasks.

cut accurately in order to place the buttons.

Small gaps were made in the structure of

The Tangible Product: Hardware Board The board was made completely using low

the external board to allow for the power switch and the power indicator.

The materials used for the board include:

cost components and using easily accessible

Wood

developmental processes.

Crystal Acrylic

The tangible product required primarily was made through two different processes: Product design & Development: Creation of the casing and the chassis Engineering : Crafting the electronics behind the device

ABS(Acrylonitrile butadiene styrene) Plastic The processes used are: 3D Printing Laser Cutting

Polishing

Power On/Off switch

The user interface for LUMO hardware

The Intangible Product: The Android App

platform is a 5 x 5 keypad matrix with 5x5

As we want to reach as many people as

Engineering

Bi-Color LED Matrix feedback. The interface possible to be able to play or experiment was soldered in General PCB with 25

with the development of their own LUMO

microswitch and 25 bi-color LED’s. The LED apps, we chose to use Android and Java.

Matrix is driven by MAX 7219 LED driver

According to IDC, strategy analysis in 2014

chip, which is controlled by Arduino Nano

Android has 78% of the Global Smartphone

328P. The Arduino Nano scans the keypad

Market Share.

matrix using the built-in GPIO pins.

Bluetooth serial module was tested initially for connectivity, which was finally

The app creation process includes the following process:

interfaced with Arduino Nano with the RX

Interface Design

and TX port. A layer of wood was used as

Paper Prototypes

housing layer to hold the Arduino Nano, LED Driver chip, Bluetooth Module and

Wireframes

Lithium-Ion Battery. The Keypad Interface

UI/The final interface

was screwed to the LUMO external

App Development

structure. A power switch with LED indication was added to turn the device On/Off. The hardware board houses a 2000mAh Li-Ion battery which is rechargeable by any general Smartphone adapter having micro USB.

Interface Design The interface of the app was meticulously designed to provide a consistent experience with the hardware. Since the idea of the project is going back to the physical, we decided to bring back the liveliness of the

Full list of components: Arduino NANO 328P

skeuomorphism against the current trend of minimalism in UI design.

MAX 7219 LED Driver

Paper prototype

HC-06 Bluetooth Module

In the first paper prototypes that we

25 Bi-Color LED 25 Micro Switches 2000mAH Li-ion battery

developed we concentrated on the most basic features which the app could have.

You could choose between a single and multiplayer game, this lead you to the

Bluetooth module, LEDs, LED matrix drive screen with the actual game. You could see

when you win or lose, you could pause the

language using the Eclipse IDE (Integrated

game and change basic sound settings.

Development Environment) to code and

Wireframe

debug the app. The standard Android Software Development Kit or SDK provided

Developing the wireframe we added more

by Google was used to compile and test the

details to make the experience more clear

application. Although the game was

and pleasing. We added additional helping

intended to be multiplayer only, we created

information which explains how to connect

a single player mode for the purpose of our

the app and the board. As the mobile app

first user test.

gives us more freedom for revealing information we added a screen displaying

The Brand

which player starts first. Furthermore in the Name game the players can see the result and

The name of LUMO derives from the latin

current player’s turn. At the end of each

word “lumen” meaning:

round the players see additional screen informing about the winner.

UI The interface was made primarily using Adobe® Photoshop® CS6 and Adobe® Illustrator® CS6.We experimented with

day, daylight eye (of a person) lamp, torch life light

different visual styles of the app.. First, we used flat and simple style with only the

LUMO is a play with light, which can be a tic

main colors resembling the board (red and

tac toe game or any other game - it depends

green buttons, background in a similar color only on its programme. to the light wood of the board). After many experiments - with more realistic buttons

Logo

(literally photographs of the 3D printed

We created a logotype from the name

buttons) or hand-drawn skeuomorphic

LUMO. The shape is created from a grid of

buttons that still present a more realistic

squares reminding the grid of the buttons

shape than the first abstract buttons. After

on the board. The letters are tightly

our first user tests, we chose to use the

connected to symbolize the connection

hand-drawn buttons, because they were

between the physical and the digital world

most aesthetically pleasing to the

which LUMO creates.

participants and the experience was the closest one to the board.

App Development The Android app was programmed in Java

Colors The two main colors are green(#6f9900) and red(#ef3030) with additional yellow color, created by the mixing of the red and green

LED lights. Usually they represent the two

Who will use LUMO?

opponents in the game. We are using the

We divided our three main target groups

green color as a base color and as action color in the mobile application and the presentation materials.

Usability testing

People who are not comfortable with digital devices, but still want to play games with people who prefer digital games (and vice versa).

Second, people who are looking for a new

As our prototypes were experimental, we

kind of games and a new experience.

needed to make multiple user tests to

Third, people who are interested in

understand how do people interact with our

experimenting, creating and programing

platform.

electronic devices by themselves.

Personas

Inspection and evaluation First, we started with examining

Roland

usability-related aspects of the user

(the grandfather)

interface of LUMO. The methods we have

75 years old, retired

chosen are:

does not like computers

Heuristic Evaluation

plays domino and chess

We researched the system and evaluated it

has a mobile phone but does not know how to use it

according to the basic heuristic rules.

enjoys the time with his grandchildren

Cognitive Walkthrough Two team members played the roles of users and tested the game, this way we made our initial suggestions about how people would use LUMO.

Hans

(the grandson) 11 years old, goes to school likes computer games

Consistency Inspection

spends a lot of time with hisgrandfather

As we are connecting two different

he wants to play games with him, but he is bored from paying domino

representations of one task(playing the game), the consistency of the experience on the hardware board and on the mobile application was very important.

Inquiry For the initial inquiry we did some field observation and we made a research about the potential users of LUMO.

Jack 30 years old, working as a developer his hobby are board games but he does not have a lot of time to play this is why he only plays on his phone on the bus to work

Jenny 26 years old, freelancer, designer she is creative and likes to play games for insporation

our further tests. We used communication and observation, open-end questions and subjective impressions of the participants.

The aim was to discover patterns and trends of the participants using LUMO.

she wants to try a new approach for a board game

The first research was done as soon as we

plays casual games at work

had our first prototypes - of the hardware board and the hardware app. Based on the results we improved the product and made a

Harry

second test.

18years old, student

A variety of methods helped us to discover

likes to learn things by himself

following are the techniques that we used:

likes to invent things by himself (DIY)

Uselooking casesfor new forms to make music UC1 - Hans goes back from school, does his homework and after that plays with his grandfather. He starts the app, the grandfather starts the board and they play several games together.

UC 2 - Jan has no time to play games, so he plays in the bus. He does not want to carry the board, so he plays from his phone/mobile device?. Jenny received an online invitation to play the game and she plays from her phone at home.

UC 3 - Harry likes DIY, so he finds the LUMO project on the internet, downloads the 3D models for the board and the buttons, assembles the Arduino and the other hardware parts and programs the board for a new purpose - now he makes music with it.

User Tests To better understand the experience delivered by the platform, we conducted two qualitative researches so that we could find out which important variables to examine in

more flaws than using a single one. And the

Capture Everything We used a camera to record the actions of the participants, also recorded the sound (because they were asked to “think aloud�), we also observed them, asked questions and took notes. Before starting the test we collected some basic information about the respondents so that we could understand better their lifestyles and points of view.

After the test we asked them to fill in a follow-up questionnaire about their experience.

Thinking Aloud Some of the participants were asked to say out loud what they were thinking while they are using the system

Coaching The users were testing together with an expert coach, they were encouraged to ask questions, which helped the expert to discover problems

Teaching Method Some of the participants were asked to

“teach” other participants how to use the

tests again to find out more about the user

system.

experience. We can continue with

Co-discovery

quantitative research when we identify

With this method users were asked to work collaboratively, this way they discuss more

factors that influence the outcome and have explanations that we want to test.

freely what they are doing/their interactions than a single person using the “thinking

Feedback

aloud” method

As this was qualitative evaluation, our main task was to find the initial interactions

Participants We recruited our participants in person or via internet. We had nine participants in

which could be a problem for our users. We found several major drawback of our current prototype:

total. Most of them are students, but there

First, it was the lack of feedback from the

are also other people working in the IT

board. The participants were not sure when

industry. Their age is between 20 and 28.

is their turn and when is the opponent’s,

They had played tic tac toe game before and

when the game starts, when it ends and who

they were also experienced with mobile

was the winner. The game only gave

devices. Most of them prefer to play with

feedback when they pressed a button and it

other players.

changed its color or when the opponent did his/her turn and the button on the board

Test 01 We started with a focus group of 2 people.

We tested the general user satisfaction (usefulness, satisfaction with functions, or frustration and anger). We started the testing while the board and app were still in progress and while the design was being finalized.We made the first test in a quiet lab where we could set up our video and camera recordings and the participants were not distracted by noise, interruptions or

was lit in the opposite color.

The second drawback we found was the too fast response when playing against the computer on the mobile app. We had no delay and after the user’s turn, the answer of the computer appeared immediately which did not feel like a natural response.

The third drawback was the lack of visual consistency because we used the first and most simplified visual style for the mobile app.

multitasking. The methods which we used were capture everything and thinking aloud.

Results

After finishing the first experiment and

Based on our findings, we managed to

recording all the results, we are planning to

improve our game in the following

further develop the LUMO game and run

directions:

We added more feedback on the board. Now

board. So, we tested the improved board

when a user wins, the entire board gets

and app and in addition the prototype of the

illuminated and animated in his/her color. If latest version of the app. the player/user loses, the board lights in the We also chose in a more realistic setting for opponent’s color. In the mobile app the

this experiment, the participants were in an

feedback remains the same - the player sees office space with people working and talking a popup messages with “You win/lose” text. around them.

Next to the switch off/on button on the

During the second test we had 7

board, we added a small LED indicating if

participants. Five of them tested the

the board is on or off.

improved board and app and all of them also

In the mobile app we added two icons

tested the prototype of the new experience

indicating player turns.

for the app. As this time more people took

In the single player mode of the mobile app,

part in the experiment we tried different

we added two seconds delay for the

methods with small groups of them -

android’s answer (to make it feel like a real

capture everything, thinking aloud,

human thinking about the next turn)

teaching method, co-discovery, and

The appearance/visual style of the app was

coaching.

improved in order to get more aesthetically pleasing look and to resemble closer to the

Feedback

hardware board. We added buttons with the

The overall satisfaction of interaction with

shape of our laser cut buttons, made them

LUMO was quite high. (results - grade)

look like illuminated buttons when pressed and added wooden texture background. It was all hand drawn to look as natural as possible.

Test 02 We started the second test as soon as we

The previous problems were adequately fixed and they did not bother the users anymore. This time they managed to find other possibilities for improvement: As we have 5x5 grid of buttons and only the middle 3x3 buttons are needed for playing the game, the outer row of buttons is

fixed the problems which we found from the sometimes misleading (colorize/light the first experiment. We also added an on/off

outer LEDs)

switch to the hardware board. About the

Testing the new prototype for the app we

software app we made many improvements

found several interactions which could be

and before implementing them we made a

made less confusing:

prototype which we also tested. In this prototype we removed the single player mode because the main aim of the LUMO project is to play connected to the hardware

the indication of the player’s turn (the board or the phone) resembles tabs, which people try to tap

navigating back to the main menu from the

sending messages and chat. Imagine having

settings and the help screen is not clear

the LUMO board on your desk and seeing it illuminate a message while you are

Results

working?

As the development of the game is still in

OpenLUMO

progress, the next step is to improve the

The LUMO project could be released as an

discovered flaws, to implement the new

open source project. We could share the 3D

user experience for the app and to test the

models of the board and the buttons, circuit

game again. We are also planning to change

diagram, schematics and source code of the the testing place. After a quiet lab and office app and let people rebuild the platform by setting, we will ask the participants to get themselves and experiment with what else outside and move with their phone/LUMO

could be done with it. This would be a great

board and to test the

chance for students to learn about

Future The LUMO Tic Tac Toe game is just an initial prototype to test our idea in the LUMO hardware platform, later it can be easily expanded for many other purposes:

LUMO ++ We are using a 3 by 3 grid because the tic tac toe game we used for the prototype needs only this number of buttons. But actually, this grid could be scaled to many more squares. This way, it could be used for many more games or other functions.

LUMOticons The board can be used for more things than playing games. For example it can be easily used to display emoticons. Depending on the squares of the grid they could be more or less detailed.

LUMO Messenger Part of this idea is that the board could also display letters and in this way be used for

electronics and programming or for creative people to experiment and build up on our existing project.

THE HARDWARE BOARD

PRODUCT DESIGN

The layer of wood that forms the back of the device.

The printed chasis with a button placed in the matrix.

Cutting the layer of wood to form the outer casing.

ELECTRONICS

Electronic behind.

Half way.

LED array.

Everything assembled.

THE FINAL LUMO BOARD

The final layers of the board.

The board in action.

The final board assembled.

PAPER PROTOTYPE

WIREFRAME

MOBILE APP - THE GAME

MOBILE APP - START MENU

COLOR PALETTE

HEX

#6e993f

#ee3231

#f9d029

#fcf4e2

#8c5b28

RGB

60,20,100,5

0,95,90,0

0,15,95,0

0,5,15,0

35,65,95,25

COLOR DISTRIBUTION

LOGO

RESULT FROM USER EXPERIENCE TEST

LUMO Board Experience Level = 78.75 %

LUMO App Experience Level = 75%