Foodservice International relaunch of the Franke e-commerce platform

About Franke

Franke is a leading global supplier of products and solutions for private kitchens and bathrooms, professional system catering, coffee preparation as well as half-public and public washrooms. The Group consists of five business units.

Headquartered in Aarburg, Switzerland, the Group employs around 9,200 people in 68 Branch offices on five continents and exports to over 100 countries. The Franke Group generated sales of CHF 2.1 billion in 2016 and is part of the Artemis Group.

The assignment

After a screening, Franke Foodservice chose Berlin-based React experts Ventzke Media as its new digital agency partner in Germany. The B2B web shop, which is used daily by the major players in the system catering industry worldwide, was to be redesigned and implemented as a React single-page application.

  • Industry

    Foodservice
  • Client

    Franke Foodservice Systems
  • Services

    Prototyping & UX Design / Development Frontend as Single-Page-Application / Maintenance / Tech Consulting / Teamintegration
  • Features

    Multilingualism / Product filter / OnePage Checkout / Progressive Web App
  • Technologies

    React / TypeScript / Express / Node.js
  • Project period

    2017 - 2019 / continuously

www.franke.com/euro/en/fs.html

Franke

Project work in international teams

At an internationally represented company like Franke Foodservice Systems, numerous teams are involved in the development process. The challenge of the project was the interaction of the new web front-end with the existing back-end (ERP system), which retrieves worldwide stocks of all Franke department stores in real time. Our developers worked collaboratively with Franke's lead developer team. Franke's project management was led from the USA. The agile approach ensured a high degree of flexibility and quick coordination.

Franke

Our services

  • Performance of workshops
  • Agile procedure with overlapping sprints for fast acceptance processes
  • Conception, optimization of the UI/UX architecture
  • Creation of desktop, mobile wireframes and prototypes (MVP)
  • Development of screen designs for desktop and mobile
  • Development of the frontend as Single-Page-Application(SPA) & Progressive-Web-App (PWA)
  • Long term support, consulting and weekly code commits
  • provision of development resources / team integration

Agile approach and a Cutting-Edge Tech Stack

Basecamp
Slack
Gitlab
React
Redux
Typescript
Node
Yarn

The individual project phases were divided into sprints. For each sprint there was a wireframe and a design process. Once the sprints were released, the development of the React front-end templates began. At the same time, the next conceptual sprint already began. In this way, we ensured that shortly after a prototype was created, it was then directly implemented and released for testing.

Modern tools for communication

Instead of the usual e-mail traffic we use modern communication tools like Basecamp. The advantage of this is that different topics can be created for a better overview, in which communication can be channelled without causing management overhead. Another aspect is that all stakeholders are always informed about updates without having to communicate actively.

Continuous further development

Even after the development of the last sprint, the e-commerce portal, which had grown over the last 15 years, was still far from being complete. After the first release for the German-speaking countries, further countries were successively activated. Our concept and development team continues to work on new features to release them quickly and push new code updates on a weekly basis.

Concept - Prototype - MVP

In the conception phase we developed the new UX of the e-commerce platform. Previous structures and click paths were completely revised. Because of the new UX architecture, the user will be able to reach the desired products much faster in the future. By means of filter options and the display of important information such as availability and delivery times without having to enter the product detail page, an optimized user experience is ensured.

We have significantly slimmed down the checkout process to increase the conversion rate. The new UX is combined with the high-performance frontend, which provides all content without loading times thanks to the React JavaScript library.

  • 2 months to the first prototype
  • 4 weeks conception phase
  • 16 weeks to the finished MVP
  • 100+ developed templates
  • 4000+ hours invested to date

The Dashboard - Personalized Customer Experience

In collaboration with the international project team of Franke we discussed all templates of the old webshop. We asked ourselves whether existing content was necessary and how click ways could be shortened. Based on data analyses, decisions could be validated.

The requirements for the dashboard were:

  • simple menu navigation
  • Prominent presentation of the product search
  • display of promotions in a slider, optimized for the user's field of view
  • Personalized speech to the user
  • Quicklinks based on tile-based boxes

The product categories

With the new presentation of product categories, the user reaches his destination faster. An intelligent pre-filtering saves a boring search. Depending on the customer group, e.g. franchisees, different products are offered. Always present above the footer; the last visited products.

Always present above the footer; the last visited products.

The search results and the product detail page

On the left side of the screen there is still the possibility to filter. On the right, the products appear in a list view. The user sees important product information such as delivery times in advance. Always present, the functions for bookmarking.

The watch list

All bookmarks are available to the user on the watch list. Here he has the possibility to put products directly into his shopping cart to complete his order. Depending on the product characteristics, additional products are added to the shopping cart if necessary.

Everything in a overview - the checkout

If the user decides to complete the purchase, a slide-in appears on the right- hand side. Here the user is asked to which restaurant the delivery should be made. As a rule, Franke customers are the major players in the system catering industry.

We have designed the checkout page according to the OnePage concept, i.e. all contents are on one page. The highlight of the page is that the sections are hidden in accordions, so the user has the possibility to hide all relevant content. Always fixed at the right margin is the element that creates the conversion, the C2A button.

Responsive like a Mobile App

The mobile concept of the slider has been redesigned by us for different product types. In doing so, we paid attention to the different resolutions, especially for mobile devices. Slider dots, text and call-to-action are located below the picture.

Requirements for the mobile concept:

  • The slideshow was specially optimised for the mobile field of vision
  • Bottom navigation like in a mobile app
  • Optimal usability by means of the user's thumb, as the most important navigation elements are fixed at the bottom
  • Sandwich navigation on top with the complete page structure

Bottom Navigation

In bottom navigation the 4 primary menu items are displayed at the bottom of the screen. Each item is displayed with an icon and a wording. The biggest advantage of this display is that the user can only click through the page by moving his thumb.

The support button is fixed at the lower right edge. Here the user can contact Franke Support and decide between e-mail, phone or chat.

Mobile Checkout Process

If the user scrolls down in his shopping cart, the final total with the number of products and the button for ordering are fixed at the top of the screen. Thus he always has a direct overview of his order and can send it immediately without having to scroll to the end of the page.

For a better overview of the checkout, the respective selection of the address, shipping, payment and direct delivery of the products is shown in an accordion.

Franke reports about us

Franke

"For us, Ventzke Media is no longer just an agency, it is a partner."

Dani Rayford, Business Systems Analyst, Franke Management Inc.

"Franke has selected Ventzke Media to redesign its global e-commerce platform. We are very pleased with the results. The designers and developers took the time to really get to know our business. The team was very open- minded about our requirements and met them with great commitment. A modern and straightforward design was created, a design that is also easy for our customers to use. Accordingly, we have received very positive feedback after the first release of our e-commerce platform. For us, Ventzke Media is no longer just an agency, but a partner. We look forward to strengthening our business relationship with Ventzke Media in the future."