Sunday, December 23, 2012

R/GA’s Make Day 2: Make it Work

Make Day idea is simple: spend a day or two making whatever you want. R/GA’s take is to allow everybody in the office to form teams and work on cool ideas without the pressure and politics of client work. Basically, make cool stuff with your mates, collaborate, create and deliver, and why not, show off your skills a bit!

This is the second Make Day R/GA executes. Lets take a quick look at what we did last year, and then move own to this year’s project.

Last Year’s Make Day

Last year R/GA, the company I’m working with at the moment, made their first Make Day event. It was full of creative, crazy and not so crazy ideas, many of them published on the web. You can also take a look at last year’s pictures. Below I have included the video of last year’s event, if you care to watch it.

2011 R/GA’s Make Day Official Video

The R/GA Colleague Locator

The first year it was about experimenting with the new technologies like Windows Phone and Windows 8, which at the time were in early development and without much short-term client potential. Although I was busy dealing with client projects, I managed to put together a multi-tier RESTful services backend on a dedicated server and a Windows Store application running on a tablet device.


This Year



This year however, R/GA wanted to take advantage of the event and push people to build cool stuff that could potentially help the business. There were five inspiration briefs aligned with some of the current or potential work to come, so people could give a bit more context to the ideas. Additionally, one of this year’s predominant criteria, was the “finish-ness” of the project.

Make Day 2012 was a challenge for me. I had been extremely busy working on a couple of big retail projects. I had been travelling around the world quite a lot, and I had a couple of days of in Paris before the event to celebrate my anniversary with my wife. This left me with no time at all to prepare ideas or train on any of the technologies and concepts I was interested in. Furthermore, I was sure I was just going to have a day to work on the project, since this time we only had a full day and then a few hours next day to prepare the presentation.


Luckily, my friend and colleague Danny Lee (.net developer, fifth from left; who, by the way, just started his own technical blog after months of pushing him to do so!) had a great idea of using Windows 8 as a platform to create a non-linear simple presentation tool. The idea was on brief (kind of a “kill PowerPoint” inspiration), and along with our colleague, Julia Werth (experience designer, fourth from left), they put the concept together and starting developing the prototype. They also recruited Rob (designer, far left), Johanna (researcher, second from left), Charlotte (copywriter, third from left).

The Make Day Project

Danny and Julia put together the base concept, which was founded on the following goals:

  1. Create a useful and compelling way to use secondary screens on presentations.
  2. Create a non-linear presentation tool that enriches presentations and conversations with clients.


The proposed solution was to separate the deck’s thinking from the supporting content over two screens. The supporting content would be triggered from the first screen (controller), and played full screen on the second screen. The controller view would be implemented using the modern Windows grid structure. The deck’s thinking would then take most of the space in the form of larger tiles, leaving space to smaller, supporting content tiles on the side.

WinRT’s native horizontal scrolling pattern works great with the grid layout, allowing the presenter to naturally flow through the presentation and even go back and forward at any time, and any point, with just the slide of a finger. At the same time, people using second screens would be able to then see specific images, diagrams, documents or websites within the second screen application.

By Make Day, the team had already advanced on the concept. The experience design was in place and designs were on their way. We were going to create a few cool presentations using the tool that we were building at the same time. 

Controller App

Danny was responsible for the WinRT controller app, and during the rest of the day, he completed the listing view, the basic deck builder, and the player. The app was fluid, simple and intuitive to use. It provides a clean deck template, allows online links of pages, videos and images to be added to the deck and is simple to play and navigate in a flexible way.


The list view presents a tile-like library with the decks that have been created. Users can add new decks from the app bar.


The deck builder view allows to manage the deck. Here you enter the deck’s information and add slides (or histories as I see them).


Each slide can be then edited. Users can enter the main message and add the supporting content. The additional content can be images, video links or web links.


Once a deck is saved, it can be played. Now, playing a deck would need to send the supporting content to all the other additional screens, so here’s where integration with the second screen comes into play.

Second Screen App

I had one day to put together the second screen app. Now, the second app required a way to connect, even remotely and over the Internet, to the main presenter, so all connected screens could receive the supporting content in real time. Not an easy task with just one day, but I was confident, after all. Doing this kind of stuff is actually quite fun!


For the services infrastructure, I wanted to use the Windows Azure Mobile Services. I have been prototyping a few apps using them, and I knew it was an effective and easy-to-setup way to provide connectivity between the apps. The WinRT app had to work on all Windows 8 and Windows RT tablets, but it was going to be a simple full screen app. Additionally, to be able to build and test the app, I needed to have a mock of the controller to save and play the decks.

Using the Cloud

I designed the data structures to be stored in the cloud, which both apps would use to store and retrieve the deck’s data and status. Mobile Services gives you simple, connected, SQL database capabilities. You can create tables, manage the database and perform queries easily over the Internet. Once the services are up and running you can start connecting and using them. On the portal you will be able to get the usage stats and the general info.


I created the corresponding instances, and in no time, I had my cloud storage and service endpoints ready to go. The beauty is that both the storage and the services can be scaled up or down elastically at any time. Services can easily be consumed by Windows, Android and iOS devices and the web through your own RESTful data endpoints. Windows Azure also gives you advanced SQL management capabilities, very much like a local SQL database.


I was tempted to use ASP.NET Web API for the cloud services, since is a more robust MVC-based framework to build modern RESTful platform, however Mobile Services was easier to setup up and up to the task.

Building the WinRT App


