Case
Studies

Hack&Craft

Dulux Amazing Space

Dulux Designer Portal & Consultation Booking System

The Client

AkzoNobel is a leading global paints and coatings company and major producer of specialty chemicals. Dulux is AkzoNobel’s leading paint brand in the UK.

Problem / Opportunity

Paint distribution is of vital importance to Dulux. More and more enthusiastic home builders want to get inspired and do much of the work themselves. All they need is the affordable help of professional interior designers. For this they envisioned a well-designed consultation booking platform open to any consumer. They tasked MRM//McCann to build the portal. After over one year of development, Dulux were saddled with a behemoth system, that could not be extended nor maintained. Hack and Craft took over the project because complex payment options were needed and the third party booking engine needed replacing.

Innovation Team

AkzoNobel brought us on-board to build a booking platform, replacing the third party service in use. We liaised with the original agency, business owners, interior designers and customer support to work out the smoothest possible integration story.

Based on the successful integration of our booking engine we were tasked to add time-tabling portals, voucher codes and a deeper integration. Gradually we rebuilt the system from the ground up into a flexible and performant platform in which new requirements could be realised very quickly.

Tech

We analysed the status quo and realised that the original architecture could not facilitate any meaningful changes. We were consequently tasked to simplify the architecture and add new capabilities. We added a complete CI harness and process around the inherited source code, and successfully onboarded it without any documentation. The key challenge was how to reengineer a brittle and inflexible system based on third party plugins and generic SaaS to enable faster iteration towards market fit.

Impact

With our bespoke architecture, Dulux were able to push through powerful new features and carefully crafted user journeys. We also provided a streamlined BI process that allowed accurate KPI monitoring.

We operated the platform for Dulux at a fraction of the original cost. Finally, Dulux was able to run UX tests and compare conversion and customer life time value across their experiments. They were able to try and validate custom pricing options and with our tailored booking solution managed to streamline the interior designer schedules, thereby reducing staff costs in the design team.

1. Ideation 2. Development 3. Scale UX Improvements A/B Testing Performance Tuning CONTINUOUS DELIVERY Booking Platform Designer Platform CI Processes ALPHA Dulux Designer Team Dulux Business Team Hack and Craft Team members PROJECT ROADMAP
BOOKING ENGINE CONSUMER PORTAL DESIGNER PORTAL DESIGNER MANAGER PORTAL BOOKING BD LEGACY BD1 LEGACY BD2 LEGACY BD3 MONGO BD SERVICE BUS Dulux Amazing Space Various data stores before simplification LEGACY PLATFORM BOOKING ENGINE API

Fotolia

Machine learning enhanced image recognition & human automation

The Client

Fotolia by Adobe is Europe's leading online stock image company. It currently offers over 57 million high-res, royalty-free images and videos available to license.

Problem / Opportunity

Fotolia has a vast, ever expanding picture catalogue. To make these pictures discoverable to users requires very detailed categorisation along many dimensions. In this instance, they needed pictures of people categorised along with the number of people in picture, ethnicity, gender and the age group of each person. Fotolia used to employ a dedicated workforce to enrich their pictures with this highly specialised data. The workforce could not keep up with new image influx nor was it run cost effectively. This is when they approached us.

Innovation Team

We teamed up their search and data owners with our machine learning and image recognition experts to form the innovation task force. We sketched out the integration story, suitable outcome data format and ideal cost per categorised picture so that the solution would pay for itself in a short time.

Tech

We started modelling the decision tree each picture would have to pass to be properly categorised. We ran several tests through a variety of image recognition systems. The results we gathered made it clear that we would also need to utilise machine learning techniques in order to increase the accuracy and improve results over time. Essentially the output from the image recognition systems was often ambiguous. However, there were observable patterns in these ambiguities. Using this insight, we assembled a very large set of training data which had been pre-categorised by Mechanical Turk. These images were then run through image recognition and we were able to build a machine learning model which plotted the patterns in the ambiguous image recognition data and their relationship to the correct categorisations produced by mTurk.

