the new black - creds

HAND-CRAFTED, DIGITALLY SOCIAL

SOLUTIONS.

HAND-CRAFTED, DIGITALLY SOCIAL

SOLUTIONS.www.newblack.me

http://www.newblack.me




[email protected]

WE ARE A SMALL CREATIVE DEVELOPMENT STUDIO, WITH A FOCUS ON USER INTERFACE

AND SOCIAL INTEGRATION.

WE ARE A SMALL CREATIVE DEVELOPMENT STUDIO, WITH A FOCUS ON USER INTERFACE

AND SOCIAL INTEGRATION.

WHO WE ARE

mailto:[email protected]


[email protected]

OVER THE PAST 3 YEARS WE HAVE BECOME EXPERTS IN

SOCIAL MEDIA DEVELOPMENT.

OVER THE PAST 3 YEARS WE HAVE BECOME EXPERTS IN

SOCIAL MEDIA DEVELOPMENT.

WHO WE ARE



[email protected]

WHO WE ARE

OUTLOOK—

With experience as a graphic designer, web developer, and head

of digital, Ben is perfectly placed to coordinate projects &

work directly with clients.

CURATOR &FOUNDING PARTNER

PAST—

Web developerHead of digital Graphic designer

BENBEN

OUTLOOK—

Jim is fanatic about user experience, ensuring harmonyof the function and form, andthat every app has a clear

defined purpose.

LEAD DEV / UX &FOUNDING PARTNER

PAST—

Web developerHead of digitalProduct manager Graphic designer

JIMJIM



[email protected]

WHO WE ARE

OUTLOOK—

Our UI perfectionist. Adams understanding and balance of

function and form allows him to create truly beautiful and

functional ideas.

DIGITAL & UI DESIGNER

PAST—

Graphic/Digital designer at agencies Fivefootsix and Zone

ADAMADAM THE

TOMS

ABOUT—

Both computer science graduatesThe Toms are a formidable pair of performance obsessives. Unlike the

rest of the team The Toms work remotely.

BACKEND DEVELOPMENT& SERVER ADMIN

THE

TOMS



[email protected]

WHAT WE DO

Bespoke social applicationsSocial media branding

Facebook experts

Social strategy development

SOCIAL

STATIC / WEBWebsites & micro-sitesBespoke applications

Branding

E-commerce/D2C

MOBILEMobile sites

Bespoke applicationsResponsive styling



[email protected]

WHO WE DO IT FOR



[email protected]

WHO WE DO IT FOR

XBOX

WINDOWS PHONE

IBIZA ROCKS HOTEL

MICROSOFT WINDOWS

TOSHIBA

TEFAL

BIC

BRANDSBRANDS MUSICMUSICAGENCIESAGENCIES

FILMFILM

POLYDOR RECORDS

ATLANTIC RECORDS

SONY BMG

WARNER MUSIC

NINJA TUNE

UNIVERSAL MUSIC

BMB NEON

LUCID GROUP

GRAPEVINE DIGITAL

IMPRESSIVE

STUDIO CANAL

PICTUREHOUSE

COMEDIANSCOMEDIANSMICHAEL MCINTYRE

KEVIN BRIDGES

JON RICHARDSON



[email protected]

WE DEVELOP FROM FRONT-TO-BACK, ALLOWING US TO COLLABORATE AND

REFINE THE USER EXPERIENCEWITH YOU, THE CLIENT.

WE DEVELOP FROM FRONT-TO-BACK, ALLOWING US TO COLLABORATE AND

REFINE THE USER EXPERIENCEWITH YOU, THE CLIENT.

HOW WE DO IT



HOW WE DO ITWET AGILE

WET AGILEWET AGILEThe most important thing is we are always learning and

adjusting the way we work, listening to clients to create processes that will serve them better.

The following diagram illustrates how we currently work.

We find this approach (a mix of Agile and Waterfall) to deliver the greatest level of speed and flexibility

whilst allowing us to meet tight deadlines.

CLIENT

STRATEGYSTRATEGY

In many respects this is this is the most important part of the project.

We cycle through reviews, collaborating with the client to ensure the concept is the best it can be.

At this stage everyone at The New Black is involved, ensuring we have technical, marketing and user insight.

CLIENT

CREATIVECREATIVE

After the strategy has been firmed up, we try to realise the dream.

Rather than spending hours on lengthy spec documents that are somewhat abstracted from any final product, we work with the client to find the right tone and journey for their audience, by again adopting a highly iterative approach of how each part of the journey will look and act.

This ensures that the client has an extremely clear idea of what to expect with the final project.

DEVELOPMENTDEVELOPMENT

By the time we start development, we have an extremely detailed set of mockups.

Development happens in a very linear fashion with the frontend & backend developers working together simultaneously.

The previous iterations allow this part ofthe process to be as quick and streamlined as possible, ensuring that costs are kept as lowas possible.

