A full-fledged ecommerce platform

We built a sustainable, data-driven ecommerce platform, supported by a dynamic marketing page. The goal is to improve sales and customer retention, by offering extensive personalization and greater ease-of-use.

Project roadmap

Here's what the development process looked like, from start to finish.
1.5 hours

Lightning Decision Jam

A structured exercise to solve any problem, to avoid making unfounded decisions.
1 week

Design Sprint

Answer crucial business questions and validate ideas with end-users in just 4 days.
2 weeks

Prototyping Sprint

Create a prototype in just one week to validate technical assumptions
5 weeks

Execution Sprint

Refine what you’ve already built, focusing on high impact iterations towards an MVP.
1 week

Launch Sprint

Launch & assure stability. Measure & learn. Plan to adapt to customers’ changing needs.

The challenge

Edgard & Cooper produces food for both cats and dogs. Their mission is to offer fresh, unprocessed kibble, using lots of fresh meat. Their challenge? Building the Edgard & Cooper brand and expanding their business in the pet food industry by means of data-driven, sustainable growth, using a direct-to-consumer business model.
  • Project

    Marketing website, online shop & trial flow
  • Deliverables

    Prototype, UX, UI, front-end, user testing
  • Partners

The solution

A complete overhaul of Edgard & Cooper’s ecommerce platform and general online presence, including a marketing website, online store, as well as setting up the free trial package to entice new customers. Said platform is to become the first point of contact for (potential) customers, with clear CTAs, USPs, and providing a smooth shopping experience overall.

Design sprint

To kick off a new project, a four day design sprint is almost always the order of the day. A fragmented and timeboxed process designed to deliver a high-level prototype as well to immediately validate your efforts, is a great way to jumpstart the development process.

Monday

Define

Tuesday

Decide

Wednesday

Prototype

Thursday

Test

Monday

Time to get the ball rolling and address some core business questions. One of key objectives for Edgard & Cooper, is to become fully data-driven; being able to act upon what gets measured. Achieving sustainable growth by investing heavily into customer retention, was another big challenge that came forward. By working individually as a team, we’ve amassed a wide array of possible solutions.

Tuesday

Time to review the solutions we came up with yesterday. Based on the idea of hyper-personalization, the concept of the “free trial package” came about, which had garnered the most votes from the sprint team. New customers can create an account on the Edgard & Cooper web store, and order a free package of custom-tailored pet food, to try out at home. There's nothing quite like straight-up giving away free stuff as an incentive for new customers, am I right?

Wednesday

The final prototype of the free trial ended up being highly functional. A high-fidelity design of the user flow had been designed in Figma and made functional using Marvel. Intercom functionalities had been implemented as well, providing additional support and opportunities to gather feedback.

Thursday

We’ve launched the trial flow by linking it to an Instagram advertisement to raise awareness, which worked well and felt convenient and attractive to the end user. It did become apparent, however, that communicating the ‘free’ part of the trial couldn’t be overstated. Apart from that, the flow felt very natural for the most part, and the in-depth personalization was also very much appreciated.

Execution sprints

Building a marketing website and online store might not seem like the most technical matter in the world when you’ve got tools available such as Webflow, Squarespace or Shopify, but rest assured it’s no walk in the park either to make everything work together at this scale. Once the prototype sprints were out of the way, the next 8 weeks were spent designing and developing the marketing page and web store, as well as dealing with third-party integrations. During that time, we’ve established a pretty solid workflow, more on that on the next page. Most of the heavy lifting, however, was done using these two tools:

Frameworks

Webflow

An in-browser tool for designing and developing responsive websites. Webflow’s greatest strength is its no-code approach to building web pages, saving tons of time in the process. You can turn your static designs you made in Figma, for instance, into a dynamic and interactive website in a matter of hours. To top it all off, Webflow offers a built-in content management system (CMS) as well as additional hosting services; it’s one-stop shopping, really, if you want to get your website up and running quickly.

Shopify

A hosted, cloud-based web commerce platform for SMEs that lets users create, grow and manage their online businesses. Similar to Webflow, the no-code approach applies here as well. Offering tools for product and inventory management, payments, and shipping, Shopify is pretty fully-featured, if you keep things on a small scale and don’t stray away too far from their own way of doing things, that is.

Development

Web design

Every new design and iteration starts in the Figma project file. This is our single source of truth. Though, what makes Figma a real powerhouse for designing web pages, is that it’s a collaborative, cloud-based tool. Our own designers can effortlessly work in tandem with the client’s own team of designers or other third-party artists; Speed is the name of the game here, further empowered by instantaneous two-way feedback.

Web development

Whatever gets drawn or designed needs to be turned into structured HTML pages and CSS style sheets eventually. Webflow is almost always our weapon of choice to turn static designs into dynamic pages. Since Webflow creates real HTML and CSS code dynamically, web pages can be properly previewed on the spot. The addition of a GitHub repository in turn monitors all of changes made over time.

Commerce platform

A cloud-based platform such as Shopify commonly houses the core of an ecommerce business. To adjust its appearance, however, a custom theme had to be built to fit with the style guide stipulated by our client. With the help of the Ghent-based agency ESIGN, we’ve converted the CSS output generated by Webflow into a Liquid template, to provide some necessary back-end support for I.E. Shopify’s inventory and product management.

Third-party integrations

Unfortunately, depending on the business, Shopify will rarely be an all-in-one solution. Hence some additional integrations were required to get everything up to snuff. In this case, we’ve used Bizbloqs to manage the ERP together with DPD, which handles shipping, Ingenico to manage payments, and lastly the implementation of Weglot to deal with languages, translations and user localization.

The finished product

After a lengthy development process, Edgard & Cooper’s marketing page, free trial and online store were ready to be unleashed onto the world. A few months in, they happily reported having already noted a whopping 450% increase in ecommerce revenue. Not to brag or anything...

EDGARD & COOPER MARKETING PAGE

Explore the story of Edgard & Cooper

Bright and cartoony artwork, funky colors... Good vibes all over on this page. Learn what makes Edgard & Cooper’s pet food special in a simple yet appealing fashion, before heading on over to the online store.

EDGARD & COOPER ONLINE STORE

Shop for pet food catered specifically to your own four-legged friend.

A high level of personalization options coupled with a plethora of kibble and wet foods to choose from; finding the best type of food for your furry friend is child’s play around these parts.

Check it out

Bothrs introduced us to design sprints for the revamp of our digital brand and shop environment. In one week we'd defined goals, challenges, inspirations and solutions. We got everyone involved and aligned from the start! We’ve turned months of unstructured, ineffective processes into one intense week of strategy, prototyping and testing.

Wouter Baert
DTC Manager at Edgard & Cooper

Ready to tackle a business challenge of your own?

Hit us up!

Stef Nimmegeers

Bothrs co-founder
+32 499 48 01 20