The entire system was exposed via APIs enabling new pictures to flow from the Fotolia website through the machine learning categorisation and be passed back to the website in a matter of seconds.

Impact

Fotolia used the system to categorise 250k pictures in the first month, for just under 6 cents per picture. This means they saved nearly 90% of the cost for picture categorisation. With our image pre-processing and dynamic quality control, we were able to lower the categorisation error rate by 20%.

1. Ideation 2. Development 3. Scale 250k images At <6 cents / picture Expanded task brief Multiple concurrent categorisation projects CONTINUOUS DELIVERY ML based image pre- categoriser Reinforcement training MTurk Task Pipeline ALPHA Fotolia Data Owners Fotolia Picture Search Team Hack and Craft Team members PROJECT ROADMAP

INDIVIDUAL CATEGORISER TASKS GROUP CATEGORISER TASKS COMMON JSON RESULT FORMAT MACHINE LEARNING PEOPLE CATEGORISER TASK 1 TASK 2 TASK 3 Fotolia

Market Force – Eyes:On

Multi-Platform Mystery Shopper Workforce Apps

The Client

Market Force helps businesses measure and improve their customer’s experience through mystery shopping, CSAT surveys, contact center data, and more. They operate a multinational workforce for mystery shopping and store audits.

Problem / Opportunity

The workforce’s only interface was one legacy website with no mobile support. This made the data collection unreliable, affected data quality and reduced Market Force’s ability to onboard new shoppers.

To bring the necessary work tools to the shopper force’s fingertips, we suggested building location aware mobile apps for all major platforms. This would enable shoppers to do their tasks right there on the spot. It would be easier for the workers to collect more data, quicker and more accurately while having to rely less on memory or hand written notes.

Innovation Team

We built an innovation task force around their CTO, Sales Director, Head of the Shopper Force and internal IT from both US and UK platform teams. We added designers, product specialists, senior mobile architects and innovations facilitators.

We proceeded to build the prototype shopper apps for iOS and Android first. We developed the apps in feedback driven iterations with weekly releases. We committed to a staged rollout and released the MVP to the market, expanding its functionality and streamlining the UX over time with the explicit aim of getting real market feedback as early as possible.

Tech

We built an abstraction API on top of various legacy APIs. This API exposes a fully authenticated, Swagger documented JSON REST API which provides a coherent view of all business functions. The API is consumed by the location aware mobile apps we built for iOS, Android, Windows Phone and Desktop using the Xamarin platform. With Xamarin we could create fully native apps, crucial in terms of performance, while sharing code across all platforms and the API. Abstraction and code reuse enable low maintenance costs and keep business logic confined in a central code repository, not distributed over various platform specific code bases.

Impact

With these apps, Market Force shoppers are now able to complete reports and audits right on location in the store. They accept on average 50% more jobs, are three times as likely to complete an assigned job and requests for clarification by the data quality team have gone down by 75%.

Today the four Market Force apps have become the go-to tool for the shopper force. We continuously deliver improvements to them and observe a business-critical SLA.

1. Ideation 2. Development 3. Scale iPad App Windows Phone App Windows Desktop App CONTINUOUS DELIVERY API iPhone App Android App ALPHA Market Force US Market Force UK Hack and Craft Team members PROJECT ROADMAP

IOS iPhone iPad Phone Tablet Phone Desktop ANDROID WINDOWS WINDOWS Marketforce LEGACY API 1 LEGACY WEBSITE 1 LEGACY API 2 LEGACY WEBSITE 2 LEGACY API 3 ABSTRACTION API

Axel Springer – Football Collective

Content discovery network across hundreds of blogs

The Client

Axel Springer is one of Europe's largest media companies and Europe’s leading digital publisher. They operate an incubator for promising new ventures. The Football Collective is set to be Europe’s leading football information platform, a blog syndication network with an AI content recommender and real time ML user classifier.

Problem / Opportunity

Football is a fragmented, real time market. It has a core audience of passionate fans that hunger for the latest content. That content is served largely through independent blogs, which offer great opinion, but can be one sided. To provide the whole view and give a 360 degree picture to football fans, The Football Collective wanted to syndicate all content of member blogs, classify it along multiple dimensions, track user behaviour and recommend the most suitable content hyper-personalised to each user in real time.

