PetroZone Design System V5 – Brian Lee

The existing web portal design was gradually becoming outdated and was also suffering from regular patchwork that required regular updates to the design library. It was in need of a full update to be able to scale better and a look and feel that users could better relate to.

Out-of-Date

The look and feel needed to be acceptable to both older and younger users.

Inconsistent

Elements and components are inconsistent in look and behavior throughout UI.

Data-heavy

PetroZone is data-heavy, often represented by tables or just numbers – difficult to process.

Scaling Issue

Lack of future proofing of elements and components led to constant patching.

PetroZone V4

PetroZone V4 Landing Screen

PetroZone V4 Reporting

PetroZone V4 Offers

PetroZone V4 Offers Details Editor

PetroZone V4 Offers Appearance Editor

Hand-drawn Wireframe of Active Search Function

Tasks

As the Senior Product Designer, I helped initiate the task to create a new design system that would be more visually modern and scale for new changes.

Actions

Collaboration

Worked with stakeholders to create a wishlist of new functions

Competitive Analysis

Researched and studied other web portals seeking best practices in patterns and trends.

Inventory

Took inventory of existing elements and components

Material Design

Used Material Library as a base guideline for creating a new library to speed up the design process by 25%. Modified elements and components to fit the new brand