NV Interactive pioneer HTML5 and Javascript for native apps

View all articles
Article Image

6356640545_041bcda13d_b

Matt Pickering with Technical Director and Co-Founder Gus Pickering. They're brothers - can you tell?

If you're a cricket fan you probably already use Cricinfo, whether via the website, iOS app, or Windows Phone and Windows 8. The Windows 8 app is billed as 'the most beautiful way yet to follow cricket', but NV Interactive, the team who built the app, had to face the huge challenge of building the live scoring system in order to deliver all that goodness to cricket fans all over the world. Managing Director and NV Co-Founder Matt Pickering explains how they did it...

"NV first engaged with ESPNCricinfo (then Cricinfo) back in 2005 when we developing their Ball by Ball Live scoring software. This was a mammoth and highly technical project at the time, and the platform still drives the live scoring for every game of premier or international cricket played in the world.

One of the outcomes of this project was that our team developed an extremely technical and complete understanding of the many many permutations of a game of cricket and the subtleties of the rules of the game. This has stood us in very good stead in many cricket related projects over the intervening years.

We hadn't really engaged too much since then, but last year while we were on a business trip to the UK we touched base with our contacts there and the work we were doing with Windows 8 piqued their interest. It was great timing - they were about to commission a Windows 8 app. About 30 minutes before we were due to fly out we met with the right person and by the time we landed in Shanghai we'd got an email to confirm we'd won the job!

Interestingly, when it came to the Windows 8 app project, we found ourselves in the position of working with data feeds that we had created. Which was very helpful given the extremely tight timeframes!

The overarching goal of the app is to give the user a comprehensive view of cricket being played around the world right now. We want users to feel like the app is giving them just the kind of content they want, without making them work for it. The Cricinfo website is a fantastic resource and gives a really broad view of cricket, historical content and in depth analysis. We wanted the app to complement the website experience, not recreate it. We wanted to build something that cricket fans would want to use every day, wherever they were.

Screen shot 4

We came up with the idea through a lot of scribbling on whiteboards, and a lot of hassling the cricket fans in the office about how they'd like to watch cricket if they could choose. We'd already built a Windows 8 app for New Zealand Cricket, and from this we had a lot of ideas about how we could organize cricket content. This was a chance to put these ideas into practice, but on a much bigger scale.

Early on we made the decision to keep things as simple as possible. This wasn't just a UX decision, it was also a response to the short timeframe that we were facing as we raced to have the app complete for GA. It made sense to ship an app that did just a few things, but did them very well.

All of the features that made it into the final app had to earn their place. We were pretty ruthless about cutting out unnecessary features, if it was just a "nice to have" then it would get cut. Eventually we concentrated on live cricket being played right now, the state of series being played now, and giving users a great reading experience for the editorial content that gets generated each day.

Screen shot 7

The scope for this project was pretty broad, but we knew the product very well from the website and existing apps. We designed the app from a fan's perspective - we're massive cricket fans ourselves and we know and love the game so we really focused on building something we'd want to use ourselves and what content was most useful to follow the game.

We knew the editorial content and live scoring were important to Cricinfo which helped us make decisions like making use of large photography. Having access to such rich and deep content was also a real luxury - Cricinfo is the undisputed home of cricket online and the hard part was choosing what to include!

Screen shot 8

The elegance of the Windows 8 app design principles allowed us to expose an extremely large amount of content without sacrificing discoverability and user experience. A major strength of Windows 8 apps is the new types of Information Architecture possible which really makes a content-first strategy practical. By using hubs and appropriate clusters of information (aided by Symantec Zoom), content rich apps are able to really come into their own.

Screen shot 6

Platform specific features such as Live Tiles are a compelling way of enticing the user back into the app, but also allowing them to keep up to date with the latest news headlines from ESPN and making content available natively on the Windows 8 platform.

Screen shot 1