During the process, frontend templates are submitted to the UI designer to ensure all implementations are true to his vision.

All code is developed locally and regularly deployed to a private Git repo. This Git repohas a ticketing system closely associated with it.

WHAT WE’RE ALL ABOUT

WE’RE A DESIGN LED STUDIOWE’RE A DESIGN LED STUDIO

#1

While we marvel at things that look pretty - design doesn’t just refer to the way something looks.

Design is also about the way something is built, the underlying mechanics that make it run smoothly.


KEEPING AN EYE ON EMERGING TECH

KEEPING AN EYE ON EMERGING TECH

#2

When it comes to technology we like to stay on the cutting edge, meaning we’re always looking at exploring the latest

tools and technology trends to determine 2 things:

1. Can we translate them into ideas which can be groundbreaking.

2. Can we work them into our workflow

Once we feel comfortable enough with a new technology and we feel it is rock solid, we integrate it into our projects.

WHAT WE’RE ALL ABOUTKEEPING AN EYE ON EMERGING TECH

CLIENT SIDE

#2

SILEXWe currently use the Silex framework for all apps. This utilises some of the great features available in php 5.3 that other frameworks don’t.

SPRINGLOOPSFor ticketing on larger scale apps, deployment and Git version control of apps to facilitate collaboration between multiple developers.

COMPOSERSilex’s integration with Composer means the framework pulls the additional required libraries keeping the application lean, and allowing complete version controlling on the dependancies.

CUSTOM CMSInitial templates are written in Styl (compiles to CSS), and Jade, compiles to Twig templates(HTML), this enables fast prototypingand the use of mixins andvariables in CSS.

ENVIRONMENTSOur developers work locally, upload progress to a staging server and once approved by the client we commit to the live server.

CLIENT SIDE

WHAT WE’RE ALL ABOUTKEEPING AN EYE ON EMERGING TECH

SERVER SIDE

#2

HTML5 / CSS 3All apps have progressively enhanced CSS3 features.

STYL/JADEInitial templates are written in Styl(compiles to CSS), and Jade, compiles to Twig templates(HTML), this enables fast prototyping and the use of mixins and variables in CSS.

COFFEESCRIPTAll Javascript is written in Coffeescript, this beautiful syntax is pre-compiled into highly optimised JS.

BACKBONE/KNOCKOUTFor front-end MVC architecture

MOUSTACHE.JSClient-side templating

SERVER SIDE


SENSIBLE STRATEGY& MARKETING

SENSIBLE STRATEGY& MARKETING

#3

In a previous life we came from a strategy and marketing background, with plenty of experience to

match that. This means we understand the needs of our clients more than your average development house.

Our aim is to work with you to develop a sensible strategy to effectively deliver against your

objectives.


COLLABORATIVE IDEA GENERATION

COLLABORATIVE IDEA GENERATION

#4

While being able to do everything in-house generally leads to a smoother workflow, the reality is you don’t always get that luxury.

We pride ourselves on an excellent project management process, which allows us to manage and work with multiple external companies.

We also enjoy collaboration, the sharing of ideas and meeting people with a different thought-process. We embrace the experience and

think it’s necessary to make us a better company.

AND THE REST...BUT JUST AS IMPORTANT

SCOPINGMaking sure the scope of the project has been documented and signed off by both parties. We deliver no more, no less than planned.

LOCALISATIONWe’re at ease with working on multi-territory campaigns, meanings apps get deployed in different iterations depending on the user’s location.

We like to get involved in the creative process, that way you can benefit from our expertise to come up with ideas that are possible between the latest developments and boundaries of the platform you wish to develop for.

CREATIVE

SOCIAL CMSWe build custom content management systems for most of the apps we build. These can load in-tab or out and will always be bespoke for your campaign, but based on our own framework.

Our previous experience of product management and marketing means we’ve always taken metrics very seriously. Setting up marketing funnels, goal conversions, tracking user journeys and trackable links are second nature to us.

We make sure your app works as intended across all supported browsers. To achieve this we spend a lot of time testing before your app goes live.

METRICS TESTING / QA

PLUS

BEL AMIProject

Tags

FACEBOOK APPFRAMEWORK

Brief

Technology

HTML/CSS/JSCustom CMSCloud hosting with Pagodabox

Build a Facebook sweepstakes competition framework that can be used across multiple film launches

LAUNCH

https://www.facebook.com/BelAmiUK/app_190288891070992

https://www.facebook.com/BelAmiUK/app_190288891070992

YOUNGMANProject

Tags

WEBSITEMOBILE SITE

Brief

Technology

HTML 5 / CSS3API’s (Twitter, Facebook, Instagram)Mobile skin

Polydor Records approached us about putting together a splash for Youngman, the brief mentioned a mobile skin which would display most of the content from the web version.

LAUNCH

http://iamyoungman.com/

http://iamyoungman.com/

TEFALProject

