Video available at - http://www.youtube.com/watch?v=SV5QiZLFc8o

Through the use of the most ubiquitous form of electronic communication, the phone call, anyone can share what matters to them, with whoever is interested.

Caller captures all the emotion in the voice and broadcasts it effortlessly through an online interface, or a location based call back alert system.

Catering for the simplest of mobile phones, to the most sophisticated mobile and desktop devices, Caller works perfectly through your phone, or through the interactive realtime web interface.

August 2012 – Journalism

During the Summer of 2012 I found myself with 4 weeks in London with pretty much nothing to do. I organised this time on a whim and wanted to use it as a time to just get away from Dundee and to give myself time to think. Privately I had built myself up for my Honours Project. All my work of 1st, 2nd and 3rd year was leading towards my 4th year, my project, my opportunity to show I am personally capable of.

In May of 2012 I handed over the reigns over The Magdalen, the Dundee University Students’ Magazine to the new Editor who was to replace me. Through this I had spent a lot of surrounding myself with people intensely interested in journalism and this rubbed off on me. Whist I never really saw myself as a journalist, the importance of journalism and it’s place in society was irreversibly impressed on me. Journalism seemed like a good direction to start looking in for my project.

One day in London I found myself on Twitter and it was alive with people tweeting about Julian Assange and the alleged threats to remove him from the Ecuadorian Embassy in London where he is still pursuing political asylum. It was an insightful experience, which ultimately led me to appreciate a continued need to provide everyday people with a platform to share their thought and opinions.

Semester 1 - Maps

Returning from London I was itching to make and build but worked hard to restrain myself. I was careful to take time to research, read and absorb before coming to conclusions. A lot of this time was learning about the tools that are already out there. Understanding how they have grown and changed to how they are what they are today.

Semester 1 was also when I become interested in maps. I long believed that location awareness would feature strongly in some kind of Citizen Journalism tool, but I always thought maps would simply be a side vehicle, and not the primary interface element of my final product. My early experiments with GoogleMaps and MapBox, two leading online mapping services, was fun and poignant. Maps are capable of telling a story so effortlessly. Placing information on a map where it belongs builds an understanding that can’t be achieved from a list of arbitrary addresses or coordinates.

MozFest - The Internet

I have written at length about my time at MozFest, so I will save the detail. Suffice to say MozFest taught me that the web is king. It is the king technology that brings everything else together, so rightly, it is at the centre of my project, connecting simple phones, with sophisticated web applications through simple interactions.

2013 - Build

The start of a fresh semester saw a new drive and determination to finalise the details of the design and technology of the project. I was sat between building a service which was text and image based, or voice based.

Voice prevailed. Voice is more open and accessible. No matter the kind of phone, as long as you can text and call, you can use the service. A product built around images and text would have be restricted to those with smartphones and a data connection. Two things a lot of people do not have. The voice and text network on the other hand is far wider and reliable. The perfect network for a Citizen Journalism tool.

Technology - Learning

Realising any idea in a real technology has been consistently import from the beginning of this project. Whatever experience I was to deliver, I knew I wanted that to be real and dynamic.

The technology I chose to use was certainly the most ambitious I have chosen to use to date, and was an incredibly testing challenge. Starting small, I initially built a call in service called ‘Ask Dundee’ as a simple proof of concept and proof of technology. I was able to receive calls and tweet the recordings that people left. Once I knew I could do this I fully committed to building a working prototype for my project.

This wasn’t a difficult decision to make, it was just very difficult to deliver on. I did though. Subsequently people can actually use what I’ve built, and truly experience the interaction that I was designing.

Design & Visual Language - Pushing

The visual language of this project has been really hard. Between Mk.1 and Mk. 2 I thought I had my design decided and finished. In reality though, I hadn’t pushed hard enough. The designs I had were good, but not great. To get to great I really had to push outside of my comfort zone, whilst stilling applying my personal taste. I completely rewrote my core design language, and continued to tweak and polish the design. The finished product is not what I would have expected to have created, as it’s not something I thought I could have designed well.

To Conclude

From the original seed, Caller is true to what I set out to create.

These designs are not final, but represent a simpler approach, embracing a broader and stronger colour palette. This design responds to a number of screen sizes, scaling perfectly between a large desktop to an iPhone.

I have learnt through this project that working with Maps can be particularly difficult. As a graphical element they are unpredictable  yet fall within certain rules. You know and understand what colours and geometry will feature but you don’t know how they will lay themselves out. In my previous design I had ran my map to the full borders of the screen. Whilst focused the user entirely on the map, it was very difficult to design graphics that could compliment a harsh urban environment like London, and a softer flowing city such as Dundee.

To reign in control over this issue I decided to bring the map in some what from the edges. This instantly gave me a much more controllable shape that I could design graphics to compliment. Introducing a top bar which drops behind the map gives a sense of depth and framing which I was unable to achieve before. This has also created room for the time slider to comfortably sit at the bottom of the window without intruding into the space occupied by the map.

