insighted.
a project by leo silverberg (2015)
introduction During the 4th and final year of the Digital Interaction Design course at Dundee University students are asked to work on a personal honours project. This booklet is a short summary of the project undertaken by Leo Silverberg. Under the banner or Social Digital, the digital interaction design and product design course share a studio and tutors on the 7th floor of the art school. As the name implies the aim of Social Digital is to design around social problems, with a focus on digital and technological solutions. Leo’s personal honours project aims to explore the subject of sensor technology and how it’s data can be used to solve problems. During the year he has researched far and wide and identified problems with data lead human centered research, to create a set of prototypes under the name Insighted. Insighted is a research platform and accompanying mobile website that uses the sensor technology of smartphones to gather research data. The final prototype is live and can be found at insighted.co.
2
contents introduction - 2 about me - 5 insighted - 7 research & concept generation - 14 technology - 20 design - 26 conclusion - 33 acknowledgements - 34
3
4
leo silverberg INTERACTION DESIGNER
I’m a firm believer in user-centered design and iterative prototyping, with the aim to create exciting digital interaction both on and off the web. contact@leosilverberg.net leosilverberg.net @leosilverberg
5
6
insighted why
I have spent this year researching sensor technology and how to make use of the wide variety of data that comes with it. During this time I’ve discovered some problems data driven research and sought to solve them by creating a web platform that uses the sensor technology available in modern smartphones for insight gathering purposes.
in a 100 words
Collecting and curating user-insights is often a crucial part in research projects, whether it happens during the start of a design process or as a part of citizen science project. Insighted is a web platform for collecting data heavy user-insights from the sensors of modern smartphones, it lets the researcher ask participants to submit valuable data without the need of physical kits.
7
what
Insighted is a web based research platform, built to collect human centered data with the help of smartphones. As a researcher you can create collections of tasks that draws data from the various sensors of the modern phone. You can then send out those tasks to participants who can submit the requested sensor data. Each submission contains a large set of additional data useful for the researcher and the web platform acts a digital collection and curation of the insights. 8
how
Insighted is split in two, one webplatform for the researcher and a mobile site for the participant. The researcher can sign in or sign up on insighted.co, accessing a researcher account. They can then create a project folder for their research, the project acts a collector for the tasks and insights.
9
Inside the project the researcher can create the tasks, each task has a sensor specific type and aims to collect a certain kind of data from the user. The project then generates a dynamic short URL that can be sent out to any willing participant. Multiple projects can be run at the same time and they can be viewed in summary on the dashboard.
10
11
12
The participant can go onto the short URL on their smartphone browser, where they will be prompted to register or sign in. The participant can then complete the tasks with the appropriate sensor and the data is sent back to the researchers webplatform. The data will then show up inside the project on the webplatform, accompanied by a notification. Each of these insights contains complementary data such as geolocation and timestamp.
13
research & concept generation
14
At the start of this project I had a group of ideas that ranged from creating something for the creative community to exploring the area of visualizing modern science/physics. After discussing and presenting some of my ideas, I landed on exploring digital sensors, a subject I had a keen interest in, I had always been fascinated by sensor technology and data visualisation and the feedback from our tutors help solidify the support of this project direction. When I had found a direction to take I had to figure out what to do with it, sensor data is a broad subject, so I started researching the general implications and applications of it, reading about citizen science projects and the growing field of big data. I quickly got the feedback that my ideas catered to an audience that was too big, designing for everyone is like designing for no one. So I had to focus my research.
15
16
I started to investigate the use of sensor technology in the field of urban gardening/agriculture and I spoke to people running community gardens and allotments. This process help me step away from desk research and provided me with an interesting insight in to how people actually could use sensor data. I came up with a bunch of concepts for helping the urban gardening movement through the use of sensor data and presented my findings a people/design/technology format presentation. The feedback I got from this presentation informed me that my ideas lacked some clarity, they weren’t as formalized as they could have been, and looking back on it I can see that it was perhaps because, whilst I was interested in the subject of urban gardening, it wasn’t something that I really felt a deeper connection with.
17
18
I went back to my initial leads on citizen science. Reading more on how the bigger citizen science projects are carried out lead me to discover a flaw in the process, namely the fact that they rarely made use of modern sensor technology and that the projects often required the creation of physical kits for every participant to use. I then started to look for the same flaw in other research areas and came to the conclusion that it existed in design research as well, specifically in the technique of cultural probe research. I realised that in most research that required a number of participants that were not the original researcher there was a problem with resource and time consuming extra tasks and a lack of technological approach. At this point I really wanted to start building something, so after some research on various research techniques (such as like personas) I started prototyping to explore how I could collect useful sensor data for research purposes.
19
technology
20
The prototype is based on a MEANjs framework, using MongoDatabase for storing the information, Express for communication between the database and the frontend, Angular.js as javascript famework and Node as a custom server. wThe twitter Bootstrap framwork provides a responsive grid for the prototype. Among the tools I used to create the prototype we can find Grunt, which does most of the heavy lifting, Yeoman for generating templates and GitHub for revision control.
21
I initially intended to write the participant mobile part in java using android studio. I even figured out a way to use QR codes to transfer the participants to the right project, but I ran into problems concerning the sensor API and abandoned the idea of a native app. So I moved on to building the mobile prototype in the same framework as the webplatform.
22
I’m using the Google Maps javascript API to do geolocation, grabbing the smartphones location via the browser, but only sending limited data back as not to infringe too much on the user’s right to privacy
23
To solve the problem of navigating the user to the right project and tasks I coded a simple way of generating short URLs for the projects with the help of the bit.ly javascript API. This let’s me generate a shortened URL every time a project is create and the researcher can send the simple URL to the participant.
24
I had never worked in the MEAN stack before, but found it after a workshop in the Dundee MakerSpace and took an 8h youtube tutorial on the basics to get started. The tutorial series can be found at bossable.com and goes through every step necessary to set up a functioning stack and do some basic modifications, I can recommend it to anyone who wants to explore the MEAN stack.
25
design
26
To inform the visual design I had to look to the structure of the entire prototype, mapping out elements and important functions. Once I had a technical prototype up and running, an early stage prototype that displayed the information I needed, I could start applying a visual design language to the concept. I took inspiration from google’s Material design guidelines, using a grid structure for easily accessible information and looking at the color pallette for clear and complementary colors. My research into similar projects, such as Frog designs “Frogmob� and different citizen science projects, showed me common ideas for structure and how I could improve on them.
27
Pen and paper sketching was the source of most of my visual design decisions, it allowed me to quickly explore ideas. Following this I transferred the sketches to a digital, more polished, format in Illustrator and finally started coding them in CSS/HTML/js to get an understanding of the limitations of the technology.
28
29
The visual design went through many iterations, finding how to visualise the information in the best way and how to structure the elements took many tries. With the use of services such as Grunt and Codepen I could “sketch� with code quickly and try out my ideas with both animations and certain degrees of responsiveness. Feedback from other students, presentations and user testing helped me when I got stuck on certain problems.
30
31
32
conclusion To see and be part of a project that evolves from the idea stage to something tangible like a functioning prototype has been a very rewarding experience for me. It has helped me understand how much work goes into even the early stage of concept formation, and how arduous the the prototyping process can be. I have come to an understanding on how my own design process looks, with the focus-broaden-focus shaped journey and recognize some areas that need more attention in future projects. I have also discovered a love for extensive prototyping, making and problem solving, something I hope I’ll be able to do more of in the future.
33
acknowledgements Thanks to Dundee MakerSpace for introducing me to the MEANjs stack and bossable.com for teaching it to me. Thanks to StackOverflow for answering all my questions on javascript. Thanks to my tutors for the feedback and support. Thanks to my classmates for putting up with my coffee addled brain and for the support and company. Thanks to the people who volunteered for user testing. Thanks to my flatmates for accepting that I lived in the studio for a year. Thanks to DJCAD for providing a fantastic studio space and great resources. Thanks to Ali Napier for fixing the blog server, even at late night weekends.
34
35