We’ve been working with the legends at iPrimus for a while now. One of our first campaigns was called ‘How Can We Help?’ where we asked their customers what improvements they wanted to see from the brand.

One of the most popular requests was for an iPhone application to allow customers to track their data usage. We knew we could put together a usage meter pretty easily but we wanted to do something different, something interesting and something helpful. And that’s where the iPrimus Help Centre came from.

It’s got a usage meter and it lets you press a button to have the call centre call you back. But what happens if you run out of broadband data? Well you can now play a retro game against the call centre. If you win they’ll give you a free gigabyte of data – hopefully enough to get you through the rest of the month.

Download the app from the iTunes store here.

What do you think?

Ned

Credits

Client: Andrew Sims & Andy Lee @ iPrimus

Agency: Native Digital

Concept: Ned Dwyer & Tait Ischia

Strategy: Ned Dwyer

Creative Direction: Tait Ischia

Development: Tomas Spacek

I’ve written the following manifesto to inform and back the way we work with the modern device. It’s a primer in the very best web practices.

Overview

• Good Quality Design is our Top Priority
• You are a Designer, no matter what your role
• Constantly revise, improve and change your process
• Accessibility and Usability are core to design, not afterthoughts
• Speed is important, responsiveness affects user perception
• Be a researcher, learning new approaches is as important as improving current ones
• You are the authority on your field, ignore the guidelines when you think it necessary

The Modern Device

Whether it’s a laptop, a tablet or a mobile phone, whatever we design is interactable.

Interactable means not static. It’s an alive medium. The small details are important.

Design uses familiarity as a hint to the user. It hints at interactibility. Giving the user feedback through visual cues helps them and you.

An example: the button.

1. At the visual design level it should look like a button.
2. When interacted with it should act like a button.
3. In code it should be a button (this is especially important for web, so that it is more accessible).

The Web and it’s Technology

The modern web is not a version. It is a constantly evolving set of features that we can exploit to convey information to our user. Modern browsers are undergoing constant improvement. We can and should exploit this, but not to the detriment of our less-enabled users.

On HTML5, CSS3 and ES5+

These tools can make our pages rich with graphic flair, animation, multimedia, interaction and input. Touch, location, storage, canvas, audio, video – these are all means for meeting an end: the communication of information to our user.

If a feature is introduced in XBrowser, but is not available to users of YBrowser then it should be used as an enhancement not a core feature. Nowadays most browser features can be reliably detected, you should employ feature detection as an aid to allowing enhancement.

Polyfills are a technique for giving older browsers features or functionality of newer browsers. These should be employed wherever useful. If they adversely affect the speed of a webpage it is perhaps worth redesigning some part of each browsers experience to fit around the constraints of the device.

Implementing a Design

The visual/graphic designers role is to give a vision for the look and feel of a website.

However, this vision may not be completely achievable and is often not flexible enough for the web. Instead it is the front-end developers role to interpret this vision into code.

With modern web techniques it is not necessary to employ the photoshop chop method of implementing design.

Images should be used where one might expect images (such as logos or graphics). Where possible use CSS to implement the style of a website. Deciding when an image is appropriate, or when css is appropriate is the front-end developers job. They should take into account network transfer speed, rendering time and visual lag due to animations and effects.

Responsive Design

Most of the time our user is using a web browser as we expect it, but sometimes that isn’t the case. We should try our best to cater to every audience, but understand that a different experience is not necessarily a bad experience.

This means that users on different devices should receive unique experiences designed to meet their needs. Whether this is differences in layout, presentation or functionality.

A user on a mobile phone should be able to perform the tasks they expect a mobile phone to perform. A user with an old browser does not need the most modern interface we can build, as long as what they do get can serve their purpose.

Code Practices

The process of developing and coding is as much a design process as any other. Code should look visually structured and appealing. It should function in a sane, but exciting way.

Best practices can and should be ignored so as to facilitate a superior implementation.

