A class blog documenting our college project.

Team 1 - Creating an Interactive Map


Creating an Interactive Map

After we presented out three concepts to the clients, we took a step back from our ideas of a heads-up display helmet. The helmet idea was an exciting area to look at but perhaps not a realistic one for the client or the brief. We had to look at the users that use bikes in Dublin. Its a cultural thing that no one within the city wears a helmet, so to get them to wear a heads-up display helmet would be a challenge in itself. 

We did however get great feedback from our body storming session out on the streets of Dublin. This led our design thinking to look away from a helmet that gave live updates on air quality and more towards add ons to Dublin Bike. As a group of three we broke away and conceptualised three ideas we felt fitted the brief, our feedback from the client and the personas created in weeks previous. 


After we presented our three new ideas to the client, all slightly different than the other, we were able to pin point an area we thought best suited the the clients needs. The idea was brought about when we started to sketch out ideas of what a product would look like that showed the best air quality for Dublin Bike users. We began with an idea of the Dublin Bike having a simple indicator that reacts to live data shared, showing the bike user what the quality of air is like in the location they are in at any given time. As we went on, we started to see the project was turning into a service design. A service design that would be an add on to the already set up Dublin Bike service. The idea of an interactive map emerged when we came upon the Paris Metro interaction map. This simple map that allowed users to path out their journey by pressing one simple button let them see clearly the path they should take by highlighting the streets using LED's. The map had a large number of buttons with separate destinations, allowing the user to easily decide on their preferred location. 

4423756547_5bbf70560a.jpg (500×375):

This map really drove our design thinking, and gave us a drive to create a more interactive way for Dublin Bike users to find their way around Dublin City. 

To make this unit we needed a map. Size was something that we discussed thoroughly. We weren't sure if small and discreet would benefit what we were aiming for. Large scale, that draws attention to first time users and create a retro feel that intrigued all generations to want to participate in not only learning new routes around Dublin, but also the cleanest routes. This would educate users about air quality with out forcing anyone to learn facts and figures. The map was first drawn up in large scale on paper.


It was then brought into illustrator where the outlines were created for the laser cutter to cut out the buildings. We done this on plywood which we then build up the building with multiple cut outs to create a 3D form. 



The plans for this map unit is to be the same as the Paris Metro map, but with a slight difference. The map shows you the destination of the next Dublin Bike station to leave your bike off. The map unit gives the user the number of the station you wish to go to and the user enters the number into the bike. The bike then gives you direction options for fast route, or the clean route. 









Team 2 : Let's get digital




During our first stages a majority of our concept focused around the kits. We knew we wanted to included an online interaction too and started to talk about who we were designing for and what would they want.

