Buuuk

NEA launched the first version of the myENV app in 2011. It has since been downloaded over 500,000 times. Users are familiar with the original interface — they know how it works and where to find the relevant information. So how do you follow up with a product that doesn't confuse existing users while introducing a new interface in the hope of creating a better experience? Not so easy.

We interviewed existing users, studied the numbers and had in-depth discussions with the stakeholders.

We started by gathering as much information about the usage patterns of existing users as we could. We interviewed existing users, studied the numbers and had in-depth discussions with the stakeholders. This was followed by ongoing sessions throughout the project to explore new directions, receive feedback on mockups and wireframes, and conduct tons of testing. That’s a lot to do when you’ve got to deliver on 2 platforms with only 6 months to launch.

Data = Information

A look at the stats from the last year, collected from the original myENV app, clearly shows which information users are looking for.

Experience Counts

The experience and knowledge gained from our other projects helped us a lot during the last 6 months. Location-based weather alerts from WeatherLah were integrated into the myENV app. Although the project started earlier this year, we had been considering how an app like this could function for some time.

Take it Apart. Begin.

Having established the constraints, we started brainstorming the information architecture for the new app. We went through more than a dozen iterations of the wireframes, all of which were reviewed by 13 different NEA departments at every step.

Once the basic architecture stopped evolving between iterations, we replicated it for the different platforms & devices.

Before heading to Photoshop* to create the pixels, we set up a "project language". There were multiple designers and developers working on this project, so we needed a base style guide that everyone was aware of. An expanded colour palette and a typographic scale were the first steps to achieve this. When the the designs were eventually delivered to the developers, they were accompanied by detailed specs for each unique aspect of the app.

*Although we've been using Sketch for most products at buUuk, we opted for Photoshop in this case.

Colour Guide

Based on NEA's own colour guide, but expanded to include more colours

Type Scale

As the app users include people of all ages, we knew borderline small font sizes were out. Also, we tried to ensure that there was always a high enough contrast between the type colours and the backgrounds they were used on. Native fonts for each platform were used for maximum performance.

Detailed UI Specs

In retrospect, spending time to create these proved invaluable for a project of this level of complexity. Whenever the mockups weren't accompanied by specs, we often faced additional rounds of review and the frustration of redoing work. The wireframes, mockups & design specs became the point of reference for everyone working on the project.

Simplicity & Detail

It was clear from the early stages that balancing the requirement to create a comprehensive app with the need for a simple interface would be our biggest challenge. We looked for solutions that would present the most relevant information in the most prominent manner while hiding the secondary information in a neatly organised way.