Innovation Team

We were engaged from the earliest phases of this venture and worked directly with the product owner, blog network manager and various publishing specialists from inside Axel Springer. We brought in our innovation specialists, Creative Director, Architect and Business Analyst who formed the innovation team. We then sketched a central content aggregator site, captured user journeys, outlined the integration story for all members in the blog network and developed content personalisation strategies.

Tech

We published the central marketing site after two iterations, built the blogger self-signup & management portal and provided the integration widget to all blogs. With all this integrated, we racked up 15M daily page views within two months. To manage this data flood we built a highly scalable micro-services architecture using service bus with NodeJS based content & tracking servers processing 10k+ concurrent requests. The data is fed into an Hadoop / big table based ML cluster and evaluated in near real time. The output drives display personalisation for all visitors to any of the network blogs. This infrastructure is able to ingest in excess of 100M+ events per day.

Impact

Axel Springer was able to launch and run the most successful football blog network in Europe. So successful in fact that it was acquired by OneFootball, the leading football publisher in Europe after just one year of operation. At its peak, it served well over 60M page views, ingesting 10k news items and classifying over 12million users per day.

1. Ideation 2. Development 3. Scale OneFootball SOLD TO Blog Network Platform Plug N Play integration widget Content Recommender Visitor Classifier ALPHA Axel Springer Hack and Craft Team members PROJECT ROADMAP
BLOG 1 BLOG 2 STORYLINE NETWORK CONTENT DISCOVERY WIDGET SPRINT 1 SPRINT 2 SPRINT 3 Axel Springer BLOG 1 BLOG 2 BLOG 3 WIDGET 2 WIDGET 1

FullSeats

Group-booking platform

The Client

Great American Days is the leading experience booking agent in the US. They bundle a vast number of independent event operators in one online presence ready for booking.

Problem / Opportunity

Great American Days recognised that event operators couldn’t fill their events to maximum efficiency, but if they were to do so, they could pass on these efficiencies to customers. They needed to find a way of incentivising many people to join one event. They also wanted this solution to become a fully-fledged booking platform and essentially to become the one stop shop booking platform for experience organisers.

Innovation Team

We assembled an innovation team around the Founder consisting of business model innovators, UX experts, designers and senior architects. In a discovery workshop we arrived at the group-booking model with dynamic discounts. By offering discounts and booking extras we turn each participant into an event promoter. This generates free advertising for the operator through the social media reach of each individual promoter. At the same time, it guarantees much better resource utilisation for operators as everyone is incentivised to join a single event and gain larger group discounts.

Tech

Early on we realised that explaining the group concepts might be a great challenge. We storyboarded and wireframed possible user journeys always with a focus on explaining the group dynamics clearly and prominently. We tested these early on and with the feedback we began development iterations. With a working prototype from sprint one we constantly got more relevant feedback and improved the booking platform until we had the launchable MVP. The MVP included a white labelled booking service that connects agents and experience operators on a 360-degree event management and booking platform.

The platform itself is, at its core, a distributed booking system with a well-documented RESTful API, multiple white labelled Angular Web Apps, a complete CI solution & testing harness and hosted in the Azure cloud on highly available infrastructure.

Impact

FullSeats is live at fullseats.com, it is fully integrated into Great American Days and delivers the group booking dynamics and event management capabilities envisioned. Compared to the previous booking solution operators now enjoy a 60% higher resource utilisation. Moreover, only half as many events get cancelled because they don’t achieve minimum participant numbers.

1. Ideation 2. Development 3. Scale Certificates / Vouchers Product Bundling On Demand Bookings Add On Booking CONTINUOUS DELIVERY Group-booking Platform Operator Portal Agent Portal Customer Portal ALPHA GAD Product Owner Hack and Craft Team members PROJECT ROADMAP

