3/7
Pitstop
UX/UI Design & Webdesign
P.

A digital ERP system for a workshop chain

With more than 300 shops, about 1,200 employees and roughly one million customers per year Pitstop is one of the biggest workshop chains in Germany.

So it's about time to lead the company into the digital future with a ERP system that deserves its name. No more paperwork or managing multiple software tools to get the job done but only one system that does it all: customer management, administration of inventory, quotations, orders, invoices, cash system… How could they even work without this?

In a six month process we took the project from a great idea with a narrow time scale to a product that was ready for daily work in the shops.

Branding the software

Even though an ERP system will hardly be seen by customers, it is part of the Pitstop world and therefore we based the color palette on the corporate colors of the brand.

One of the main tasks was to find a proper design system that would work throughout the whole system starting with typography.

Pitstop Blue
#3769BE
Pitstop Red
#D00900
Grey
#79818E

Component library

Based on Google Material Design we created a component library from icon buttons to compound objects. For some use cases we had to come up with custom controls.

Text Button - active
Text Button - inactive
Text Button - hover
Text Button - pressed
Small Contained Button - Active
Small Contained Button - inactive
Small Contained Button - hover
Small Contained Button - pressed
Positive StateMedium StateNegative State
Delivery State - not available
Pitstop - Login
Dropdown CalendarDropdownCalendar - Error
Error Message

From user story to screen design

Some features had a bit of complexity to them so we had to start visualizing the process and dependencies before heading to the visual design part.

These user flows did not only help to clarify things during the design process but later on they also made things easier for developers when they tried to figure out what was visualized in the screens and how certain components should work.

Modular screen design

When we created the screens for the user stories, we tried to reuse as much components as possible. Where it was necessary we built new components out of existing elements. We tried to stay with an atomic design approach as strictly as possible.

Pitstop ERP - UXUI for the dashboardPitstop ERP - UXUI for deposit bookingPitstop ERP - UXUI for the offer statementPitstop ERP - UXUI for the order processPitstop ERP - UXUI fullscreen catalogue tiresPitstop ERP - UXUI for the order the cardPitstop ERP - UXUI fullscreen catalogue rims

Reusing the design system

In addition to the ERP system of Pitstop we created a redesign concept for the website of the company trying to reuse the design system we created for the app for the most part.

Pitstop Webdesign ConceptPitstop Webdesign Concept Mobile