1

I S S U E : 1

N E W W O R KT R E N D S O P I N I O NA G E N C Y L I F ELAUNCH Q2

2 0 1 3

Welcome to Ink

Q2: Life at 383

Ready to Ride: Prudential Ride London

The Future is Flat

UX: Hammerson.com

Retail Round Up: Retail Tech Expo

Introducing The Mobile Testing Lab

Realtime With Livestream

Announcing Pods Introducing Labs

Canvas is Back

Seven... It’s The Magic Number

I N T H I S I S S U E

1

2

4

8

1 0

1 2

1 4

1 6

1 7

1 8

2 0

2 1

1

WELCOME TO INK.B Y : JOHN NEWBOLD

THE BEST BITS

FROM OUR CORNER OF THE

INTERNET”

The Internet moves at something of a pace and keeping up with it can be a bit of a struggle. As such, we thought we’d reduce the friction of browsing and print some best bits off from our corner of the Internet for you to read here instead. This is ‘Ink’ the 383 quarterly – a download from our brains covering trends, opinion pieces and news stories from the last few months.

We’ve produced Ink using the fantastic Newspaper Club. They’re a ‘post-digital’ kind of organisation, perfectly setup for short run publications like this – a great example of what can happen to a traditional medium when the Internet gets hold of it.

The aim of this publication is to help touch base with our growing network of friends around the UK and beyond. If you find something useful that you want to know more about or have an idea for something we should cover in a future edition then drop us a line. In the gaps in between the printed version you can always check out the blog on the 383 site for more of these ramblings. Failing that, pick up the phone and someone in our studio will happily bend your ear off until you shout stop!

“

I S S U E : 1

LIFE AT 383 IN Q2B Y : JACOB DUTTON

INTRO:

It’s been such an exciting three months at 383 that I had to read back through our blog, tweets

and Google calendar to remember everything that’s been happening.

Something that I didn’t need to delve into the archives to jog my memory on was the launch of 383 Labs, a new place for brands to explore growth through digital products and services rather

than communications (think Nike+ Fuelband and Barclays PingIt rather than campaigns). We’ve opened it in the South West and it’s a completely separate offer to what we do as an

agency. We’re hoping that by splitting out the Labs in this way that it’s more affordable for clients to invent new products and services with us. We’re really delighted to have some inaugural

collaborators on board including the BBC, Hammerson and Birmingham City University and we’re hoping to add more

to that list over the next few months.

You can find out more at 383labs.com.

2

3

We’ve been appointed by Harveys Furniture to lead a big user experience project, we’re working with Prudential and Heinz Big Soup to activate their respective sponsorships of Ride London and Super League and helping the BBC to improve content sharing within iPlayer. We’re also delighted to have extended our relationship with retail property owner-manager Hammerson and we’re now lead digital agency across their entire UK portfolio.

With so much going on, we’ve made some senior appointments in Client Services and User Experience with Asha Ghosh joining us from Freestyle Interactive as Client Partner and Peter Honnor from Frog Amsterdam as Head of UX.

The next quarter looks equally as exciting with a potential new home for 383 in the offing, some ambitious plans for tech startups and clients as well as announcing some top secret projects that we’re working on right now. Enjoy the first edition of Ink!

We’ve also been working hard on launching Canvas 2013, our annual one day web conference. This year we’re opening it up to marketers and creatives as well as developers. It’s taking place on 10th October and we’ve got some great speakers from The Lab at O2, Berg, Adobe and Microsoft. Rather than being a sales pitch for 383 it’s more about equipping our clients and the creative community for the 12 months ahead by exploring some big connected customer themes around post-digital, the internet of things and the future of interaction.

Alongside Canvas we’re also bringing back our quarterly developer meet-up HydraHack and launching Byte, a 90 minute networking event for regional marketers who need to be one step ahead in digital.

As if organising our events wasn’t keeping us busy enough we’ve also been attending some.

We learned about urban technologies and smart cities at Future Everything, got our hands on some in-store tech toys at the Retail Business Technology Expo and took a glimpse into the future of our industry at Thinking Digital. As well as launching new offerings and events, we’ve also been doing some work (promise!)

APPOINTED TO LEAD UX