Once the services were created, I quickly implemented the .NET solution to contain both the mock controller app, and the second screen app. The mock app was quick since I didn’t care about UI. I coded the functionality to create and store a deck in the cloud, display the list of decks and update an existing deck. I took care to implement the mock up in an efficient way, so I could then ported to the real controller app and integrate the code quickly and easily.

For the Viewer Application, I created the connect view, which allows the user to enter a friendly deck code to connect to the presentation through the cloud. If no deck with the given code is found, the app tells the user to enter another code. If the deck record is found, the app retrieves its information and transitions to the viewer state. All this is done through the cloud services by querying the corresponding table. 


Once the app is connected, it waits for content from the controller app.When the presenter taps into a supporting content tile, the app then notifies the cloud of the content to play and persists the information for all clients to get.


For this scenario, I had the viewer app querying the corresponding deck record to retrieve the playback status and the supporting content data if available. It worth mentioning that there are several ways to do this. At the beginning I wanted to use the Push Notification Services, but it turns out that you need to have your app submitted in the marketplace in order to use them. Using the ASP.NET Web API could also have given me other options. However, just to keep it simple and functional, I had the timers. Each client connected to the deck record will then be querying the cloud to see if there is content to be displayed. This approach carries small delays, although they were generally less than half a second.


The presenter can clear the second screens at any time by pressing a button from the app bar. At the same time, any supporting content from any slide on the deck can be broadcasted to all clients, allowing viewers to get a better view and have rich supporting content along the main presentation.

The Awards


We presented our project along with more than a dozen teams. There was a lot to see, from touch-enabled fruit controller games and crazy surrealistic videos to a  Japanese-talking ping pong table. Most of the projects were quite off brief, although some of us tried to build something with more client-work potential. There was another team inspired by the same brief as ours, but they focused on a web app for doing remote presentations through the cloud.


All in all, we didn’t win the first prize (which of course went to the talking ping pong table as we all knew), but we got a special recognition prize during our Christmas Party at the London Zoo. Our project also got some comments from the judges including “amazing technology execution” and “brilliant tech”, along with “the longest presentation”!

It was a good Make Day in fact. Even with so little time, we were able to create a fully functional and polished system to create, manage and present multi-screen enabled, non-linear presentations. The system works using the power and scalability of the cloud, while being able to run on any Windows 8 or Windows RT machine. For the presentation we used Intel Lenovo laptops, a Samsung Slate 7 Windows 8 tablet, an Asus Intel tablet, an Asus Vivo Tab RT and a Microsoft Surface RT tablet. All of them in sync, displaying the supporting content of the main presentation, while we were in fact, presenting our project. Not bad, I would say.

I’m also quite happy to have some many people on board with Windows 8 within the company. When I joined R/GA, .NET was seen as something to be used only for custom CMS or backend, data driven platforms when customers had already a .NET infrastructure. I quickly introduced the advantages of developing .NET frontend applications with WPF, Silverlight, PixelSense (formerly Surface 2.0) and Windows Phone. The new approach quickly overtook flash development (thanks mostly to Apple banning flash on iOS devices and the anti-plugin campaign on the web). As soon as Windows 8 was announced, I started to introduce colleagues and team members to the new platform.

R/GA 2011 was our first attempt to showcase a frontend .NET system to the company. We built a .NET Colleague Locator system using Silverlight, Windows Phone and Windows 8, using RESTful .NET services. This year, we deliver a fully functional WinRT system for Windows 8 and Windows RT that allows users to create, edit and present non-linear decks on a multi-screen environment. Both were done in an amazing short time, and both worked right off the bat. The important bit here is how quickly you can build services and applications when using the .NET platform. Hopefully, the managers and executives in the company are starting to realize the renovated power of the Windows ecosystem and the underlying technologies.

What’s Next

Hopefully the company will see the potential of our project and will give us sometime to enhanced and extend it. Among the stuff that I would like to implement to make it better will be to add local network capabilities, so content can be transmitted faster and in a private secure manner within the private local network. Protocols such as DNLA for streaming content to DNLA enabled devices will be cool. Sockets could also be used to broadcast content to connected local clients. I would also like to explore the use of SignalR and Web API to build more robust multi-purpose real-time services. I would also like to implement viewer input capabilities, so users can add comments, ask questions and include annotations to the presentation from the second screen app. Finally, I would like to build the Windows Phone clients (7.5, 7.8 and 8) so users can connect with their phones, and just for the fun of it, create an ASP.NET MVC 4.0 web client. I might even consider bringing on-board an Android and an iOS devs to create native clients for those platforms. All in all, it couldn’t be more than a couple of days more, right?

Maker is the new Role

Make Day has been successful event. Is clear that we work with talented people, and that we are capable of putting together teams and come up with our own ideas and projects to challenge and push the boundaries of what we can do.

It is worth mentioning that technical skills clearly make the difference. Projects with just managers, producers or designers are not capable of making, and is generally the tech makers who bring ideas to “life”. The technical folks are, or at least should, step up from a creative and idea execution standpoint.

I believe that tech-savvy people will become much more creative in the next following years, and creative and technical makers will eventually overtake more administrative roles. This is the natural evolution in our industry. We, as the true makers of digital experiences, need to take a more predominant role in their execution, from the sells pitch, to the idea creation, through the creative process, to the execution and delivery. Make Day is a great practical example of this reality.

Share your Thoughts!

Hope you like the project and the execution. I’ll post the final video as soon as is published by the company.

Please let me know your thoughts and comments. I’m also happy to get in touch and help you implement a Make Day event in your own company.


  1. Our project also got some comments from the judges including “amazing technology execution” and “brilliant tech”, along with “the longest presentation”!

    IT Managed