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%