Petrozone V5 Design System

P97 Networks

Returning time to my design team

P97 Networks provides a mobile payments and marketing platform for convenience retail, energy and auto equipment manufacturers.

Role & Team

Sole Product Designer
Design System Owner
Jesus Palacios
- Design Manager

Tools & Platforms

Figma
Android

Deliverables

Component Library
High-fidelity wireframes
High-fidelity Prototypes
Branding Guidelines
Design System Documentation

Duration

6 Months

Objective

During my employment, P97 was a growth stage startup serving many enterprise clients through trailored versions of their Petrozone white-label mobile app.

During this initiative I acted as the sole product designer to establish the Petrozone V5 design system, from low level components to wireframes and prototypes.

Problems

Large and growing list of client design files to manage, with lengthy production times for each.
No single source of truth for designers or developers to reference.

Solution

Build and maintain a design system as a single source of truth for developers and designers, including documentation and training to guide fellow designers, developers and clients.

System Hierarchy

To achieve my desired workflow, I had to discover a system architecture that would serve for both white-label and customized applications.

Material Design

I used Material Design guidelines as a basis to give users a familiar, native app experience.

I also used the Material Design Icons library in their outlined variations for simplicity and consistency.

Keeping in line with my other decisions, I used Roboto with Material based sizings.

Delivery

Component Library

The component library sits at the core of the design system. These building blocks are linked to the system wireframes and to all client design files, creating consistency and clarity across all of the Petrozone white-label apps.

Branding Guidelines

Branding guidelines provided a detailed overview of what level of customization was available for potential and new clients using our standard white-label app.

Prototyping

Included in the production file are prototypes of all the standard white-label flows.

The objective for this prototype is as follows:

Open the Pay at Pump flow.
Enter the pump number.
Select a car wash.
Complete the transaction.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Impact

We Got Our Weeks Back

Reduced production time of new design files by up to 90% for at least ten clients apps, transforming a week long assignment into an afternoon task.

A Single Source of Truth

Improved development handoffs by providing a source of truth with our branded production file.

Design System Dad

Maintained the design system over time, providing system updates and documentation. Mentored and resolved issues for fellow designers.

Closing Thoughts

Building this design system was a long and complex process and maintaining it was a continuous commitment.

It was well worth the effort though, as I was able to help improve the efficiency of my entire team significantly as a result.

Next Up

Delivering fuel to Australia

Product Design

Interaction Design

Visual Design

View Case Study