FOR HARVEYS FURNITURE

”

“

BACK TH IS OCTOBER

L ABS

NOW OPEN : 383 LABS

READY TO RIDEG E A R I N G U P F O R T H E U K ’ S B I G G E S T C Y C L I N G E V E N T

B Y : JOHN NEWBOLD

NEW WORK :

4

THIS SUMMER SAW THE INAUGURAL PRUDENTIAL RIDE LONDON - A WORLD CLASS CYCLING FESTIVAL BRINGING TOGETHER OVER 70,000 RIDERS TO TAKE PART OVER THE WEEKEND OF 3RD-4TH AUGUST.

We were delighted to be appointed by Prudential, the headline sponsor, to work on their digital activation along with our sponsorship partners brandRapport. As part of this we’ve launched a beautiful responsive site which you can view at www.ridewithprudential.co.uk

5

WE’VE BEEN BUSY ACTIVATING THE LARGEST MASS PARTICIPATION CYCLING FESTIVAL EVER HELD IN THE UK.

6

NEW WORK :

Prudential wanted a digital hub that allowed them to celebrate and promote their involvement in Prudential RideLondon to customers, staff and the general public. The fully responsive website provided a consistent experience across desktop, mobile and tablet, promoting ‘Team Prudential’, a team initiative involving staff, the public and Olympic gold medallist Laura Trott. As the digital activation evolved, event registrants were treated to some great content, including riding tips from Laura and exclusive event coverage.

PRUDENTIAL WANTED A

DIGITAL HUB T0 PROVIDE A

CONSISTENT EXPERIENCE

ACROSS DESKTOP, MOBILE AND

TABLET”

“

7

Our work on the account to date has included design and development of the digital hub, art direction of a campaign photoshoot with Laura Trott and ideation support for the RideLondon Expo.

This flagship event formed part of the Mayor of London and TfL’s cycling programme and was a key opportunity to add to the 2012 legacy. We’re really proud to be a part of it.

Having a solid digital activation strategy is becoming an increasingly important issue for brands when it comes to sponsorship. 383‘s partnership with brandRapport offers clients a blended mix of services, bringing together brandRapport’s expertise in sponsorship and 383’s digital viewpoint on today’s connected customer.

MORE

www.ridewithprudential.co.uk

“HAVING A SOLID DIGITAL

ACTIVATION STRATEGY IS

BECOMING AN INCREASINGLY

IMPORTANT ISSUE FOR BRANDS

”

8

B Y : MORGAN JONES

OP IN ION :

This is not to say that some of these elements can’t be used, subtle gradients and soft drop shadows can help give the user interface a bit of focus, but the skill is to use them sparingly.

It requires the designer to consider white space and to make elements stand out without going over board on the layer styles. It requires a certain degree of self con-trol and an understanding of layout to create a site that doesn’t rely on its visual emphasis to attract a user’s attention.

All this is a far cry from some of Apple’s recent inter-face designs, which employ skeuomorphic design in an attempt to mimic familiar ‘real world’ elements. Comparing these two ap-proaches side by side many have argued that Skeuomor-phism has had its day.

W H E R E N E X T F O R U S E R I N T E R F A C E D E S I G N ?

THE FUTURE IS FLAT

FLAT DESIGN DOESN’T OVER DO GRADIENTS, DROP SHADOWS, INNER GLOWS OR BEVELLED EDGES.

9

SO WHAT I S SKEUOMORPHISM?

Essentially, this is an ap-proach where the designer recreates scenarios that the user is comfortable with in order to help in the usability of their site or app. For example, Apple’s iOS6 utilises a faux looking ad-dress book to contain your contacts, a stylised calendar to house your meetings and a fake notepad to jot down your ideas.

This approach has not been well received from many designers, feeling that it hin-ders the experience for the user rather than helping it. I’ve seen this faux interface design applied far too liber-ally on some designs and feel it’s something that can really detract from, and dominate the overall look. As we move more into the HD (Retina) age, I think it’s fair to say we shall see less and less of the over use of textures and fake 3D realism.