I thought now would serve as a good time to look back at my progress which I had forecasted before Mk. 1 and see how much I have actually achieved. Below is the Feature List I put together before Mk. 1 as a guide for my work. After Mk. 1 I didn’t think this was realistic but now reflecting on it I can identify how closely I have actually stuck to this, and how this has seriously helped the building phase.

Mk. 1

• Receive Calls
• - Create Users (if not already a member)
• - Recognise User (if already a member)
• - Text User for Reverse Geocoding Location for Mapping
• - Map Incoming Calls
• Web Interface
• - ‘Mobile First’ View
• - Return all updates irrespective of recentness
• Users
• - Verify User Accounts by Text Message

The Map Markers for example have undergone a rather extreme redesign. Originally these markers where to be rectangles containing avatars, names and votes of updates and were essentially cut down versions of the larger map pop ups. Creating these was more difficult than I had anticipated, but was possible. The larger pop ups are drawn in CSS so styling these was rather easy but the markers are created using SVG (Scalable Vector Graphic) paths. SVG’s essentially let you ‘code’ a shape which the browser can then render so that it will be sharp and the correct scale on any browser/screen. Fortunately Adobe Illustrator allows you to export illustrations as SVG images. So I created a board with just the shape I needed, exported it, and then opened the image with a code editor. Within this was the path (coordinates) which I was able to give to GoogleMaps to render the correct shape.

Once I had these on the map though I began to realise how much space these took up when a large number of updates were on the map. They were also rather in effective at expressing information about the recordings in a graphical way. This was the point at which I decided to redesign these as coloured circles.

When an updated is created it is blue and about 20px wide. The blue represents a neutral lack of votes, the size represents its recentness. As a recording receives it will change colour towards red or green. It will also begin to shrink as it becomes older.

The navigate through older recordings, there is a slider which turns back the clock. The recordings return to their original size revealing updates that might now be lost. This video demonstrates the organic nature of these recordings being created, and them eventually dying off.

Markers Updating

There is still work to be done in making these markers more accurately display the nature of the updates, but this should be light work.

Our Mk. 2 presentations are in a little over a week, at which point I will have completed designs for my time filtering and alert aspects of my project. These are two areas which have been some what neglected in the face of refining the core user experience, but have resolutely remained at the back of my mind.  For this blog post then I will give an in-depth overview of the technology as it is at the moment, revealing why it’s development has been complex, yet very rewarding.

Back End – Ruby on Rails

Ruby on Rails is a Model-View-Controller (MVC) based application framework built on the Ruby language. What this actually means is that ‘Rails’ is a set of programming actions and structures which can be commonly found in my many web based applications, thus speeding up the development time of new such applications.

At the beginning of this process I had no experience with Rails or with a Model-View-Controller framework so the learning curve was quite tough.

What the Rails App Does

The rails application runs on a web server, and manages the creation of all users and their content. It manages how people interact with this content, knowing what content to show when. The rails application also communicates with external services to give my project access to technology other people have built.

Twilio

Twilio is the telephony service that allows this project to move from simply concept to reality. Twilio offer an API (Application Programming Interface) which developers can use to make and receive telephone calls and text messages (SMS). With Twilio you simply purchase a number and then tell Twilio a webpage to request, on your server, for calls and text messages (usually two different pages). On these pages you display instructions for Twilio to execute.

Twilio + Rails

When creating an account with my app you must give your phone number. When you call the number for my app you are recognised instantly by your phone number and personally greeted. Rails then makes a number of decisions as to how to handle your call and what instructions to display to Twilio. If you are recognised, Rails will tell Twilio to record a message from you then to send you a text message afterwards. If you are not a member, Twilio will politely ask you to create an account on the website and call back afterwards.

The text message which Twilio then sends you is requesting the location of where you made the call. This is where Google comes into the picture.

Google Location Services, GoogleMaps, & GoogleStreetview

This project has long been inspired by the beauty held within maps and overlaying relevant information onto them to make them more useful and relatable. My app extensively makes use of a number of Google services.

Google Location Services

Google Location services are used for two primary purposes:

1. Finding the geographical location of a website visitor.
2. Geocoding user generated content.

When visiting the site for the first time, your browser will ask if you give permission for my site to know your current location. If you allow, then this information is gathered from information such as your IP address and sent to Google. Google then return a latitude and longitude for your current location, and the nearest postal address. This is then used to centre the map on the screen around where you are.

Whilst the map is being loaded your postal address is then being sent to the rails application to find updates that are within a certain distance of you. These results are then fed back to the webpage where GoogleMaps handles the information.

Another use for this technology is when a user is texting in the location of the update which they have left. After making a successful call, the app will text the user requesting their location. When the user replies with a location this address is then sent to Google to be geocoded into a latitude and longitude so that it can be accurately placed on the map.

GoogleMaps APi

