ID2017-group 7

From UWE Digital Media Wiki
Jump to: navigation, search

Group Members

  • Agnieszka Matuszak
  • Alex Dawson
  • Ben Molyneux
  • Nick Garratt
  • Louis Reed

Shared Media Surfaces - Locational Spaces

[Overview of observations]

Home Environment
  • Pin board
  • Refrigerator
  • Emergency supplies
  • Central heating / Air conditioning display
  • Digital photo frame
  • Mirrors
  • White boards
  • Bookcases
Public Spaces
  • Bus stop timetables
  • Bus advertising
  • Town message boards
  • Taxi Interiors/Exteriors
  • Park info boards / displays
  • Shopfront displays
  • Carpark signpost
  • Billboards
  • Interactive projection games
  • Posters
  • TV information screens
  • Room-availability screens
  • Signs posts
  • Maps
  • Projectors
  • Bus bays
  • Info displays (Above ATM's)

Photographic observations of 'Shared Media Surfaces':

float:left  float:left  float:left  float:left  float:left  float:left  float:left  Observation Doorway.jpg  Observation Busdisplay.jpeg  Observation Fridge.jpg  Observation Bookcase.jpg  Observation Whiteboard.jpg  Observation BusStop.jpg

Week 1 - Module Introduction and First Observations

The introduction to Interaction Design consisted of; the module outline, discussions about what ‘interactive’ actually means, and the difference between interaction and interface.

As an example, Daily tous les jours (2011) [1] 21 Swings installation video was presented, where the interaction between people with each other brought the community together and created new conversations that would not otherwise happen. The construction had swings, which, once used by people, would cause a melody to play. This interaction (between people and technology) formed an interesting experience and got people to try different approaches, such as not only changing the speed, but also trying to swing at the same time instead of swinging out of sync. Each experiment triggered a change in melody. This example presented clearly that people had a choice to either join the multi-interactive construction, or not if they felt too uncomfortable. This created some inspiration and made us think about what else could be created that would be just as interesting, and which would make people want to get involved when passing by.

In the other half of the session, in formed groups, we went and explored the university to find sharing-information surfaces, which began research for our upcoming project. We found TV information screens, maps, bus bays, and more (see the overview table: “Shared Media Surfaces – Locational Spaces”), which will, next week, be the starting point for a discussion of ideas on how information-sharing surfaces could be developed and improved.

Week 2 - Shared Media Surfaces

This session covered the introduction for the initial plan of the project, where the concept of 'Shared Media Surfaces' was introduced. The Interaction Design groups were asked to think about what clarifies as a 'Shared Media Surface' - multi-user interactive data points such as televisions, laptops, advertising billboards and even kitchen appliances such as refrigerators were suggested from us. There was also a critical discussion of the process of 'The Audience Funnel' from the 'Requirements and Design Space for Interactive Public Displays' by Müller, Alt, Schmidt, Michelis, 2010 [2].

Quantitate and Qualitative analysis and how it can be applied to the context, motivations, demographics and design spaces were discussed (Numerical data vs Human emotional aspect). [3] Many other subjects such as observation of human interaction and motion in urban spaces (watched a video by Whyte[4], 1988) and how to articulate and document the findings in a professional manner were also looked at.

Subsequently, group brainstorming ideas and concepts of 'Shared Media Surfaces' were collected on sticky notes (see below), after which we created an action plan for the next meeting, to go and observe public spaces ourselves.

float:left float:left

Week 3 - Observational Research and Project Idea Brainstorm

Each group member individually observed and took notes on household shared information surfaces, both digital and non-digital. A few examples from those that were observed are; a refrigerator, emergency supplies, and central heating (for the full list see the overview table: “Shared Media Surfaces – Locational Spaces”). To take our research further, we met up as a group in the city centre of Bristol to observe the public information sharing surfaces. We discovered lots of different types of these, from shop message boards and billboards to interactive game screens (see more in the “Shared Media Surfaces – Locational Spaces” table). We have also looked at systems already existing in the market:

  • Mnemosyne Berlin – Wall (Caesar, 2012) [5]
  • DAKboard (DAKboard, 2017) [6]
  • City Wall in Helsinki (Nullohm, 2007) [7]
  • The Climate Wall (Facades, Nielsen, 2009) [8]

Once we gathered our observational content, we went to a café to analyse and brainstorm ideas for project development. The ideas kept flowing based on different mediums, some of the main ones were:

  • A refrigerator system that would suggest meal ideas based on what was in the fridge. Each member would respond whether they like the recipe or not. This would make the evenings easier and more manageable for busy families, satisfying all taste preferences, and reducing household waste. Additionally, the system would have a ‘check-in’ option to inform the family if everyone will be home for dinner, and a calorie intake profile to help decide whether the recipe is good for one’s diet. In case of missing ingredients, people outside the house would be notified to grab these on the way home, and if they couldn’t there would be an option to order online.
  • Stairs as piano keys would inform the mood someone is in. Depending on how fast or slow, lightly or heavily someone goes up/down the stairs the system would play appropriate music.
  • Mirror messages would be a secretive system where people could leave messages for each other by writing on the mirror with their finger. Similar to how it is possible with steamed mirrors.

The idea that we decided to develop was a mirror installation that leaves trails in form of shadows, which would capture movement to display who has left the house, and who got in, creating an interactive piece of art. Its objectives are as follows:

  • Informing who is in the house through the art created by movement so that people can:
    • Share important information with them
    • Have a chat about how things went in the day
    • Be more involved in each other’s lives
  • Informing who has left the house and when, in order to know:
    • Whether to start making dinner yet
    • Estimate when they could be back
  • Removing the sign-in hassle followed by anger or frustration, that other applications require when one wants to use it
  • Adding an interesting feature to the house that is also fun

For next week, we will prepare a presentation and design brief that will cover the reasons for the project based on the current situation, what the project will be exactly and who it is going to impact, what the constraints will be, and the resolution and schedule for the project.

Week 4 - MOSCOW

It was almost time to present the product idea, for which we wanted a meaningful name. There was a lot of thinking and research done around this, and the final name that was chosen is Vesta. This was inspired by methodology, where Vesta was a goddess of the hearth, home, and family in Roman religion (Wikipedia, 2017).

After presenting our initial idea for the shared media surface, we looked into a MoSCoW method of what our installation must, should, could, and would have. This was to help us with the prototype development, from which we plan to receive some formative feedback.


Week 5 - In Session Feedback and Concept Development

Today, we were discussing the visual output of the product and how exactly it is going to work. Each group member presented how they would see the feedback being presented. The ideas varied from a person's shadow to a wave changing in height. The winning idea was a sound wave. The symbolism of speed = wavelength * frequency. How quickly one has passed will be represented by the height of the wave, whereas the amplitude will showcase the time since the pass-by. People passing will be captured on two RaspberryPie motion sensors placed at the start and at the end of the setup. A range of colours will be used to represent different people.

float:left   float:left   float:left

Week 6 - Components, Characteristics, Challenges, and Characters

To cover the entire project prospect and develop a prototype to an enhancing quality, crucial elements of the project were listed under four categories. First of all, the project has to have a certain feel and theme to it. The main characteristics of this project are that it is playful, social, intuitive, and with minimal interaction. The characters for which the mirror is in the process of designing, are families, and it will have an affect on its users through informing them of the comings and outgoings happening in the household during the day. The challenges that the mirror is about to face are: the technical setup, informative feedback, and pleasant visual composition. These are important features that the mirror must successfully deliver, for it to complete its purpose. The components of the projects are hardware, information, and visual art, which has to be complementing each other in a way that will create a one synchronised piece of technology.

After listing all the characteristics, characters, challenges, and components, we moved on to think how we are going to retrieve the answers. We used orange paper to list the solutions. To achieve the characteristics of the idea in a product, we will create a visual representations of the movements in form of waves, rather than a sonic alternative that would interrupt sleep at night, for example. We also plan to research previous projects, that went for a similar approach, in order to find out what went well and what went wrong.

To make sure that the product suits our characters, our team will observe the interaction with the mirror prototype in a real environment. The observation will unleash testers' behaviour and emotion towards the product. For further information, we will interview the testers to discover their thoughts and feelings about the experience and the product itself.

Our initial idea for capturing movement was a camera with face-recognition, however this quickly got removed from the plan for privacy issues matter. Instead the mirror will be using two motion sensors capturing the speed of the movement and triggering the artwork.

The components will be tested with different sized displays, for the users to get the most out of the experience at whatever size they can afford.

All of the above feedback will help us make the best of the idea, resulting in a practical complete product.

float:left float:left

After looking at these results, we came to an assumption that the name did not give away enough of the spirit of the product anymore. Thus, we changed it to In/sine (Wikipedia, 2017). This relates to an idea of the sound-wave style artwork, that was decided on in the previous week.

Smart Mirror Construction

Raspberry Pi + Touchscreen display


Requirements [9]
  • Raspberry Pi 3
  • SD Card (recommended 16gb)
  • Display
  • Reflective film [10]
  • HDMI and Power cables
  • USB/Wireless Mouse & Keyboard
  • MagicMirror2 Software [11]

To begin with connect the display and make sure your Raspberry Pi is turned on with terminal access. Enter:

bash -c "$(curl -sL"

Wait for download and installation to complete.

Once this is done the 'MagicMirror2' directory will be accessible in the root folder. The next step is to customise the setup [12] by editing the config file. Two examples of this can be found below. Follow the official PM2 guide [13] for help setting up autostart and other options.

Change display rotation to portrait

edit /boot/config.txt: sudo nano /boot/config.txt

Add the following line: display_rotate=1


Disabling the screensaver

sudo nano ~/.config/lxsession/LXDE-pi/autostart

Add the following lines:

@xset s noblank

@xset s off

@xset -dpms

Save and exit then lastly:

sudo nano /etc/lightdm/lightdm.conf

Add the following line below [SeatDefaults]

xserver-command=X -s 0 -dpms

MagicMirror2 running on a small display


Launching MagicMirror2 software:

cd ~/MagicMirror

npm start

Using PM2:

pm2 start


3rd Party modules

To install 3rd party or custom modules:

cd ~/MagicMirror/modules

git clone

Edit config/config.js

	module: 'module name',
	position: 'position',
	header: 'optional header',
	config: {
		extra option: 'value'

Custom Modules

In order to access the GPIO node.js must be used. Creating a custom module will allow interaction with motions sensors and other PIR devices. Following this 'Hello World' tutorial we were able to produce a template file for the final software.[14]

modulename/modulename.js - This is your core module script.
modulename/public - Any files in this folder can be accesed via the browser on /modulename/filename.ext.
modulename/*anyfileorfolder* Any other file or folder in the module folder can be used by the core module script.

Module.register("helloworld",{ // Default module config. defaults: { text: "Hello World!" }, // Override dom generator. getDom: function() { var wrapper = document.createElement("div"); wrapper.innerHTML = this.config.text; return wrapper; } });

Don't forget to update config!

Adding reflective film

Silver reflective film was purchased online for around £6. [15] In order for the film to stick to the display, a solution of washing up liquid and water was required to be sprayed on. The procedure is very similar to applying a screen protector on a mobile device. There is also a limited amount of time for the film to be re-arranged on the screen before the solution dries up so any trapped bubbles or final positioning needs to be completed as soon as possible.

float:left  float:left  float:left  float:left

Disassembling monitor casing and constructing the frame

In order for the computer display to have a legitimate 'Mirror' appearance the monitor's bezel and frame needed to be removed. Using plastic wedges to fit between the seal it is possible to pry open the casing. Then you are simply left with the display panel and control board. As we were under heavy time constraints we decided on using polystyrene and cardboard to build the new frame instead of wood. Stencils and templates were made and like magic, the display slides into it's new frame.

float:left  float:left  float:left  float:left

After the glue had dried final touches were made to the front bezel, extra cardboard was placed on the inside frame to tidy up the appearance. After connecting the Raspberry Pi powering up the display settings need to be tweaked in order to give the best visual effect. The backlight needs to be reduced to near 0 and if the manufacturers option is available, allow the deepest/darkest blacks to be displayed.

Launching the 'InSine' demo instantly brings the smart mirror to life!

Final prototype


Filming the promo

In order to show the purpose of our product, we filmed a short video, showcasing how In/sine helps its users in everyday lives.

Behind the scenes:

Behind-the-scenes.jpg  Insine-in-the-process.jpg  Insine-assigning-colours.jpg  float:left


Caesar, J. (2012). Mnemosyne Berlin - Wall A. Available from: [Accessed 25 October 2017].

Daily tous les jours (2011) 21 Balançoires (21 Swings). 2011. Available from: [Accessed 05 October 2017].

DAKboard (2017). Digital Photo Frame. Available from: [Accessed 15 October 2017].

Facades, M., and Nielsen, R. (2009). Climate on the Wall. Available from: [Accessed 30 October 2017].

Müller, J., Alt, F., Schmidt A., and Michelis, D. (2010) Requirements and Design Space for Interactive Public Displays., pp. 2-11.

Nullohm (2007). CityWall. Available from: [Accessed 30 October 2017].

Whyte, W., H. (1988) The Social Life of Small Urban Spaces. 2014. Available from: [Accessed 19 October 2017].

Wikipedia (2017) Vesta (mythology) Available from: [Accessed 01 November 2017]

Wikipedia (2017) Sine Available from: [Accessed 21 November 2017]