Building a Fortnum & Mason e-commerce store in two days

Why doing it differently produced an innovative minimum viable product and enabled a better supplier selection process for Fortnum & Mason

Red Badger believes delivering an effective pitch to clients means showing them results, not talking about them. Red Badger had the opportunity to pitch for a project to completely rebuild a new eCommerce store for Fortnum & Mason. A written proposal doesn’t go far enough to prove the capability to deliver, so rather than respond in the traditional way by submitting a proposal to the board - Red Badger wanted to show what could be achieved rapidly by building a working prototype storefront.

After reviewing many eCommerce options Red Badger came to the conclusion that Spree Commerce was the best and most progressive platform. The Spree platform is built on open standards and is fully modular, so you can quickly modify the software as you see fit. It is very simple for a team with Ruby skills, with no prior knowledge of Spree, to get up and running with developing an eCommerce site.

So Red Badger decided to build an eCommerce storefront based on Spree from scratch, in a two-day hackathon so that they could present a working product to the board of Fortnum's. Fortnum's were invited to participate. The objectives of the hackathon were twofold. First for us to prove Spree to be a viable solution. Second, to prove our capability to Fortnum's, they could view our ways of working first hand, look at the code we had developed and view the designs.

This is how we did the hackathon...

The first activity was to put a team together. The point of a hackathon is that you deliver the project as if you would any other, it’s just distilled into a smaller timeframe. So, we had a PM, UX, Visual Designer, Developers and a Tester all working together to build a fully responsive end-to-end store over the two days.

Day 1

10:00 - After plenty of bacon for breakfast, we shaped the weekend by painting a brief. This was a short presentation with an overview of what we were trying to achieve and why.

11:00 - Brainstorm session to make a plan of action: Define an MVP, Plan for UX/Design Tasks, and Resource Allocation.

12:00- Pizza and beer arrive which became our fuel for the next day and a half.

12:30 - Start Hacking

There were a number of parallel tasks that were happening from this moment onward. These break down into the following areas:

• Get development and production environments ready. This used Vagrant, Ansible, and Heroku.
• Get all data and content required to build the store. This broke down into a couple of areas:
  • Building a chrome extension using LiveScript to export all of Fortnum's products and additional content from their existing site
  • Build a Ruby on Rails gem to import that data into Spree.
• Build the site which included the configuration of Spree and a custom responsive front-end in a new Fortnum design using HTML5 and CSS3.
• As features were being built they were immediately tested on multiple platforms.

19:00 - At the end of day one, we reviewed where we were. The outputs so far were:

• UX/Design
  • Site map
  • Wireframes and interaction design for mobile, tablet and desktop
  • Production visual design for some of the pages
• Tech
  • Taxonomy established
  • Environments provisioned
  • 3000+ Products exported and imported into Spree
  • Configuration of Spree
    • Tax
    • Delivery Options
  • Some front end pages were built and tested.

20:00 - End of day beers

Day 2

9:30 - Day 2 was primarily focused on getting the configuration of Spree complete, integrating Spree Storefront with an instance of Spree Hub (now called Wombat) for mock payments and SMS messaging, as well as getting the responsive front-end built.

At the end of the day the outputs were:

• UX/Design
  • Full set of designs for all pages in the flow
• Tech
  • End-to-end demo
  • All products are properly categorised and available for browsing
  • Add to basket
  • Checkout
  • Tax
  • Delivery
  • Payment
  • Text message order confirmation
  • Backend Spree Hub Integration
  • Responsive implementation of front end for some of the pages

18:30 - We all had dinner together

19:30 - A full demo of the completed product

Results

The end result was a really impressive end-to-end demo that had a great user experience on multiple platforms and had the same look and feel as Fortnum's current site with all of their products available for purchase.

In only two days, Red Badger produced a clean-looking, fully-functional eCommerce storefront that both Spree and Red Badger could showcase to Fortnum's board, who were bowled over by this innovative approach to fulfilling their brief.

The approach was a huge success and Red Badger won the project. Within 6 months the new Fortnum's' store was in live beta with a full switch over just 2 months later. The new Fortnum website can be viewed here.