Award Confetti logo-bs logo-dxn logo-odl Magento Piggy Bank 09AEAE68-D07E-4D40-8D42-8F832C1A04EC 79C8C7E9-0D9D-48AB-B03B-2589EFEE9380 1A734D92-E752-46DD-AA03-14CE6F5DAD57 E622E2D4-3B9C-4211-8FC3-A1CE90B7DFB2 Group 19

Our adventure in building a web app

As Gold Sponsors of New Adventures in Web Design Conference 2013, we had the opportunity to include a promotional item in the NAconf goody bag. We submitted JH Red 2b pencils for everyone to use – which went wonderfully with the Lane notebooks and Gridset Rulers which were included in there too (anyone would have thought we’d colluded on this!)

However, in the early discussions of what we’d submit, we felt like we were missing an opportunity to really express what we love, the web! – we are a digital agency after all. So we discussed the idea of creating a mini-web app that showcased Nottingham in all its glory.

We set to work in planning this mini web-app that would allow the attendees of NAConf to find the conference and workshops, the pre-conference events and the after-party, along with all the brilliant bars and restaurants that JH love and NAConf recommended. The intention of this being that it would not only help people find important locations, but it would also encourage people to socialise or share what venue they were going to be at.

We storyboarded the entire process and created case studies to test how users would use the software – all before the interface had even been decided. This allowed us to understand the core principles of what the user needed. As we’re from Nottingham, it was easy for us to take for granted navigating the city. However, for a Nottingham novice, finding your hotel, getting to bars and making it to the conference early on the Thursday can be a tricky endeavor! The city if surprisingly hard to find you’re way around if you’re new to it. So understanding the user’s mindset was vital for this project to be a success.

Unfortunately, time constraints quickly became a clear issue and because of this, we could have very easily fell into the trap of making the app a directory enquiries for Nottingham – something we definitely didn’t want.  However, due to these restrictions, we had cut a lot of the intended functionality that we had originally wanted.

Ultimately though, by cutting down on functionality we realised and focused upon the core principle of getting to your location and making sure the site loaded quickly to do so. Rather than weighing this down by the additional functionality.

This focus and understanding allowed us to begin wire framing. We knew by this point that we wanted the app to be mobile first. In most instances, people would be using this app on their phone, so we knew to design and build for this user in the primary instance and then work our way upwards.

With the wire frames established, we took the project into Photoshop and Illustrator. We didn’t want to focus too much on this aspect, in fact it was arguably the shortest part of the process. We experimented briefly with the general design guidelines of the app in Photoshop. Elements such as typefaces, colour swatches and other aspects of the project.
This while working on all the assets in Illustrator so that we could export them as SVG and PNG for fall-back.

However, part of our process was to make all design decisions in the browser. We didn’t want to fully design in the browser, as we wanted to establish some design direction in the first place, but we didn’t aim for pixel perfection in Photoshop either. This is an aspect we wanted to set the direction to and then confirm in the browser.
We found this a quite liberating and swift way of working. By detaching ourselves from the need to perfect and sign off a PSD, we could get prototyping and developing the site at an earlier stage, and using that stage to finalise the design.

Our need for speed also dictated how we would develop. We decided to detach ourselves from all library’s and plugins, opting instead for raw javascript.
In the end we designed and developed the entire project in a matter of a week, working round the clock (and in Kyle’s case, until 4am before being back up at 6:30)

The end product was a mobile first, responsive, lightweight, retina web-app that used allowed users to explore the Conference, fringe events, bars, restaurants and cafes and then get walking directions from their location.

It was a lot of work for something we weren’t even sure would get used, but it was all validated when we launched the beta and saw it in action from our peers around the city.

The impact was better than we ever could have expected. Having presented the idea to Simon Collison in passing on the Wednesday, he promptly tweeted it through the NAconf twitter account.

 

Along with it being added to the popular Conftweets NAConf feed we saw usage rocket, we even had the luxury of passing by people using our product.
Over the course of the Wednesday and Thursday, the app was used 540 times, which we we’re absolutely delighted by given there were 650 attendees at the conference.

From here, we would love to build upon the successes of what we built in such a short space of time, we feel the product has a lot of potential to be expanded or applied elsewhere.
Ultimately, we’re immensely proud of what we built and we’d love to produce further iterations of the app, bring it out of its current beta state, into a fully polished product.

To check out the app in it’s current state, its here.