Likewise, Toast Notifications have proven to be an extremely useful way of ensuring the user is informed of sporting events of interest, again further enticing the user to open the app again. Snapped view is a unique way for users to 'multi-task' by following the live sport while using other apps which might be important such as while they're working. This is something other mobile and tablet platforms just cannot offer.

In short, the user experience is second to none. We've received a lot of positive feedback on this app and are very proud of the end result. It has been held up by many as a stunning example of what Windows 8 technology can do. A huge amount of credit has to go to our client for being so brave and trusting us to push the boundaries so far.

We pride ourselves on our delivery of creative and thinking, and this project was no different. We put a lot of care and attention into our initial design and scoping documents. These need to be very clear and demonstrate our approach, thinking and then the creative/design application very clearly. They need to translate this to the client for them to understand what we are building and why we have done things certain ways.

We also understand these documents sometimes need to be seen by different levels within the client organisation so they need to be consumable by a project lead or a senior manager. We've really honed this process over the last 15 years of delivering digital products.

As far as the build goes, we elected to use HTML5 and JavaScript on this project - and all Windows 8 projects for that matter. We're a design led company and we find that the HTML5/JS route supports this well. The C# and XAML approach tends to be very developer centric - which is absolutely fine but it means that the devs do a lot of the UX integration which seems crazy in a project like this!

As an established and experienced web development team, we were able to leverage our existing HTML5 and JavaScript skillsets and apply directly to Windows 8 app development. Visual Studio was used exclusively for the HTML5 and JavaScript development which provided massive productivity gains for the team. And our strong web background makes a big difference in how we use HTML5 in projects like this.

One of the biggest challenges was testing the toast notifications triggered by the live scoring system. This isn't something you can easily fake in late stage testing - so our poor team had to watch a lot of cricket, waiting for wickets, to make sure that everything worked perfectly. It was one of the first times in memory that there was a fight over who got to do the testing!

image

Overall though, the biggest challenge was the timeframe - and the fact that we were breaking new ground in pushing the Windows 8 design principles so far. We only had 10 weeks to have the app live in store before Windows 8 publically launched so we had very little time to play with. And the Store at this stage was almost empty and there were certainly no comparable apps for us to draw inspiration from. So we just did what we do best - evaluated the problem and keep iterating until we had the best and simplest solution.

We were one of the first Windows 8 apps of scale to deploy ads in apps which was an interesting experience. Luckily we were able to work closely with an expert in the US to work through the issues.

NV's interactive design team took to the Windows Store apps and design principles extremely quickly, and learned a great deal from the early stage focus on the AER process. This allowed us to gain a really deep understanding of the Windows 8 design principles. This design language has proven such a good fit for our content-first and responsive web design approach that we're now thrilled to be recognised as one of the top Windows 8 design agencies in the world.

We've also been very fortunate to have worked on a number of high profile Windows 8 apps that have been getting quite a bit of press and other recognition. These opportunities have been with amazing clients that trusted us and like our team, saw the potential of the Windows 8 platform to really do something special.

Off the back of these apps, we were invited to work on a best practice Windows 8 app and a companion Windows Phone 8 app for the Windows team at Microsoft Corporate. Excitingly this project was recently launched and showcased at the //BUILD conference in San Francisco, and will soon be publically available for a whole new generation of apps developers to learn from.

Although very little retraining was required, we have still made significant changes to our business to better handle the increased opportunities Windows 8 is bringing to NV. One specific example is recruitment. Not only has Windows 8 created increased employment opportunities at NV, all developer and designer interviews now include a discussion around Windows 8.

NV Interactive isn't your typical Microsoft Partner. We're a design-led digital agency. We don't sell technology. We employ more designers than we do developers. We win design and advertising awards. To that end, our business is split roughly one third design, one third development and one third strategy - and it is this strategic thinking that underpins everything that we do.