GoogleMaps is used to provide the maps images for this app, but along comes with a lot of additional functionality. One such function is the placement of markers on to a map and specified locations. As mentioned above, updates within the vicinity of the current users are returned to the web page and GoogleMaps then places these as small markers. Along with these markers are pop windows which are hidden from view by default. With the updates that are sent back to the webpage is information such as the creators name, avatar, recording of course, and the number of votes which the update has received. When clicking on the markers the map is recentred onto this update and then the pop up appears.

Google StreetView

StreetView brings images captured from vehicles traveling the roads of the world. To make the updates that people are leaving on the app more relatable, the nearest Google Streetview image is grabbed from the location and placed on top of the update. These images are chosen dynamically according to where you are viewing the site from. They are such a great resource for their images as they so reliable and consistent.

Pusher

The recordings that people are creating are happening ‘right now’, so it only makes sense that these are available as soon as they can be. For those viewing the website I use a realtime technology called Pusher to drop new updates on the map as soon as they have been created. Pusher works by creating a channel between all those viewing the website and the web server. When new data is added to my Rails application this is pushed to all those looking at the website, via Javascript, and loaded onto the map. I also plan to use Pusher to push votes to all those viewing the website, to help viewers understand which recordings are being voted on in realtime.

HTML, CSS & JQuery

Nothing too exciting to talk about here. This side of the site fairly straightforward. The content which is being pushed to the page by the Rails App and by the numerous Google service is actually fairly simple. This is what i would call the front end development, and is mainly a task of taking the designs I created in Illustrator and bringing them to life. HTML is the content, CSS is the styling (colours, dimensions etc) and JQuery makes it move about. Pretty simple.

Upcoming Challenges

The two fews weeks will hopefully we lighter on the development side of things, allowing my to focus on refining design and user experience. Two major goals at the moment are the implementation of alerts system and the time filtering. As mentioned these are very important and will get the attention they require soon.

Map Marker

Updates on the network will be represented by markers comprising of a users avatar, their name, time since created, and the number of votes that the update has received.

I have worked hard to keep this as simple as possible, whilst remaining clear and removed from the map. A thin outline and soft shadow life the marker off the map ever so slightly, whilst the white background colour pops from the colour scheme of the GoogleMaps interface. The avatar is circular to keep the marker looking as smooth as possible and to keep visible straight lines to a minimum. On the maps I have been using the, the shapes that make up the map are very organic and slightly unorganised, so this smoothing fits well.

Map Marker Notification

Users can vote on which updates they think are important and deserve more publicity. These votes are then feedback to other users in realtime to notify them of which updates they should take notice of.

The marker is the same as the above image, when a vote is counted a soft blue light will pulse once from underneath the marker to casually drawn the attention of any users who happen to be watching the map at the time. The more votes an update receives  the more often an update will pulse.

This feature is still in the hypothetical stage and I fear that this pulsing could become rather annoying if there were a large number of votes coming through in quick succession  Testing will be required.

Map Pop Up

Clicking on a maker creates a pop up for that piece of content containing the recording itself, a street view image from that location, the ability to vote on the update, and the social network sharing buttons.

In keeping with the map maker, I have been conscious to keep this as simple as possible whilst providing enough information to be of added value to the map maker. The voting, social sharing, and playback functionality is as expected, but the Street View image is a recent addition that I have not previously discussed.

The use of the Street View image is to give a greater depth of understanding of the area in which the photograph was taken. Using the colourful road maps to navigate the updates works very well. These maps are clear and very easy to read, but give little representation of what it is actually like on the ground. The above example is the image which would appear for the Law Hill, where that marker is placed.

I have reiterated this point a number of times, but for completeness  I will repeat how I important and high risk I deemed the technology in this project. I knew that tackling the most complex aspects of my project early would leave me a without a lot more flexibility and room to hone the design and interactions in my project.

Design has not however been completely rejected, but it is far from complete. The following slides are those which I presented at my Mk. 1 Presentation.

The presentation went very well and I am not left with a clear direction in which to take this. I need to take a lot of time now and focus on design and my key feature/features. What on ‘thing’ makes this special? This will be rooted in a technology which I have built on top of the platforms that I’m using, but which it is, I don’t know yet. An alert system which I mentioned in my presentation may very well be that. Users cold alerts within the service for when content is added which matches some parameters they choose. For example, the service could call a user and play them any recordings that happen within in DD2 right after they happen. This feature would further the openness and accessibility of the service,  bringing tailored, accurate content to people who may not even have access to a computer.

One area which I need to very much focus on is the iconography and information design of how users are interacting with content, and how old it is. The slides above give some indication of this, but are still in the very early stages of development. A point which came up in the crit after the presentation was whether I should look to convention for voting iconography, or whether this feature is central enough to the operation of this project that I need to development my own visual language. Right now, I think I’m heading towards trusting convention. I don’t want to distract or confuse users for the sake of adding a new feature which for all intensive purposes acts in the same way as voting mechanisms on other sites and services. I will not rule this out just now though.

Next stop, Mk. 2.