After revisiting our  activities (you can read more about in Yana's blog Air Kits) and listening to teachers about what was effective in the classroom we decided we needed a number of different profiles, community, teacher and student. This was our first starting point and we created quick site maps to help  understand content and flows.

Version 1.0 sitemap 

Drawing out the site map and rethinking our persona we decided that there were way too many log in's and remembering another password might be a barrier to engagement. We did not want to add any extra work for Karen as she is busy and currently not engaged with air quality. This resulted in just one log in for the teacher while the rest of the community and the students will have a sub set of the teacher content available to them.

We created goals for the site to help set the tone and understand what we wanted to achieved.

  • I am clean and simple
  • If I am used in a classroom many can see me at once even if a group is gathered around a laptop
  • I can be used on a projector or smart board
  • My colour palette is refined, minimum with pops of colour
  • Calls to action are limited per page, no confusion please!
  • The students are the stars of the show, the focus is them
We iterated on the sitemap and considered where EPA could be used and how to include citizen science data. Once a sitemap was loosely defined we then started to make rough sketches considering the content, layout, context and user goals. We made notes beside sketches on possible interactions and what were primary actions vs secondary.

We also wanted to ensure the online experience and the offline (physical kits) felt contented and helped with the learning and sense making of the data. Using elements from the kits we created a digital representation so there would be familiarity and used it as a tool to introduce other elements about air quality like the EPA stations and data. 

considering users with sitemaps

sketching to understand flows and interactions

After receiving feedback it confirmed our thoughts on the direction we wanted to go, an open site for Karen and the community that would include a map showing areas being monitored by the EPA or the students, a page to view the the work and documentation by the students, a page with helpful homework resources and a page about the program.

The teacher view included additional pages or extra content on the community pages. Items from the teacher view could be shared onto the community view or kept private for just the class. 

After deciding the flows and how the site would scale with additional streams of water, soil and waste  (you can read a bit about the streams on Joes blog)  along with considering the features that may need to be applied as it grows we picked the key pages to develop further for Fridays presentation.

Ideally, and what we really needed to do,was to move the sketches into axure or another wire framing tool to work out all the parts in greater detail but due to time restrictions we jumped into high-fi's in photoshop and created the interactions in keynote. Here is just one example of a page and the interactions we considered.

Understanding data in the classroom, using the catching air experiment to help make EPA data relatable 



The screen based interactions on this project was interesting to work on. Next stop final presentation and promo video.

Team 2: Kits Kits Kits


We are providing both student and teacher kits that will be run over the academic year with 6th class students. Each student gets their own kit and the activities work with the existing curriculum so can be included in a number of different subjectsEach kit includes a primary air quality activity with other recommended secondary activities. These can be done in school or at home.  



The Kit is designed to be compact, long lasting and easy to use for both the teacher and student. We began by defining the contents and activities. This allowed us to then design the packaging directly for the users and the activities they would be participating in.



The packaging is all about the student and the teachers, keeping things simple and removing any barriers to the learning process.

Each dox is clearly labeled 1, 2, 3 according the stage of the programme. There is a space to write your name and class on the front edge as they will probably be stacked on a communal shelf or placed in personal cubbyholes in the classroom. When you open the box, it stays open and you’re presented with a set of labeled activity boxes, each of which contains everything required for that activity, from instruction cards to equipment





Kit 1 includes the first group of activities. Kit 1 is an introduction to Air Quality and begins to connect Air Quality with visible items through tangible learning and links to the curriculum through Maths, Science, Art and Geography.

Catching Air (Main Air Quality activity)
Student writes their name on the back of the card

Smear vaseline on the square of the card

Hang up outside in the school grounds

Record the location
Examine one or two weeks later
Compare different areas

Paper Pinwheel
Helps to understand air by making it visible

Lichen Spray
Long term project to be run over the year. Involves monitoring lichen growth in different areas and recoding its progress.

Data Paint
To begin visualising data based on pollutant values



Kit 2, Manipulating Data - NOx Diffusion tubes (Main Air Quality activity)
Sourced the diffusion tubes through the mapping for change project in the Barbican Centre.
• Place around the school grounds - opportunity to bring home
• Collect 2-3 weeks later and send for analysis

• Visualise and share results when received





Kit 3, Going Beyond the School Gates - Electronic AQ sensor (Main Air Quality activity)
We built a simple, low cost, low energy, PM & Temp Sensor which downloads readings to SD Card
Similar to diffusion tubes but with recommended take home period
Upload and share the data as a class




We spoke to some teachers we know as well as those who are studying at NCAD. They provided great insights into how the children might respond to different tasks as well as how to make the kit more attractive to them as teachers. A key insight here was, rather than expecting the teacher to become familiar with the activity before running it with the class just give them a script to read from in the teacher’s kit. 



We ran the Catching Air activity from Kit 1 with a group of 6th class students in St Catherines Down national school. This allowed us to test eek with both the teacher and students.

School Trip Video (Awaiting confirmation)
This is EEK's promotion video. Enjoy!

Team 3 The Construction Process

We began the construction process after we had finalised a sketch model incorporating all of the feedback which we had taken onboard from the user testing. And so we began to examine the technical specifications, and final form which our piece would take. Tara conceptualised a 3D model using Rhino software which she was using for the first time and picked up very quickly. Tara came forth with a really nice 3D model of what the final physical element would take



Then the physical construction process began. Things we needed to consider were the materials as part of our design we aimed to make the installation portable for the client to move to a variety of locations. Therefore, we needed to have light and durable materials, which also needed to incorporate air tight tubing for inflating the balloons. We also hoped that the materials could be shaped to appear as abstract tree branches.

We headed over to Chadwicks to investigate different materials that would suit this. We chose half inch PVC Pipes to use as the branches due to their light weight and because they are easy to bend and manipulate. We also needed to consider a durable but strong tubing to place inside the branches that would fit wiring for the leds and also provide support for the bending of the PVC tubing using a heat gun. We finally acquired a larger 2.5 inch rain pipe which we would use as the trunk for tree.

And so the construction process began....

The tubing was placed inside the PVC piping which we then began to bend and shape using a heat gun in the workshop. In the meantime we also had began some of the laser cutting which included etching information about the pollutants onto large pieces of perspex which would make up the casing for the piece.



As the tree progressed in its form, Tara began to chose the colour that we would spray it. We reviewed a number of colours but it seemed a nice copper finish would give a level of polish to the product which was already made up of cheaper light materials.



And after spraying the tree was beginning to look quite well...



Following this we brought the piece back up to the studio where we began to wire up the led's through the pipes and connect them to the arduino board. We programmed the LED's to have different values depending on the data values of each pollutant. Once we fixed the LED's in place at the end of each of the tubes we were able to attach the large multi-coloured balloons to end of each tube.

The following morning (Friday) we headed back down to the workshop to construct a wooden hexagonal base for the piece in which it would provide a housing for the Arduino, the Air Pump and the power sources.

The base was then taken out and sprayed late on Friday morning so we could begin to piece each element together in the afternoon. On Friday evening it was all beginning to take some shape.


The final piece is shown below while the finishing touches are being made





Team 1: Hi fidelity App development, physical artefact cast and Lap style user testing



Today was another busy day as Dublin Bike, Clean Link pushed forward in many areas of our design phase. We began looking towards high quality prototypes of all aspects of the design, while grounding all developments in user test, constantly bringing reiterating through tests from volunteers.

Our intention is to have a working example of the various different touches points ready to display by Monday 2pm.

Following on from a lo-fidelity paper prototype app click through, realised in Marvel app, we pushed on towards a more finished mobile application which will then be made interactive through Principle.


This time consuming process was highly rewarding as we ironed out the issues that had arisen from early iterations and sketches. We began to gain a better feel for how the feature would be perceived by the public within a new version of the Dublin Bike App.

Down in the workshop, we began to work with the Cellacast cast of the bicycle dash-board that we had made, which was taken forward to a 2 part plaster mould to be vacuum formed in plastic, to house our programmed LED interaction. This was a laborious process to take the initial cast to a state that was able to take the liquid plaster pour. Creating a bed of clay around the cast and building up the walls to have a flat backed finish on each side of the plaster moulds.
In the evening it came time for a lab style test of the LED navigation tool. The product is intended to be used out on the road with a lot of variables and unpredictability, this threw up difficulty in testing. We felt the easiest way to recreate the experience in a safe manner and enabling us to take the navigation out of the control of the tester and place it on the bike so the cyclist must follow the LED instructions, was to head out a get some GoPro footage of a route. Bringing this back into the studio and projecting onto the wall, we set up an elaborate bike rig to so user can have the feel of taking to the streets with Dublin Bike, Clean Link.


Even with all our preparation, users were encouraged to keep in mind that the bike they were using was not a Dublin Bike, 3 speed cruiser, which has the cyclist in a more upright seated position. Another disturbance to the testers experience was that the projected screen had the road appear at disorientating sharp angle. With these taken into consideration, we were given brilliant insight into the overall feel of the navigation tool. 

We now continue and move forward to correct issues highlighted and realise a high degree of finish to all our touch points.......

Team 1: Pushing forward, User Testing and Implementing Final Iterations


Today we pushed forward on the exploration of a next generation version of the Dublin Bike, which caters to the most vulnerable road users to Air Pollution, inner city cyclists.

Dublin Bike, Clean Link: The bicycle navigation tool that allows users to choose cleaner routes to get to their destination and an additional app feature which enables the commuter to plot their path prior to collection of the bike. For interested members of the public there is a detailed break down of the stats of each route, the red route being the quickest path to the station and the green route being the cleanest. For the novice user the simple choice of 2 paths offers an alternative to the quickest route, which will gently entice cyclist to be more conscious of emissions on the road, that air quality changes and has an impact on health.

The day began by having a lengthy discussion about the details of both the interface on the dashboard of the bicycle, and operation of the Clean Link feature within the Dublin Bike mobile Application. We imagine that the version 2 of Dublin Bike would be part designed in conjunction and under the guidance of the EPA.
We sketched ideas and brought these together to settle on the final design.

With the help of our technician Ed Devane we quickly programmed the interactions of the dashboard LED navigation display, to enable the team to user-test the concept. This was realised in two iterations, the initial version was hacked using handle-bar mounted lights for night time illumination of a cyclist. Once we had this prototype operating we brought it to the Dublin Bike, and based off feedback came back to the studio to begin the build of a more hi-fidelity navigation tool. This is how we imagine the final design would look. 

Deciding upon the colour sequence, we believe the centre 6 lights in green give a intuitive direction to follow forward (Green for proceed). The yellow rows of lights on the left and right, alert a user that a turn is approaching, yellow being the symbol for decrease speed, preparing to make a turn.


Our next aim was to try and replicate the
dash-board of the Dublin Bike which will have the circuit board incorporated into it, this process consisted of taking a first mould from the bicycle
 using  rolls Cellacast.

In the mean time, we began to digitise all of the Design tools that we had used to test and explore the service. Testing this design against our primary user ( from our personas the design is specifically looking to target Stephen and Claire) and the context of use of our product. This involved a service blueprint, heuristic evaluation and persona scenarios.

We also began the process of using Adobe After Effects as a way of demonstrating the functions of our design, as many of our early user testing has required the tester to self direct the navigation tool.  This is a problem that we believe through careful thought, a projector and a static cycle bike we can over come to get the best insights from users........