AGENT PORTAL OPERATOR PORTAL WHITE LABELLED BOOKING PORTAL & EMBEDDED INTEGRATION WIDGET FullSeats Group Booking Platform

Dulux Let’s Colour Magazine

Online magazine and CMS system

The Client

AkzoNobel is a leading global paints and coatings company and major producer of specialty chemicals. Dulux is AkzoNobel’s leading paint brand in the UK.

Problem / Opportunity

Fotolia has a vast, ever expanding picture catalogue. To make these pictures discoverable to users requires very detailed categorisation along many dimensions. In this instance, they needed pictures of people categorised along with the number of people in picture, ethnicity, gender and the age group of each person. Fotolia used to employ a dedicated workforce to enrich their pictures with this highly specialised data. The workforce could not keep up with new image influx nor was it run cost effectively. This is when they approached us.

Innovation Team

We brought together our branding and visual experts, our Creative Director and Senior Frontend Architects with the Dulux Product Owner and Magazine Publisher. Together we formulated the vision for the magazine, created branding guides following the Dulux global corporate identity, proposed new navigational concepts and presented the full designs.

Tech

The designs directly convinced the Dulux product team and we started to build the next generation content publishing framework. We created a streamlined AngularJS based content administration backend on top of the fully documented RESTful API. The magazine is presented as SEO optimised server side rendered content with progressively enhancing capabilities based on browser features. The site is fully responsive and highly performant.

Special attention was required for colour representations with integrations into existing Dulux online eCommerce solutions as well as the dynamic colour mark up of images called HotSpots.

For colour markup we developed a specialised tool that allows editors to upload custom images, select areas in the picture, get suitable Dulux colours recommendations and link them to the online purchasing system. The HotSpots are always properly displayed on the image with our placement algorithm. Display is always correct on all aspect ratios, devices and form factors.

Impact

Up to now Dulux published three magazine editions on the new platform. They now have a very fresh looking online magazine, that successfully drives traffic to their sales channels and sustains higher engagement. They are able to maintain the content themselves and keep the magazine up to date.

1. Ideation 2. Development 3. Scale Autumn/Winter 2016 issue 2017 issue CONTINUOUS DELIVERY Spring/Summer 2016 issue ALPHA AkzoNobel Hack and Craft Team members PROJECT ROADMAP

Spring/Summer 2016 LET’S COLOUR MAGAZINE Autumn/Winter 2016 LET’S COLOUR MAGAZINE CMS INSPIRATION SECTION HOME PROJECTS SECTION PRODUCTS & COLOURS SECTION AkzoNobel Dulux – Let’s Colour Magazine – Printed issue

ProSieben – Gymondo

Gymondo.de – personal trainer online

The Client

The ProSiebenSat.1 media group is a European mass media company. It operates commercial television, premium pay channels, radio stations and related print businesses.

Problem / Opportunity

Personal fitness is a constantly growing sector. With today’s online connectivity, compressed schedules and social anxiety, the time for interactive at-home fitness delivered via the internet or mobile apps has come.

Innovation Team

A successful serial entrepreneur approached us to build the next generation online fitness studio. We brought our Creative Director, UX experts and senior architects to the innovation team. Together we formulated the idea for BurnPlus, your personal fitness trainer. It would have interactive videos with challenges for the viewer. It would have trophies, a messaging system, mobile apps and much more.

Tech

We kicked development off with building the core end-to- end transaction. After the first iteration users were able to sign up for a fitness plan, see their workout schedule, and start exercising. We built a custom interactive video player, that would work on all browsers from mobile native android, over iOS to IE, Safari, Chrome and Firefox without problems. We built automated video encoders and annotators, so the platform content admins could create new courses and insert freely configurable challenges at any point in the video. We added challenges, so that users could record an exercise, record their score and challenge any other platform user to beat them. We built automated course scheduling, that would adapt to the user’s condition and pace, so they wouldn’t get demotivated or bored. We built an in-platform messenger so users could feel and interact with the community. We connected various payment providers for the most convenient payment options, and built optimised recurring billing routines. Finally, we rounded off with mobile apps for Android and iOS so users could, for the first time, exercise at home, in the office or on the go.

