3. WHO WE ARE
WE ARE A SMALL CREATIVE
DEVELOPMENT STUDIO, WITH
A FOCUS ON USER INTERFACE
AND SOCIAL INTEGRATION.
info@newblack.me
4. WHO WE ARE
OVER THE PAST 3 YEARS WE
HAVE BECOME EXPERTS IN
SOCIAL MEDIA DEVELOPMENT.
info@newblack.me
5. WHO WE ARE
BEN JIM
CURATOR & LEAD DEV / UX &
FOUNDING PARTNER FOUNDING PARTNER
PAST PAST
— —
Web developer Web developer
Head of digital Head of digital
Graphic designer Product manager
Graphic designer
OUTLOOK OUTLOOK
— —
With experience as a graphic Jim is fanatic about user
designer, web developer, and head experience, ensuring harmony
of digital, Ben is perfectly of the function and form, and
placed to coordinate projects & that every app has a clear
work directly with clients. defined purpose.
info@newblack.me
6. WHO WE ARE
THE
ADAM TOMS
DIGITAL & BACKEND DEVELOPMENT
UI DESIGNER & SERVER ADMIN
PAST
—
Graphic/Digital designer at
agencies Fivefootsix and Zone ABOUT
—
Both computer science graduates
The Toms are a formidable pair of
performance obsessives. Unlike the
OUTLOOK rest of the team The Toms
— work remotely.
Our UI perfectionist. Adams
understanding and balance of
function and form allows him to
create truly beautiful and
functional ideas.
info@newblack.me
7. WHAT WE DO
STATIC / WEB
Websites & micro-sites
Bespoke applications
Branding
E-commerce/D2C
SOCIAL
Bespoke social applications
Social media branding
Facebook experts
Social strategy development
MOBILE
Mobile sites
Bespoke applications
Responsive styling
info@newblack.me
9. WHO WE DO IT FOR
BRANDS AGENCIES MUSIC
POLYDOR RECORDS
XBOX BMB NEON
ATLANTIC RECORDS
WINDOWS PHONE LUCID GROUP
IBIZA ROCKS HOTEL SONY BMG
GRAPEVINE DIGITAL
MICROSOFT WINDOWS WARNER MUSIC
IMPRESSIVE
TOSHIBA NINJA TUNE
TEFAL UNIVERSAL MUSIC
BIC
FILM COMEDIANS
STUDIO CANAL MICHAEL MCINTYRE
PICTUREHOUSE KEVIN BRIDGES
JON RICHARDSON
info@newblack.me
10. HOW WE DO IT
WE DEVELOP FROM FRONT-TO-BACK,
ALLOWING US TO COLLABORATE AND
REFINE THE USER EXPERIENCE
WITH YOU, THE CLIENT.
info@newblack.me
11. HOW WE DO IT
WET AGILE
WET AGILE
The 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.
12. In many respects this is this is the most
important part of the project.
STRATEGY
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
13. 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
CREATIVE
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
CLIENT extremely clear idea of what to expect with
the final project.
14. 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 of
DEVELOPMENT
the process to be as quick and streamlined as
possible, ensuring that costs are kept as low
as 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 repo
has a ticketing system closely associated with it.
15. WHAT WE’RE ALL ABOUT
# 1
WE’RE A DESIGN LED STUDIO
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.
16. WHAT WE’RE ALL ABOUT
# 2
KEEPING AN EYE ON
EMERGING TECH
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.
17. WHAT WE’RE ALL ABOUT
KEEPING AN EYE ON EMERGING TECH
#2
CLIENT SIDE
SILEX COMPOSER CUSTOM CMS
We currently use the Silex Silex’s integration with Composer Initial templates are written in
framework for all apps. This means the framework pulls the Styl (compiles to CSS), and Jade,
utilises some of the great additional required libraries compiles to Twig templates(HTML),
features available in php 5.3 keeping the application lean, and this enables fast prototyping
that other frameworks don’t. allowing complete version and the use of mixins and
controlling on the dependancies. variables in CSS.
SPRINGLOOPS ENVIRONMENTS
For ticketing on larger scale apps, Our developers work locally, upload
deployment and Git version control of progress to a staging server and once
apps to facilitate collaboration approved by the client we commit to
between multiple developers. the live server.
18. WHAT WE’RE ALL ABOUT
KEEPING AN EYE ON EMERGING TECH
#2
SERVER SIDE
HTML5 / CSS 3 COFFEESCRIPT BACKBONE/
All apps have progressively All Javascript is written in KNOCKOUT
enhanced CSS3 features. Coffeescript, this beautiful
syntax is pre-compiled into For front-end MVC architecture
highly optimised JS.
STYL/JADE MOUSTACHE.JS
Initial templates are written in Styl Client-side templating
(compiles to CSS), and Jade, compiles
to Twig templates(HTML), this enables
fast prototyping and the use of
mixins and variables in CSS.
19. WHAT WE’RE ALL ABOUT
# 3
SENSIBLE STRATEGY
& MARKETING
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.
20. WHAT WE’RE ALL ABOUT
# 4
COLLABORATIVE IDEA
GENERATION
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.
21. AND THE REST...
BUT JUST AS IMPORTANT
PLUS
SCOPING LOCALISATION CREATIVE
Making sure the scope of the We’re at ease with working on We like to get involved in the
project has been documented multi-territory campaigns, creative process, that way you
and signed off by both meanings apps get deployed in can benefit from our expertise
parties. We deliver no more, different iterations depending to come up with ideas that are
no less than planned. on the user’s location. possible between the latest
developments and boundaries of
the platform you wish to
develop for.
METRICS TESTING / QA SOCIAL CMS
Our previous experience of We make sure your app works as We build custom content
product management and marketing intended across all supported management systems for most of
means we’ve always taken metrics browsers. To achieve this we the apps we build. These can
very seriously. Setting up spend a lot of time testing load in-tab or out and will
marketing funnels, goal before your app goes live. always be bespoke for your
conversions, tracking user campaign, but based on our own
journeys and trackable links are framework.
second nature to us.
25. Project
YOUNGMAN
Tags
WEBSITE
MOBILE SITE
Brief
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.
Technology
HTML 5 / CSS3
API’s (Twitter, Facebook,
Instagram)
Mobile skin
LAUNCH
26. Project
YOUNGMAN
Tags
WEBSITE
MOBILE SITE
Brief
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.
Technology
HTML 5 / CSS3
API’s (Twitter, Facebook,
Instagram)
Mobile skin
LAUNCH
27. Project
YOUNGMAN
Tags
WEBSITE
MOBILE SITE
Brief
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.
Technology
HTML 5 / CSS3
API’s (Twitter, Facebook,
Instagram)
Mobile skin
LAUNCH
28. Project
TEFAL
Tags
FACEBOOK APP
CUSTOM CMS
Brief
Build a ‘welcome’ tab
highlighting Tefal’s products
and other online destinations
and initiatives.
Technology
HTML/CSS/JS
Custom CMS
Cloud hosting with Pagodabox
LAUNCH
29. Project
TEFAL
Tags
FACEBOOK APP
CUSTOM CMS
Brief
Build a ‘welcome’ tab
highlighting Tefal’s products
and other online destinations
and initiatives.
Technology
HTML/CSS/JS
Custom CMS
Cloud hosting with Pagodabox
LAUNCH
30. Project
TEFAL
Tags
FACEBOOK APP
CUSTOM CMS
Brief
Build a ‘welcome’ tab
highlighting Tefal’s products
and other online destinations
and initiatives.
Technology
HTML/CSS/JS
Custom CMS
Cloud hosting with Pagodabox
LAUNCH
31. Project
TEFAL
Tags
FACEBOOK APP
CUSTOM CMS
Brief
Build a ‘welcome’ tab
highlighting Tefal’s products
and other online destinations
and initiatives.
Technology
HTML/CSS/JS
Custom CMS
Cloud hosting with Pagodabox
LAUNCH
32. Project
XBOX 360
Tags
FACEBOOK APP
BING MAPS
Brief
Deliver tools for a full
social media campaign in
support of above the line
marketing activity.
Technology
HTML / CSS / JS
API’s-(Bing maps, Viddler,
Youtube)
Custom CMS
Cloud hosting with Pagodabox
33. Project
XBOX 360
Tags
FACEBOOK APP
BING MAPS
Brief
Deliver tools for a full
social media campaign in
support of above the line
marketing activity.
Technology
HTML / CSS / JS
API’s-(Bing maps, Viddler,
Youtube)
Custom CMS
Cloud hosting with Pagodabox
34. Project
XBOX 360
Tags
FACEBOOK APP
BING MAPS
Brief
Deliver tools for a full
social media campaign in
support of above the line
marketing activity.
Technology
HTML / CSS / JS
API’s-(Bing maps, Viddler,
Youtube)
Custom CMS
Cloud hosting with Pagodabox
35. Project
XBOX 360
Tags
FACEBOOK APP
BING MAPS
Brief
Deliver tools for a full
social media campaign in
support of above the line
marketing activity.
Technology
HTML / CSS / JS
API’s-(Bing maps, Viddler,
Youtube)
Custom CMS
Cloud hosting with Pagodabox
36. Project
XBOX 360
Tags
FACEBOOK APP
BING MAPS
Brief
Deliver tools for a full
social media campaign in
support of above the line
marketing activity.
Technology
HTML / CSS / JS
API’s-(Bing maps, Viddler,
Youtube)
Custom CMS
Cloud hosting with Pagodabox
37. Project
WINDOWS
PHONE
Tags
SOCIAL MEDIA SKINNING
FACEBOOK TAB
WORDPRESS SITE
Owen - be good to
use an updated
Brief screenshot here.
Re-brand a couple of Windows http://www.mykindofphone.com/
Phone blogs and social media
pages including Facebook,
Twitter and Youtube.
Technology
HTML / CSS / JS
Custom CMS
Wordpress skin
Cloud hosting with Pagodabox
LAUNCH
38. Project
WINDOWS
PHONE
Tags
SOCIAL MEDIA SKINNING
FACEBOOK TAB
WORDPRESS SITE
Owen - be good to
use an updated
Brief screenshot here.
Re-brand a couple of Windows http://www.mykindofphone.com/
Phone blogs and social media
pages including Facebook,
Twitter and Youtube.
Technology
HTML / CSS / JS
Custom CMS
Wordpress skin
Cloud hosting with Pagodabox
LAUNCH
39. Project
WINDOWS
PHONE
Tags
SOCIAL MEDIA SKINNING
FACEBOOK TAB
WORDPRESS SITE
Owen - be good to
use an updated
Brief screenshot here.
Re-brand a couple of Windows http://www.mykindofphone.com/
Phone blogs and social media
pages including Facebook,
Twitter and Youtube.
Technology
HTML / CSS / JS
Custom CMS
Wordpress skin
Cloud hosting with Pagodabox
LAUNCH
40. Project
WINDOWS
PHONE
Tags
SOCIAL MEDIA SKINNING
FACEBOOK TAB
WORDPRESS SITE
Owen - be good to
use an updated
Brief screenshot here.
Re-brand a couple of Windows http://www.mykindofphone.com/
Phone blogs and social media
pages including Facebook,
Twitter and Youtube.
Technology
HTML / CSS / JS
Custom CMS
Wordpress skin
Cloud hosting with Pagodabox
LAUNCH
41. Project
WINDOWS
PHONE
Tags
SOCIAL MEDIA SKINNING
FACEBOOK TAB
WORDPRESS SITE
Owen - be good to
use an updated
Brief screenshot here.
Re-brand a couple of Windows http://www.mykindofphone.com/
Phone blogs and social media
pages including Facebook,
Twitter and Youtube.
Technology
HTML / CSS / JS
Custom CMS
Wordpress skin
Cloud hosting with Pagodabox
LAUNCH
42. Project
WINDOWS
AAA
Tags
FACEBOOK APP
SOCIAL MEDIA RE-SKIN
Brief
Re-skin all of the Facebook
tabs to match the new
branding guidelines for
the 2012 campaign.
Technology
HTML / CSS / JS
Custom in-tab CMS
LAUNCH
43. Project
WINDOWS
AAA
Tags
FACEBOOK APP
SOCIAL MEDIA RE-SKIN
Brief
Re-skin all of the Facebook
tabs to match the new
branding guidelines for
the 2012 campaign.
Technology
HTML / CSS / JS
Custom in-tab CMS
LAUNCH
44. Project
WINDOWS
AAA
Tags
FACEBOOK APP
SOCIAL MEDIA RE-SKIN
Brief
Re-skin all of the Facebook
tabs to match the new
branding guidelines for
the 2012 campaign.
Technology
HTML / CSS / JS
Custom in-tab CMS
LAUNCH
45. Project
WINDOWS
AAA
Tags
FACEBOOK APP
SOCIAL MEDIA RE-SKIN
Brief
Re-skin all of the Facebook
tabs to match the new
branding guidelines for
the 2012 campaign.
Technology
HTML / CSS / JS
Custom in-tab CMS
LAUNCH
46. Project
WINDOWS
AAA
Tags
FACEBOOK APP
SOCIAL MEDIA RE-SKIN
Brief
Re-skin all of the Facebook
tabs to match the new
branding guidelines for
the 2012 campaign.
Technology
HTML / CSS / JS
Custom in-tab CMS
LAUNCH
47. Project
P APART BY HORSES
.A.B.H
PULLED
Tags
FACEBOOK APP
COMP’ FRAMEWORK
Brief
Deliver a creative way of
offering content in exchange
for directing their friends
back to the app as a framework
which can be refreshed.
Technology
HTML / CSS / JS
Custom Soundcloud Player(API)
Cloud hosting with Pagodabox
LAUNCH
48. Project
P APART BY HORSES
.A.B.H
PULLED
Tags
FACEBOOK APP
COMP’ FRAMEWORK
Brief
Deliver a creative way of
offering content in exchange
for directing their friends
back to the app as a framework
which can be refreshed.
Technology
HTML / CSS / JS
Custom Soundcloud Player(API)
Cloud hosting with Pagodabox
LAUNCH
49. Project
P APART BY HORSES
.A.B.H
PULLED
Tags
FACEBOOK APP
COMP’ FRAMEWORK
Brief
Deliver a creative way of
offering content in exchange
for directing their friends
back to the app as a framework
which can be refreshed.
Technology
HTML / CSS / JS
Custom Soundcloud Player(API)
Cloud hosting with Pagodabox
LAUNCH
50. Project
P APART BY HORSES
.A.B.H
PULLED
Tags
FACEBOOK APP
COMP’ FRAMEWORK
Brief
Deliver a creative way of
offering content in exchange
for directing their friends
back to the app as a framework
which can be refreshed.
Technology
HTML / CSS / JS
Custom Soundcloud Player(API)
Cloud hosting with Pagodabox
LAUNCH
51. Project
P APART BY HORSES
.A.B.H
PULLED
Tags
FACEBOOK APP
COMP’ FRAMEWORK
Brief
Deliver a creative way of
offering content in exchange
for directing their friends
back to the app as a framework
which can be refreshed.
Technology
HTML / CSS / JS
Custom Soundcloud Player(API)
Cloud hosting with Pagodabox
LAUNCH
52. Project
WINDOWS
BRINGING DOWN THE HOUSE
Tags
FACEBOOK APP
VIDEO SUBMISSION
Brief
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.
Technology
HTML 5 / CSS 3 / JS
Viddler video API for webcam
submissions and file uploads.
Cloud hosting with Heroku
53. Project
WINDOWS
BRINGING DOWN THE HOUSE
Tags
FACEBOOK APP
VIDEO SUBMISSION
Brief
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.
Technology
HTML 5 / CSS 3 / JS
Viddler video API for webcam
submissions and file uploads.
Cloud hosting with Heroku
54. Project
WINDOWS
BRINGING DOWN THE HOUSE
Tags
FACEBOOK APP
VIDEO SUBMISSION
Brief
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.
Technology
HTML 5 / CSS 3 / JS
Viddler video API for webcam
submissions and file uploads.
Cloud hosting with Heroku
55. Project
WINDOWS
BRINGING DOWN THE HOUSE
Tags
FACEBOOK APP
VIDEO SUBMISSION
Brief
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.
Technology
HTML 5 / CSS 3 / JS
Viddler video API for webcam
submissions and file uploads.
Cloud hosting with Heroku
56. Project
PLAN B
Tags
RESPONSIVE SITE
MOBILE
Brief
Build a responsive website
which will play nice on a
desktop, tablets and mobile
phones
Technology
HTML 5 / CSS 3 / JS
Soundcloud, Youtube, Twitter,
Facebook APIs
Custom CMS
57. Project
PLAN B
Tags
RESPONSIVE SITE
MOBILE
Brief
Build a responsive website
which will play nice on a
desktop, tablets and mobile
phones
Technology
HTML 5 / CSS 3 / JS
Soundcloud, Youtube, Twitter,
Facebook APIs
Custom CMS
58. Project
PLAN B
Tags
RESPONSIVE SITE
MOBILE
Brief
Build a responsive website
which will play nice on a
desktop, tablets and mobile
phones
Technology
HTML 5 / CSS 3 / JS
Soundcloud, Youtube, Twitter,
Facebook APIs
Custom CMS
59. Project
PLAN B
Tags
RESPONSIVE SITE
MOBILE
Brief
Build a responsive website
which will play nice on a
desktop, tablets and mobile
phones
Technology
HTML 5 / CSS 3 / JS
Soundcloud, Youtube, Twitter,
Facebook APIs
Custom CMS
60. Project
PLAN B
Tags
RESPONSIVE SITE
MOBILE
Brief
Build a responsive website
which will play nice on a
desktop, tablets and mobile
phones
Technology
HTML 5 / CSS 3 / JS
Soundcloud, Youtube, Twitter,
Facebook APIs
Custom CMS
61. Project
CHRIS BROWN
Tags
FACEBOOK APP
Brief
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.
Technology
HTML 5 / CSS 3 / JS
Facebook/Twitter API
Cloud hosting with Pagodabox
62. Project
CHRIS BROWN
Tags
FACEBOOK APP
Brief
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.
Technology
HTML 5 / CSS 3 / JS
Facebook/Twitter API
Cloud hosting with Pagodabox
63. Project
CHRIS BROWN
Tags
FACEBOOK APP
Brief
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.
Technology
HTML 5 / CSS 3 / JS
Facebook/Twitter API
Cloud hosting with Pagodabox
64. Project
CHRIS BROWN
Tags
FACEBOOK APP
Brief
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.
Technology
HTML 5 / CSS 3 / JS
Facebook/Twitter API
Cloud hosting with Pagodabox
65. Project
CUSTOM
CMS
Tags
FACEBOOK APP
BOOTSTRAP
Details
As part of Facebook app
work 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.
66. Project
CUSTOM
CMS
Tags
FACEBOOK APP
BOOTSTRAP
Details
As part of Facebook app
work 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.
67. Project
FACEBOOK
COMPETITION
APP BUILDER
Tags
FACEBOOK APP
WHITE LABEL SOLUTION
Brief
A tool that allows our
client to launch Facebook
different types of
competitions on their
Facebook profiles.
Technology
HTML/CSS/JS
Bing maps, Viddler, Youtube API
Custom CMS
Cloud hosting with Pagodabox
68. Project
FACEBOOK
COMPETITION
APP BUILDER
Tags
FACEBOOK APP
WHITE LABEL SOLUTION
Brief
A tool that allows our
client to launch Facebook
different types of
competitions on their
Facebook profiles.
Technology
HTML/CSS/JS
Bing maps, Viddler, Youtube API
Custom CMS
Cloud hosting with Pagodabox
69. Project
FACEBOOK
COMPETITION
APP BUILDER
Tags
FACEBOOK APP
WHITE LABEL SOLUTION
Brief
A tool that allows our
client to launch Facebook
different types of
competitions on their
Facebook profiles.
Technology
HTML/CSS/JS
Bing maps, Viddler, Youtube API
Custom CMS
Cloud hosting with Pagodabox
70. Project
FACEBOOK
COMPETITION
APP BUILDER
Tags
FACEBOOK APP
WHITE LABEL SOLUTION
Brief
A tool that allows our
client to launch Facebook
different types of
competitions on their
Facebook profiles.
Technology
HTML/CSS/JS
Bing maps, Viddler, Youtube API
Custom CMS
Cloud hosting with Pagodabox