There are always going to be advocates of both skeuomor-phism and of flat design, as arguably both do have their good and bad points, so it’ll be interesting to see which one wins out overall. Personally, I see this movement as simply good design. The designer doesn’t need to employ the use of fake dimension to ensure its usability, instead, relying on hierarchy, colour and content to really dictate the layout.

The introduction of flat design is a welcome change, the ben-efits of this approach are that it is often much easier for the user to navigate and understand what they are looking at. The speed of the site itself is generally noticeably quicker as we aren’t waiting on so many things to be downloaded and in hand with responsive design, flat design lends itself better to shifting elements across break points. Basically, I feel like this ap-proach is the kick up the arse that web design has been wait-ing for, taking it in a fresh new direction that feels much more ‘native’ to the web.

This served as a great source of inspiration for our work with Prudential Ride London. Our design decisions were shaped by a commitment to keep the look and feel simple, easily navigable and quick to load on any device.

“APPLE ’ S NOTES ON IOS6

383 ’ S PRUDENT IAL MOB I LE INTERFACE

FLAT DESIGN LENDS ITSELF BETTER TO SHIFTING ELEMENTS ACROSS BREAK POINTS. ”

IOS7 has been the hot topic for designers since

it’s preview launch by Apple in June. Morgan

posted this article on the 383 blog back in Febru-ary. Great to know our

team has such a keen eye for what’s coming next!

AHEAD OF THE GAME

For over 60 years Hammerson has been creating and managing some of the most exciting retail destinations in Europe. Following our work to improve the online user experience across their property portfolio, our challenge was to plan, design and build a website to reflect Hammerson’s retail focus.

B Y : TOM MART IN

NEW WORK :

UX T H E V A L U E O F U S E R E X P E R I E N C E F O R H A M M E R S O N . C O M

10

11

UNDERSTANDING THE LANDSCAPE

Although we all knew the old website performed badly, we needed a sense of where our competitors had been outperforming.

Using remote user testing, we observed real customers as they used the website and watched as they struggled to complete simple tasks. By studying data from Google Analytics and Webmaster Tools we gained a sense of how users were currently discovering the site. And by digging beneath the surface, we could evaluate the underlying technologies and page markup, helping us to see how the current site performed.

COLLABORAT ING ON CONTENT

The project team – including clients, stakeholders, project managers, designers and devel-opers – got together to map out the information architecture. Using cards and Blu-Tack, eve-ryone is able to have an input into location, placement and priority of sections in the site.

TALK ING TO THE PEOPLE

THAT MATTER

With many different types of customers it was important that our core visitors: investors, executives, press and retailers could find the information they need. We talked to people both inside and outside the organisa-tion to understand how they used the current website and what might be missing. Inter-views are a great enabler in un-derstanding the habits of users and generated some fantastic insights and ideas.

GETT ING THE FEATURES AND

FUNCT IONAL ITY R IGHT

What do our visitors need to get done here? What’s the most important thing on this page? After answering these ques-tions, we used a simple matrix to prioritise features as either high, medium or low. Using a workshop format, we formal-ised how these features would work, how important they would be to the customer jour-ney and to the site overall.

With this information in place, we created a skeleton content framework, allowing the pro-ject team to focus on collecting the right content for the right place while the rest of the team focussed on build and delivery.

DES IGN ING FOR THE

RESPONS IVE WORLD

As pages adapt and bend to new and different devices, we need to make sure that the features we build work cor-rectly on each one of them.

Our features and functionality approach allows designers and developers to see which aspects of the page are truly important, across devices.

www.hammerson.com

www.383project.com/work/hammerson

MORE

T R E N D S & H I G H L I G H T S F R O M T H E R E T A I L B U S I N E S S T E C H N O L O G Y E X P O , L O N D O N

NEWS:

B Y : MAR IA ANASTAS IOU

RETAIL ROUND UP:

Intelligent facial recognition featured strongly at this year’s Retail Business Expo.

Both Cognitec and Retailnext had interest-ing offerings. With this technology age, gender, emotion and dwell time can all be bundled into analytics, just by scanning over the features on your face with a few strategically placed cam-eras in a mall. The possibilities are vast, but this could potentially be used to identify and black-list shoplifters, or if linked with contact info, to reward repeat customers in a meaningful way, maybe based on their proximity to a shop, or their apparent mood.

