How we spread the design love around the Hackathon

We recently joined hundreds of our colleagues from the world of mobile technology for the Nokia World 2011 event here in London.

The conference was inspiring and exciting, and gave us a chance to catch up with old friends in the industry, and make some new ones.

One of the central features of the event was the two-day Hackathon, designed to rapidly transform ideas into working applications.

We were asked to provide advice to the developers taking part, helping them to deliver better user experiences in their apps.

The pace was fast and it wasn’t an easy task; it was a great learning experience in managing an agile design process, as there was very little time to document anything. We set up a dedicated team comprising a UX architect and two visual designers, to make it easier to proceed straight from sketches to detailed designs. A key task was also to ensure efficient communication with the developers. In the two weeks before the event, we were dealing with multiple projects, from teams as far apart as California and India.

On the day of the Hackathon itself, we provided a “Design Rescue Team” to help out with last minute issues such as icon or screen design. It was chaotic, but it was enormous fun. We made lots of new friends.

One of the apps we spent most of our time on, Viafo’s Blood Sprint, won second place in the competition, from a total of 20 entries. We were very proud of the work done by everyone involved.

 

Some thoughts about Windows Phone

One of the nice things about this project was the chance to really dive into Windows Phone (WP), the mobile operating system Nokia has decided to fully adopt since early this year.

While it’s true to say that iOS and Android have the lion’s share of the market at the moment, Windows Phone has a lot going for it. We love its distinctive, minimalist approach. It offers lots of interesting new ideas for design in the mobile UI space. It’s the exact opposite of the shiny, glossy iOS approach.

Designing for WP is very different to designing for iOS and Android.

Corporate VP and director of Windows Phone Program Joe Belfiore made an excellent speech about it at the event – here are some slides:

 

More about Metro

The Metro design framework does an excellent job of reducing signal-to-noise ratio in information visualisation, and provides elegant and usable UI building blocks. We found that most design problems could be solved by using elements of the UI framework.
For example:

• There are no tabs widgets in WP. The Panorama view is used to swipe through the main views of an app
• The Application Bar is efficient and uses very little space. The call to action provided by the ellipsis displays additional actions and icons – it’s a great use of the Progressive Disclosure interaction design principle.

We love Live Tiles

Live Tiles are central to Metro. They are dynamic, surfacing app information up to the Start screen, as opposed to the static iOS app icons that can only display a badge. The Start screen is transformed, becoming an information dashboard rather than just a launcher. Live Tiles even offer the opportunity of displaying several bits of information; for example, the Xbox tile can display multiple updates at once by using a slide in/out effect.

Users of WP can customise the OS with their own choice of background image and accent colour. Designers need to consider how this might create unexpected contrasts with the UI elements they’re creating.

Taste the typography

“Celebrate Typography” is one of WP’s central principles. While the default Segoe font family is an excellent starting point, you can embed any font into an application, and we encourage developers to do so, because a font must fit into the overall application’s visual identity.

Twisted UI

Nokia’s Future Lounge had some displays of R&D work at the show, which we found fascinating. The Nokia Kinetic, for example, is a ‘concept smartphone’ that can be flexed across vertical and horizontal planes, bending and twisting the phone to perform certain tasks. If you bend the screen towards yourself, it acts as a selection function, or zooms in on any pictures you’re viewing. In music mode, you can navigate, play and pause with the same gesture. This is just a taste of some of the more advanced stuff they’re working on. It’s well worth seeing in person if you get a chance, but if you don’t, here’s a video:

Nokia Kinetic future concept from The Closertag team on Vimeo.

References

Metro Design Language of Windows Phone 7
http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/