Tags

FACEBOOK APPCUSTOM CMS

Brief

Technology

HTML/CSS/JSCustom CMSCloud hosting with Pagodabox

Build a ‘welcome’ tab highlighting Tefal’s products and other online destinations and initiatives.

LAUNCH

https://www.facebook.com/TefalUK/app_289098467831261

https://www.facebook.com/TefalUK/app_289098467831261

XBOX 360Project

Tags

FACEBOOK APPBING MAPS

Brief

TechnologyHTML / CSS / JSAPI’s-(Bing maps, Viddler, Youtube)Custom CMSCloud hosting with Pagodabox

Deliver tools for a full social media campaign in support of above the line marketing activity.

WINDOWSPHONE

Project

Tags

SOCIAL MEDIA SKINNINGFACEBOOK TABWORDPRESS SITE

Brief

Technology

HTML / CSS / JSCustom CMSWordpress skinCloud hosting with Pagodabox

Re-brand a couple of Windows Phone blogs and social media pages including Facebook, Twitter and Youtube.

LAUNCH

Owen - be good to use an updated screenshot here. http://www.mykindofphone.com/

http://www.mykindofphone.com/

http://www.mykindofphone.com/

WINDOWSPHONE

Project

Tags


Brief

Technology



LAUNCH


https://www.facebook.com/windowsphoneuk/app_280066118679713


WINDOWSPHONE

Project

Tags


Brief

Technology



LAUNCH


http://mykindofphone.posterous.com/

http://mykindofphone.posterous.com/

WINDOWSPHONE

Project

Tags


Brief

Technology



LAUNCH


https://twitter.com/%23!/WindowsPhoneUK

https://twitter.com/%23!/WindowsPhoneUK

WINDOWSPHONE

Project

Tags


Brief

Technology



LAUNCH


http://www.youtube.com/WindowsPhoneUK

http://www.youtube.com/WindowsPhoneUK

WINDOWSAAA

Project

Tags

FACEBOOK APPSOCIAL MEDIA RE-SKIN

Brief

Technology

HTML / CSS / JSCustom in-tab CMS

Re-skin all of the Facebook tabs to match the new branding guidelines for the 2012 campaign.

LAUNCH

https://www.facebook.com/windowsaccessallareas


WINDOWSAAA

Project

Tags


Brief

Technology



LAUNCH



P.A.B.HPULLED APART BY HORSES

Project

Tags

FACEBOOK APPCOMP’ FRAMEWORK

Brief

Technology

HTML / CSS / JSCustom Soundcloud Player(API)Cloud hosting with Pagodabox

Deliver a creative way of offering content in exchange for directing their friends back to the app as a framework which can be refreshed.

LAUNCH

https://www.facebook.com/pulledapartbyhorses/app_153299381447298

https://www.facebook.com/pulledapartbyhorses/app_153299381447298

WINDOWSBRINGING DOWN THE HOUSE

Project

Tags

FACEBOOK APPVIDEO SUBMISSION

Brief

Technology

HTML 5 / CSS 3 / JSViddler video API for webcam submissions and file uploads.Cloud hosting with Heroku

Microsoft were to offer a full house makeover for students using some of the latest tech gear. The goal was to come up with a fun mechanic for students with a viral aspect and UGC.

PLAN BProject

Tags

RESPONSIVE SITEMOBILE

Brief

Technology

HTML 5 / CSS 3 / JSSoundcloud, Youtube, Twitter, Facebook APIsCustom CMS

Build a responsive website which will play nice on a desktop, tablets and mobile phones

CHRIS BROWNProject

Tags

FACEBOOK APP

Brief

Technology

HTML 5 / CSS 3 / JSFacebook/Twitter APICloud hosting with Pagodabox

Sony Music had big plans for Chris Brown, the aim was to get an #1 album. To support this, they needed something unique and beautiful to help engage with Chris’ fanbase.

CUSTOMCMS

Project

Tags

FACEBOOK APPBOOTSTRAP

Details

As part of Facebook appwork we build white label custom CMS solutions based on the Bootstrap framework.

The framework is very flexible, meaning each iteration can be tailored to your project’s specific requirements.

FACEBOOKCOMPETITIONAPP BUILDER

Project

Tags

FACEBOOK APPWHITE LABEL SOLUTION

Brief

Technology

HTML/CSS/JSBing maps, Viddler, Youtube APICustom CMSCloud hosting with Pagodabox

A tool that allows our client to launch Facebook different types of competitions on their Facebook profiles.

THANK YOU

ADDRESS: 235 UPPER STREET, N1R 4RU LONDON, UK | PHONE: +44 207 096 4217WEB: WWW.NEWBLACK.ME | EMAIL: [email protected] | TWITTER: @THENEWBLACK | FACEBOOK.COM/THENEWBLACKUK

http://WWW.NEWBLACK.ME

http://WWW.NEWBLACK.ME