Impact

This altogether formed a ground breaking new personal fitness online offering. The platform reached 40,000 paying users within three months of its launch.

The platform soon captured the imagination of various investors and finally the ProSieben-Sat1 acquired BurnPlus, renamed it Gymondo and has been operating very successfully since.

1. Ideation 2. Development Virtual Personal Trainer Platform ALPHA ProSieben Hack and Craft Team members PROJECT ROADMAP

GYMONDO MARKETING LANDING WEBSITE USER TRAINING PORTAL ADMIN PORTAL VIRTUAL PERSONAL TRAINER PLATFORM PERSONAL TRAINER 1 PERSONAL TRAINER 2 PERSONAL TRAINER 3 ProSieben

Stylishly

Virtual wardrobe and personal stylist

The Client

Two innovative entrepreneurs approached us with the idea to disrupt the online fashion market.

Problem / Opportunity

With style bloggers and fashionistas getting more and more common place, society as a whole is getting more and more fashion conscious. Based on knowing your personal wardrobe, the entrepreneurs stipulated they can know your taste and style and are able to best recommend suitable, new fashion on offer around the web. All the while you can now organise your wardrobe and create your own looks without standing in your closet.

Innovation Team

We paired them up with our innovation specialists, UX experts, creative director and senior architects and this innovation team went straight into ideation. In discovery workshops we sketched out the ideal story and UX for the envisioned iOS app, a branded marketing website and various marketing channels.

Tech

We proceeded with the development of the looks curation portal and iPhone app iteration by iteration. After the first iteration, we had a prototype ready to test with real users and the fully worked out UX and designs. This first version encapsulated the end to end transaction, from admin looks curation, over user signup, wardrobe upload and in-app look creation.

One key feature of Stylishly is the look curation with automated item replacement. The Admin creates new generic looks and our machine learning based algorithm analyses a user’s wardrobe, picks one or 2 suitable items that the user has a high propensity to use, and puts them into the generic look, there by personalising the look. This ensures each user regularly gets highly personalised, relevant new looks suggested, without a human curator having to do all the legwork.

To train our ML model, we stipulated a few exclusion criteria for which items could not replace others and proceeded to generate a large training data set by human fashionistas. They would compile personalised looks and create many variations on the look by replacing 1 or 2 items. The ML model was trained on identifying item similarities and select user’s wardrobe items based on a close visual match, according to style, pattern and colours.

Impact

Today Stylishly is used by a large community of fashionistas in their daily morning routine and new look discovery. A variety of celebrity look curators bring the latest and greatest to Stylishly users. For some users, this has taken all stress out of the daily “what am I going to wear” conundrum and for others now Stylishly informs them on which fashion item to buy next.

1. Ideation 2. Development 3. Scale UX Improvements Additional Features CONTINUOUS DELIVERY iOS App Blog Platform Looks Curator ALPHA Stylishly Hack and Craft Team members PROJECT ROADMAP

IOS IPHONE APP STYLISHLY NEWS STYLISHLY ADMIN PORTAL VIRTUAL WARDROBE Stylishly FASHION KNOWLEDGE AFFILIATE MARKETING

Schneider Electric – Support

Re-envisioned UX for global and regional support

The Client

Schneider Electric is a global specialist in energy management and automation with operations in more than 100 countries. They offer integrated energy solutions across multiple market segments.

Problem / Opportunity

Schneider Electric is a global specialist in energy management and automation with operations in more than 100 countries. They offer integrated energy solutions across multiple market segments. Schneider’s unique history and organically grown organisational structure is visibly presented on their websites, both global and regional. Schneider support is an amalgamation of differently styled web pages, some with a focus on search, some prompting users to call into a call center, some pushing mobile apps and some offering help through online chat. At this stage users often do not find what they are looking for and are increasingly not even attempting to browse Schneider’s website, knowing that information there is hard to come by. This has an impact on sales.

Innovation Team