Paypal meanwhile were exhibiting their ‘Pay by facial recognition’ service, which is due to launch soon.

Synqera were showcasing a device which can give a customer personalised offers with a swipe of their loyalty card, and a touch screen till which let customers play a game whereby they could then get a discount on their purchase. It will be interesting to see how this works with the current customer experience.

The words on everyone’s lips were ‘mobile’ and ‘big data.’ Speakers hammered home the importance of insightful data, and the role of mobile – data must be meaningful in order to deliver timely and relevant comms, increasingly enabled by mobile. This can be a key competitive advantage if correctly mastered.

2

1

12

One of the highlights from the day was a presentation from Julian Burnett, Head of IT Architecture at John Lewis.

He talked through the issues and opportunities facing John Lewis, brought about by the explo-sion of technology, and the strategies the business employs surrounding this.

With a whole host of solutions being developed all the time, the key challenge Julian spoke of, is knowing what exactly to place bets on. For a company as large as John Lewis, he said they often make a conscious effort to delay in-vestments in new technology until they’ve really caught on, to ensure it’s not a wasted investment. An example of this would be mobile payments, which is very much still a developing behaviour for consumers.

On the other hand though, Julian stressed the importance of innovation. The John Lewis Partnership hold quarterly board meetings, where they decide on a shortlist of organisational prob-lems on which to focus improvement efforts. They then invite parties to solve these problems, for example through their ‘Great British Technol-ogy Innovation for Retail’ competition. The winning solutions will always be ones which fit the wider business ambition of the brand and work with current systems. Ideas are trialled on a small basis, and if the results are positive, the solu-tion will be rolled out across all stores.

Digital signage was a big theme at the expo.

Companies to watch are ONELAN and Eclipse Digital Media, the latter of which had a menu board which you could auto-update from a spreadsheet.

Samsung were present, showing off their new display – a box with a transparent touchscreen front-age. This allows the user see 360 degree views of the product and related video content, as well as the real product housed inside the box. A perfect interactive display for premium products, this is already available for retailers.

Shop Robotic have created a touch screen vending machine, which can work securely 24 hours a day, with a secure chip and pin for payments. Vending machines are increasing in popularity and pretty soon there will be a much wider range of products than the standard chocolate bars and fizzy drinks available to buy while you wait for the train.

4

3

13

14

We’ve recently set up a mobile testing lab at 383 in order to ensure that we are producing truly amazing experiences for mobile; both from an aesthetic and performance perspective.

INTRODUCING THE MOBILE TESTING LAB

WHY REAL DEV ICES?

As developers we’re used to having to test our work on a range of browsers either by us-ing virtual machines or in web based tools. These are great to give an overall visual repre-sentation of a page, but are limited for any in depth debug-ging. Whilst it’s true that there are services that offer mobile simulators online, we wanted to be sure that the experiences we were building were as good as they could be, and the only way we could do that is by having real devices to test on.

DEV ICE RANGE

Walk into any phone shop and the range of devices is stag-gering. Simply choosing which phones to add to the lab proved to be a bit of a headache so we used data gathered from our clients’ websites in addition to sales figures to come up with a list of devices.

USAGE

The lab isn’t just for the benefit of the dev team, but for anyone at 383 who wants to see how a site or app renders across platforms and everyone is ac-tively encouraged to have a play as a source of inspiration.

We’re also keen to demonstrate designs within context, so will often load up static images when showing initial designs to clients. This helps the client to get a better understanding as to the order and priority of content on the device.

IN THE STUDIO :

15

Last December we launched a first of its kind second screen experience for Live2012, a pop concert by Free Radio at the LG Arena in Birmingham.

REALTIME WITH LIVESTREAM

TECHNOLOGY

We used our custom built content aggregation and analytics tool ‘Juicer’ to collect data from Twitter, TwitPic, yFrog and Instagram.

During the three hour event a staggering 19,320 pieces of content were collected for moderation, with 828 pieces of content pushed out to fans. A custom API was then built to import data into an ap-proval queue housed within the Free Radio CMS.

APPROACH