Development speed is the most important part of development. The second most important being quality. Balance these aspects well. Use tools to help improve both, some of these tools are practices, some are actually tools.

All code should be managed.

Collaboration

We find that we constantly need to collaborate. So we use tools to facilitate this collaboration. This may be as simple as paper to draw wireframes. We’re always respectful of others’ views and opinions and never play ‘devils advocate’. We don’t know everything about our field, we’re always looking for external viewpoints to guide our decisions.

Just because it is unfamiliar, does not mean it is bad. Learn and understand anothers approach before passing judgement. This stands doubley for code.

Have fun!

We think that you have to enjoy what you are doing, there is no point being bored. If you are bored you are probably doing the wrong thing. Do what you enjoy instead. 🙂

The Tools

The things we use:

• GitHub allows for storing, collaborating and managing code
• Modernizr detects common modern browser functions
• HTML5 Boilerplate gives you a great set of HTML+CSS defaults
• This is a good list of Browser Polyfills
• Less Framework implements Media Queries for Responsive Design
• Ruby on Rails speeds up Web Development
• CoffeeScript speeds up JavaScript development and improves Clarity
• SASS makes CSS easier to manage
• FontSquirrel allows you to build @font-face declarations for custom fonts
• TextMate is a great visual text-editor. Also see: vim
• Heroku reduces time to deploy and improves programmer productivity
• Instapaper allows you to read links later, to stop from distracting you now – keeping up to date with technology is important
• Google PageSpeed tester is a good set of default tests to run to allow you to see page speed optimisations
• OS X gives you a quick (and sometimes dirty) unix. It has a real, very usable graphical interface with powerful unix underpinnings.

The Knowledge

The things we read:

• Dive into HTML5 is a web book about everything HTML5
• _Why Archive an archive of writings by the most influential Ruby programmer – read ‘Why’s Poignant Guide to Ruby’ at least
• Hacker News to keep you up to date
• Rails Guides the best way to learn Rails
• Responsive Web Design an article by A List Apart
• Nicolas Gallagher runs a great blog about modern CSS practices
• The Pragmatic Bookshelf sell some of the best programming related books that exist
• The HTML5 Specification in a readable format

On the web we often focus on rich multimedia and exciting visuals. Modern websites have graphics everywhere, little icons next to buttons and links, grainy backgrounds and logos. Plus before they even load they’ll be fetching complex data from databases, maybe even hitting external APIs. It’s easy enough, with little trouble, to make a page that can take beyond 10 seconds to load.

Why is page loading speed important? 

1. If a page takes too long to load people will context switch (change to another tab, open up email, go get something to eat) or get frustrated and give up. They may not ever come back.
2. Fast speeds make pages and apps feel smoother and better – there’s a reason Google care so much about speed (especially on their home page)

There’s evidence of faster pages increasing customer satisfaction and of slower speeds decreasing satisfaction (and revenue). This study claims that online shoppers will wait at most 4 seconds before potentially abandoning the retail site they are on. That study was done in 2006, 5 years later and I would guess that people are even more impatient.

Progressive Loading.

Progressive Loading is the practice of loading bits of the page at a time, you see it all the time, you are used to it. Progressive Loading lets users know that the page is coming, it keeps them on their seat. It also allows them to start working right away, if they can see menu items pop up they can click on them before your footer loads.

Try and optimise your progressive loading as much as possible. It can be really frustrating when you can see a page but the fonts haven’t loaded yet. Or when you get a giant spinner or loading bar blocking the page (see: every flash site ever). Or if a page has loaded but you can’t do anything because someone wrote the mother of all javascript programs and your browser is hanging trying to parse and execute it.

The Short List

These are some things you should think about doing:

• Keep JavaScript out of the header, put it at the bottom of the page
• Use CSS Sprites for pages rich with icons
• Try and do as much as possible in CSS, defining borders and gradients are smaller than the whole button as a png
• Minify your JavaScript
• Compress your images
• Use a Content Delivery Network (like Amazon Cloud Front) – they are actually quite cheap
• Cache as much as you can (but not too much, that can be dangerous)