Schneider approached us to create a global guideline for their support and contact us sections. We were to present fully responsive customer experiences, that would present the information helpfully and well structured, while being customisable enough for all involved regions. We brought together business and support owners from the UK, US, France, China, Russia and Schneider Global. We added our UX experts, Designers and business analysts to the innovation team and iterated towards global support guide lines and local customised implementations of these.

Tech

In weekly sprints we presented new interactive prototypes and responsive designs for feedback. We hosted a 2-hour feedback and planning session and discussed any feedback or concerns voiced. We synthesised the common vision and next steps and proceeded with the next iteration. Through our unique feedback triage approach, we were able to get everyone on board and incorporate their feedback, so that after only 6 iterations, we were able to present the final guidelines and regional implementations.

To ease integration pains, we also went above and beyond by providing integration-ready frontend’s that can easily be integrated, by leveraging existing API’s and rendering their content dynamically into any page.

Impact

Schneider took the guidelines and tasked their CMS vendor to incorporate the corresponding changes in the Global, UK, US and French sites. These guidelines give Schneider’s customers a coherent, well structured, clean and informative new support and contact section. They also decrease unsuccessful page-exits, increase customer satisfaction and demonstrate ROI through increased sales.

1. Ideation 2. Development Global & Regional Customer Support Designs Integrations for existing Schneider Electric website ALPHA SE Global, China, Russia SE US SE UK SE France Hack and Craft Team members PROJECT ROADMAP

Schneider Electric Global and regional support pages – unstructured, unorganised 1 2 3 4 5 6 GLOBAL RECOMMENDATION REGIONAL IMPLEMENTATION 1 REGIONAL IMPLEMENTATION 2 REGIONAL IMPLEMENTATION 3 THROUGH SPRINT ITERATIONS AND FEEDBACK

FriendFund

Europe’s first community funding platform

Problem / Opportunity

In 2010 Harry met Martin. Harry had that idea of community crowd funding. Kickstarter had barely launched and was funding commercial projects. No other crowd funding site existed. And none had any plans for facilitating the local community’s fundraising efforts. The local table tennis club, a friend’s birthday, the local kindergarten’s newspaper, a school garden, a local band’s first concert, all projects that would otherwise go unfunded.

Innovation Team

With experience from Rocket ventures and Fortune 500 companies under their belt, the founders knew they had to launch within 3 months. They went through the discovery phase and sketched out the required functionality for an MVP.

Tech

The founders engaged a talented designer and worked out the branding and visuals for the MVP. Working in an early version of the agile Hack and Craft methodology, they built the platform iteration by iteration. Very early on they had a working prototype and got positive, real feedback from real alpha users. They built a comprehensive group payment system, that would only collect money from Paypal or credit cards, once a funding goal had been achieved. The payment system would retry failed payments, keep accurate account of all transactions and provide reliable accounting for all funding campaigns and dispense the funds automatically at the end of a campaign.

Friendfund received great press coverage from the like of Techcrunch, BBC Click, the Guardian and others. Investors followed suit and funded scaling up the friendfund platform. The friendfund team hired community managers, localised the platform to US, Canadian, UK, German and Austrian markets. Friendfund received cash and Amazon cash voucher payout options. We added advanced fraud protection capabilities, where multi dimensional criteria would establish the likelihood that a particular user is a scammer or not. Scammers would get isolated in a fenced off sandbox.

Impact

Friendfund became the first and most advanced community funding platform in Europe. With its advanced technology, it helped build a reputation for security & trust. With our community, we built a reputation for public responsibility. Together we funded wide ranging projects from the budding musician’s documentary, the student living abroad, who wanted to visit her sick boyfriend, the sports club wanting to visit the Olympics, the living room whiskey tasting club, funding for the local cinema, upkeep of a local community area or the towing of an artist’s boat-home for much needed repairs. Friendfund had a lasting impact on many lives.

1. Ideation 2. Development 3. Scale UX Update CONTINUOUS DELIVERY Group Payment Platform ALPHA Hack and Craft Team members PROJECT ROADMAP

POOLS LANDING WEBSITE USER POOL WEBSITE USER PORTAL GROUP-PAYMENT PLATFORM