LiveStream was a realtime, responsive, user generated stream of content – captured as it happened across Twitter and Instagram. Free Radio mixed in their own messages and back stage content to provide an up to the minute feed of everything happening at the arena.

Users could connect using any device, with the responsive layout tailoring the content for optimal viewing. The feed was also displayed on screens in the venue, ensuring that fans in the arena could see their content appear in front of 14,500 fellow music fans. Almost 6,000 fans connected via the web app to join in with the action online, and the huge amount of buzz drove the hashtag to trend in the UK.

B Y : L EON BARRETT

NEW WORK :

www.383project.com/work/freeradio

DURING THE EVENT A

STAGGERING 19,320

PIECES OF CONTENT

WERE COLLECTED

”

“

MORE

16

C O N S T A N T L Y I M P R O V I N G T H E W A Y W E W O R K

PODS

ANNOUNCING :

B Y : JACOB DUTTON

WHEN OUR FOUNDERS SET OUT TO BUILD 383, IT WAS TO CREATE AN AGENCY THAT WOULD BECOME THE BEST RATHER THAN THE BIGGEST.

We’re growing at a rate of 80% year on year which is fantastic, but it’s only as a consequence of great service, agility and imagination. As soon as those qualities start to suffer through scaling too quickly or too much, we have to address them. To do that, we had to look outside of the agency world and to our contemporaries in technology companies and start ups.

When the technology, culture and creative landscape changes as rapid-ly as it does today, we have to ensure that we can ideate, test, launch and iterate quickly. Tech companies know this and are great at employing a relatively flat hierarchy in order to embrace it.

It’s difficult to be agile when scaling vertically so we wanted to explore a horizontal agency structure to em-power teams, give them the autono-my to make decisions and ship ideas more easily.

CL IENTPARTNER PRODUCER PROJECT

MANAGER

CL IENT

POD

STUDIO

17

Instead of a traditional pyramid agency model of Group Account Director, Account Director, Account Manager, Account Executive and a separate department altogether for Project Management and Plan-ning we wanted to bring strategy, insight and delivery into the same smaller, more nimble team... the Pod was born.

A POD IS MADE UP OF A CLIENT PARTNER, PRODUCER AND PROJECT MANAGER AND THEY WORK CLOSELY WITH A HANDFUL OF CLIENTS.

When brand, agency and audience are represented and wrapped around a client, decisions can be made more strategically, insight gathered more thoughtfully and projects shipped more rapidly.

There are still senior members of the team in client services, project management and planning but rather than sitting above the rest of the team they are scaled out in different pods across the agency. The only team that sits above the pods now is the partners and we believe this gives clients better access to the board, better value for money and crucially the experience of working with a small, specialist and dedicated partner rather than a slow and cumbersome agency.

Project Managers help to take the solution and formulate it into a program of activity, allocating budget and agency resource accordingly to ensure that we deliver things to clients on time and on budget.

Producers are the planners of the digital age and bring audi-ence insight, ownership over the vision for a product or idea and represent the connected customer mindset that 383 was built around.

Client Partners are a clients day to day contact at the agency and are responsible for understanding problems to be solved, helping to shape our cli-ents strategy and representing the clients brand internally.

EACH POD

CL IENTPARTNER PRODUCER PROJECT

MANAGER

www.383project.com/blog

MORE

Over the past few years we’ve seen more and more brands truly embrace digital. Not just digital mar-keting, but also how to embed digital as part of the product experience. The problem is, sometimes brands need a little help at get-ting this right. Sometimes the answer isn't to build an app, it's harder than that.

It’s hard to think about how you might add digital to an existing product. It’s hard to start think-ing about creating entirely new products or services which are purely digital.

Digital agencies are not always the best place to get these an-swers, most agencies are setup to generate lots of creative ideas and then bottle those up into a waterfall development pipeline.

L ABS

A PLACE FOR BRANDS TO EXPLORE GROWTH THROUGH DIGITAL PRODUCTS AND SERVICES

This works great when every-one is agreed that an iPhone app is the answer, but creating an entirely new digital product or service isn’t like that.

Creating something new is risky, it means doing some-thing different, it means going in a different direction, it means really listening to the customer and it means experimenting. These are hard things to do when everyone is paying per hour.