Theres much, much more to think about which will be site specific (like ajax), but think about this during your process.

Testing
There are plenty of tools out there which you can use, look into them. Some examples:

Google Page Speed is a good in browser test which will go through a checklist of caching and compression that you could do
Yahoo Y Slow has a much more exhaustive list and a bunch of extra tips
New Relic does database profiling and user page load analytics – the user side analytics are great for monitoring real world page load times
You’ll also want to roll some of your own for internal testing.

We send out an email called Native Insights regularly. It’s a collection of the best content from around the web that we’ve been reading about.

Today marks a minor milestone for Native Insights – we have just cracked 500 subscribers. This has all been organic growth from forwards and recommendations. We like to think that it’s a worthwhile read and the numbers seem to agree – Insights has an average open rate of 56% (though can be as high as 89%) and most people click on 5-6 links. Some impressive stats if we do say so ourselves.

We’ve recently given it a bit of a spruce up with a new design in keeping with the rest of this site.

This Native Insights is edition #136. We’ve been sending them out since 2009. You should really get on board and signup via the left hand column of this blog now.

Here are the links from last weeks Native Insights:

Above: 30 years of music industry change in one gif (US recordings adjusted for inflation, source).

People like watching gamers play games. Amazon buying Twitch for $1.1b. 

The neurochemistry of positive conversations.

Getting started on social media? Here are 50 expert tips.

Facebook have outlawed the Like-gate. As a way to grow page fans we’ve added Like-gates to just about every Facebook app we’ve ever built. Marketers shouldn’t worry too much though, apps we’ve launched without Like-gates have seen over 50% of potential new fans Like the page organically.

Perfect for your next music festival day out, new smartphone uses loud music to charge battery.

On the topic on music festivals, we recently launched the full 2014 Falls Festival site. We also used our Fan Bomb app to launch their lineup release, with 1.2 million Facebook users catching it in their news feeds via the app. Drop me an email to find out more. 

When I started with Native a big part of it was about building a talented team around me so that I could build products.

I’d hacked a few things together myself over the years but I knew that I needed a team of ‘A’ players to build something truly great.

While I really enjoy digital strategy and building products for other companies I am truly passionate about building products for myself. In many ways I think that’s the true test of my talents – if I’m such a good strategist / product manager what can I do when left to my own devices?

9 times out of ten when I announced this to other agency heads I heard back ‘me too!’. This was incredibly motivating. It made me think I wasn’t alone but also that I had better step up my game if I was going to compete with these more experienced and better resourced agencies.

Having built a few products ourselves in the past and focusing on a new one as we speak this is what we adhere to in order to build products as an agency.

Make product time
And stick to it. We allocate specific times and days to working on products. During that time we don’t do client work. We focus all of our efforts on the product, just as we would if we were working on a client project.

Recruit product-focused people
Find like minded people who also want to build products. Most of the work we do is awesome but sometimes we have boring work at Native. Everyone is happy to work on less-than-glamourous projects so long as they know that the bigger goal is the product work and the learning and growth that comes from that.

When it comes to working on the product side of the business they’ll be able to contribute more and are often more willing to pull out the cunning stunts needed to bring a product to life.

Make progress every week
If you’re not working on your project every week it’s going to die. You need momentum.

Every little bit of progress adds further fuel to the fire and it shows to you, your team and your clients that you actually believe in the project.

Leverage your client base
A big advantage to being an agency over a regular startup is your ready access to a base of people who know and trust you – and are already comfortable paying you money. If your product addresses their need then they may be your best guinea pigs – and hopefully your first sales. They are your validation.

There is a lot of potential in the concept of brand-funded startups. The brands help to fund the startups early stage development in exchange for early access to the innovation being developed. It can be a win win.