made-com-logo-white-v2

Migrating to React and React Native for an omnichannel retail experience

made web app_macbookgrey_front-600

The Challenge

Made.com is a successful European online furniture store, raising $137M VC funding so far. Style and design are at the core of Made’s brand, driving the necessity for a flawless web, mobile and in-store digital experience.

Growing Pains

Made.com's Magento powered website had driven growth since their founding in 2010 and clever utilization of a SaaS app platform had proven the value of a stand alone mobile app.

As the company evolved their monolithic website struggled to scale and had difficulty adapting to the changing brand and UX needs. The off-the-shelf mobile app offered limited customization, was only being available on the Apple app store, and couldn't support emerging technologies, such as augmented reality.

A New Stack

Following some research into their options the powerful combination of React & React Native were chosen. This allowed blazing fast performance and efficient reuse of code to provide a native performance across web, iOS and Android.

While they had a talented in-house tech team, they didn't possess the experience in the technology stack to implement best practices needed to lay the foundations for continued growth.

This is where Theodo came in.

The Solution

Form The Team

Theodo added two full-stack engineers and an agile coach to Made's tech team, under the direction of their Head of Product. The Theodo team had dual goals: first train seven Made engineers in React and React Native and, second release the mobile application before the busy Christmas period.

Map the Migration

With the two deliverables in mind, we first selected a key page on the website to migrate to React. Choosing the product listing page would prove the ability to share business logic and ability to fetch data from the API, whilst not requiring integrations such as payments. By creating the equivalent page within the mobile application in parallel we were able to validate that the code strategy provided maximum reuse, which would speed up development considerably.

With the approach decided upon we moved onto the most urgent product deliverable; completing the mobile app development.

 This would allow release to Android users & an international launch, as the technologies used offered easier language translation ability.

Iterative learning

In order to accelerate training, we formed a new team consisting of two developers and an agile coach from Theodo, and three Made.com developers. Within this team the product roadmap priorities were carefully matched with the skills the Made.com team needed to acquire in order to ensure a balance between speed and knowledge share.

Visibility

Estimating delivery schedules is notoriously difficult so Made leaned on Theodo's methodology and visibility tools to plan the roadmap and track progress. The mobile app was ultimately delivered on schedule, with key stakeholders kept informed every step of the way.

I was impressed with the technical and methodological training provided by the Theodo team. Not only did they allow us to launch our mobile and web app, but also enhanced our Showroom customer journey through an innovative touch screen experience while leaving us with a strong team to continue development going forward.

geert-engels

Geert Engels Director of Engineering

The Results

By creating a specialist team in which to place Made.com's engineers Theodo were able to provide business value both in delivery and training. By the end of the contract Made were left with a world-class cross-platform e-commerce solution, strong technical foundations and an in-house team able to deliver future iterations.

  • Mobile application successfully launched internationally on iOS & Android
  • Seven internal developers highly trained in new technology stack 
  • Exceptional SEO performance along with the ability to index more custom pages

With the success of the web and mobile applications, the code reusability offered by React and React Native frameworks presented the opportunity for more digital innovation. Within four weeks a custom application was developed for 65 inch touchscreen, placed in their showroom, tying together the online and offline experiences.

  • Reduced deployment lead-time through innovative build pipeline.
  • Serverless payment service to allow Apple Pay within the mobile app.
  • Consistent omnichannel experience powered by shared code, meaning no separate web and mobile engineering teams

Technical Strategy

Developing with React and React Native, JavaScript frontend libraries maintained by Facebook, we created a dynamic and blazing-fast user interface that our end-users loved. This choice also created a versatile development team, capable of working on both the web and mobile applications. This meant there was no need to hire separate web, iOS and Android developers

Apollo GraphQL was used to create a data layer that was accessible to the front end team. This limited development requirements on the backend whilst also improving site performance.

Node.js was used for server-side rendering and the choice of Next.js helped SEO performance and improved page load time.

Stripe was the payment platform of choice for the mobile application, chosen for its speed of development and adaptability.