We think there is a better way. We think there's a real opportunity for brands to cre-ate meaningful products and services which can add value to the customer experience. We've setup 383 Labs, as a place to prototype new prod-ucts and services with brands. Products and services that help, inspire, entertain and above all, are truly useful.

B Y : TOM MART IN

INTRODUCING :

18

19

www.383labs.com

MORE

At the end of the process you'll have a working prototype which validates a customer need. If they loved it, then it's time to build the product for real, if they didn't then it's time to pick another invention and try again.

Above all we think this approach is better; it's better for us to create ideas quicker, it's better for you to find out which ideas customers like, it's better for the customer because they get bet-ter products and services and it's better for your brand because you've helped create something better.

TO CREATE PROTOTYPES FOR PRODUCTS AND SERVICES THAT SOLVE UNMET CUSTOMER NEEDS

We start with Discovery, it's about deeply understanding the stakeholders aims for growth and how the customer truly uses your product. Using a series of customer interviews, we find out when your product was first hired and how it fits into your customers lives. Next, we talk to stakeholders and find out their ambitions for growth.

Using insights from Discovery we sketch a number of possible product and service ideas. These ideas might solve a short term problem or might help with the long term business strategic.

Next, you pick the idea which you think will have the most impact and then we create a prototype. We want to get this prototype in customers hands as quickly as possible, so we use existing open source frameworks and technology as much as possible. We get together some of your customers and show it to them, we listen, we get feedback, then we iterate and do it all again. We stop when the customer tells us they love it or we run out of time.

DISCOVERY

INVENT ION

PROTOTYPE

THE GOAL OF 383 LABS I S S IMPLE :

HERE ’ S HOW IT WORKS

The lab isn't like a digital agency, you don't pay because it takes us a long time to do things. It's small and agile and works differently. We break our process into three distinct phases: Discovery, Invention and Prototyping. Each phase lasts a fixed amount of time so you’ll know when you get to see something from the beginning.

20

This year, Canvas examines the construct of connected customers and how new technology can be used to communicate effectively. Throughout this one day conference in Birmingham, we’ll cover a range of perspectives from the technical to the strategic. If you are a developer, designer or marketeer, there will be something at Canvas for you.

You’ll hear from Dave Birss (1) from Additive on how the ad industry has been disrupted through the rise of ‘digital’, and whether we should be saying farewell to ‘it’ already. Alice Bartlett (2) will talk about the architecture of BERG Cloud and Little Printer, and the complexity involved in the ‘internet of things’. Martin Beeby (3) explores the future of interaction, and whether websites are being left behind. Terry Ryan (4) looks at how Adobe Edge will push the limits of the browser and HTML5. Matt Andrews (5) will talk about responsive design at the Guardian, and the process of converting a site consisting of over three million articles into a single responsive web page. Ruth John (6) will introduce us to FirefoxOS and also delve into the exciting world of APIs that are currently being developed.

IS BACK.

B Y : JO HARVEY

MORE

Our shiny responsive site for Canvas 2013 has been getting a great reaction from the digital

community - be sure to check it out for yourself!

EVENTS :

1 2

3 4

5

6

Keep a look out for more speaker

announcements on our website

www.canvasconf.co.uk

21

SEVEN... IT’S THE MAGIC NUMBER

AGENCY L I FE :

Last month 383 turned seven years old and to celebrate, all our staff jumped aboard a canal boat for a celebratory cruise along Birmingham’s riviera. Two hours of grotty motorway bridges, semi-bouyant shopping trolleys and a lot of graffiti later, we had turned the barge into a floating dance floor, full of resolute revellers. Everyone on board had a great time, and we can’t wait for another year of exciting wins and exceptional work. Here are just a few of the photos from the evening (well, the ones we could actually show you.)

1

COLOURFUL IDEASFOR THE WEB

TICKETS & MORE INFO: WWW.CANVASCONF.CO.UK

A ONE DAY CONFERENCE FOR DEVELOPERS, DESIGNERS AND MARKETERS

Join us in Birmingham on October 10th 2013 for a full day of great talks, featuring industry-leading speakers:

10.10.13BIRMINGHAM