Our teams are intermingled with designers working next to and with the developers and front end integrators. In fact many in our wider team are both designers & developers, an extremely powerful combination in projects such as this. We've found that this close relationship between all the disciplines reinforces the 'single team' mantra, avoids 'siloing' and allows us to deliver the best possible outcome for every project.

We've been designing and building websites for a long time, and there are a lot of hurdles that we just accept as part of the process. Designing and building HTML5/JS apps for Windows 8 is like taking all the good parts of website development, without a lot of the bad parts, like browser compatibility and capabilities, screen size, file size and bandwidth consideration. Imagine the luxury of designing and building a web application for a single version of a single browser with a known but limited range of screen resolutions.

cricinfo_visualdesign

Then there's the focus on quality and the user experience invested into the Windows 8 design principles. Whilst there are numerous bad apps, these guides and rules provide an incredibly powerful framework against which to craft beautiful and highly usable experiences.

image

Cricket and technology have always been happy bedfellows. ESPNcricinfo.com continues to grow in every market and traditionally it's been a site whose users appear to be early adopters - this has translated very naturally to mobile devices and apps. That fundamental aspect aside, the app is one of the few in the store that has been truly designed. Every aspect of the app was crafted from the snap view to the lean back mode and this comes through - even non cricket fans can appreciate the attention to detail.

image

The net result of this is that both the ESPN Cricinfo app, and the ESPN FC app, have both maintained store ratings above 4 in all markets since launch. People recognize quality. It's a testament to the power of our design led approach.

As far as promotion's concerned, we were lucky enough that the app was part of the Windows 8 launch promotional activities, with kiosks installed a key locations around London and other centres to introduce the public to the new platform. This drove a lot of awareness. Post launch, the app was fairly heavily promoted on the main Cricinfo website, with a message displayed to all visitors running Windows 8 linking to the Windows Store. This has driven a lot of downloads. Beyond this, growth has largely been organic with users actively promoting the app by their social networks and other channels.

image

We always consider other models, but traditionally ESPN offer their content for free and generate revenue by wrapping ads around it. In this instance, we have Ads in Apps set up for multiple regions. The app is designed to cope with ads or be ad free. Both the ESPN Cricinfo app and the ESPN FC app are each approaching the 200,000 download mark and steadily growing. It's a massive responsibility!

There have been a multitude of additional opportunities within ESPN off the back of this initial project. Following the Cricinfo app, we immediately moved on to the ESPN FC Windows 8 app covering football - the biggest sporting audience in the world. This app has also received great reviews.

Screen shot 3

More recently we almost completed a Windows Phone 8 version of the Cricinfo app and are just breaking ground on a third major global app for yet another sport (which we can't talk about yet!). Suffice to say that our Technical Director is very very excited as he's a massive fan!

image

We've recently also engaged with BBC for a number of exciting projects & are having a great time working with them & their incredible brands.

There are several other projects in the studios at present as well including a beautiful LOB Salesforce automation Windows 8 app built on top of Dynamics CRM.

To any other web devs who might be sitting on the fence as far as Windows development, I'd say get off the fence! Seriously, the Windows 8 opportunity is immense. The Windows Store will be present on hundreds of millions of machines eventually, creating a new marketplace that will eventually be one of the world's largest. Why would anyone not take that seriously? Especially when apps can be built in standard or open technologies with hands down the best development tools around.

That being said, there are a lot of fanboys in the app dev space that will be against the Windows Store just because it's Microsoft. It's crazy shortsightedness. On the other hand, stick with your iPhone apps and leave the big opportunity for us!

Company Bio

NV Interactive is a design led digital agency. For the last 15 years, we have been a web design and development firm and have been internationally recognised as such. In fact, we are the Microsoft Worldwide Web Development Partner of the Year for 2012.

Over the course of the last year, we have transformed our already successful web agency to into a world class Windows 8 app shop. We have three studios across New Zealand and work with brands and publishers from all around the world.

Post a comment
Your Screen Name
Your Email Address
Your Comment
Recent