Matsmart

Matsmart had raised new capital. Their mission to reduce food waste with a different model of online grocery was gaining traction. But so was the competition. It was a race to bring their innovative business idea onto a more modern tech platform. That involved a new front-end for the website, responsive design for the missing mobile layout and then later, mobile apps.

Design agency Futurice had been commissioned to create the user experience. They asked us to partner to help define the new tech stack and build the new Matsmart.se. We’re always excited by new business ideas that have a strong social purpose behind them. So we packed our lunch and got to work.

“We were looking for a partner who could handle our company’s ever-changing ambitions and requirements.” - Karl Andersson, CEO Matsmart

It was a situation we are seeing more and more. A smart tech company on the up and up. With a tech team that didn’t have the capacity to both keep the airplane flying and rebuild it midair. Squeezing the rebuild into their planning would have taken years, not months to complete. And so we embarked on another startup journey.

Our initial reaction

Unusually, the project wasn’t filled with many unknowns. While we had free hands to choose the new tech stack, it was clear that the right choice would be to build in React. The existing Drupal implementation would act as the backend, a headless CMS. A React frontend would allow us to go responsive as well as lay the foundation for a React Native mobile app.

“With React, we were able to quickly build reusable UI components, making light of the front-end work.” - Erik Lindgren, Tech Lead

No loading time to waste

With limited stock, a dedicated shopper cohort and no shelf life to waste, page load times needed to be fast. The hundreds of product images that were displayed were going to need to be loaded server-side to minimise page weight and improve speed. While not exactly rocket science, we hadn’t done this kind of implementation before. So it was something new and byte-sized for us to chew on.

1-to-1 Site

We began to rebuild the front-end of the website in React. This involved first rebuilding the desktop layouts one-to-one and then creating new mobile layouts designed by Futurice.

Happily, there were no dramatic wows. No Holy Cows. Just steady iterative development. Working closely with both Futurice, who developed the UI design, and with Matsmart meant everything was crystal clear.

“It was great to just see code and prototypes develop. No presentations. No big reveals.” - Andreas Kardell, CTO Matsmart

Hit refresh

A mobile app was always in the works. With a newly minted responsive site, we had to consider what role it would play. To do that we applied our Prototyp Bootcamp methodology to ideate with Matsmart. Workshops combined business opportunities with customer insights and various technologies.

Matsmart’s customers are often lingering on the site hitting refresh to see what the latest addition is. This behaviour fit perfectly for the mobile app. Show the newest products and add them to cart, quicksmart.

“It’s rewarding to see how our Bootcamp training concretely adds value to a client” - Tobias Bard, Prototyp

We built this app in React Native, and integrated the UX to seamlessly switch over to the mobile site for additional shopping features and check-out.

The new site was launched in time for a big marketing push on the back of a new funding round. Together they worked to add a sales bump with improved user experience.

“With the new front-end we boosted mobile performance and thereby became more relevant to some major segments such as young adults.” - Johannes Kayser, Head of Business Development, Matsmart

Our teamwork helped Matsmart upgrade the tech stack to enable their next phase of growth. While most users won’t notice many of the improvements, it shows under the hood and on the bottom line.

Visit the new site

Another CTO for hire

Our love affair with startups runs deep. As a result our tech leads often act as a CTO for hire. In this case, Erik supported the Matsmart team by laying down a technical road-map for further development of the website and enabling services.