VoltVision: Design system

Tags
Design system
Timeline

March 2023 - Ongoing

image
icon
Starting point: before the implementation of Voltvision, Driivz relied on one developer to manage both development and design across several platforms, especially in the OP system. This resulted in several challenges mentioned ahead.

Problems

icon

Inconsistency & lack of professional design: many users reported inconsistencies in the UI, especially in the OP system. Due to the lack of a proper design foundation, different elements were styled differently across the system, leading to confusion and frustration. A user in fleet management mentioned: “It feels like every screen belongs to a different product. Nothing seems to fit together, and I often find myself lost when managing the charging points.”

icon

Complex user flow: users found the process of setting up and managing EV charging points cumbersome. The system required too many clicks to perform simple tasks. One operator said: “The design makes it difficult to manage multiple charging points. I always have to search for the right information across different tabs.”

icon

Poor aesthetic quality: the overall visual quality received negative feedback from drivers and operators alike. Many users described the interface as “outdated” and “not user-friendly.” In the OP system, one user commented: “It looks like something built in the early 2000s. Buttons are hard to find, and I don’t feel confident using the system.”

icon

Developer bottleneck: having a developer manage both design and development created a bottleneck, delaying the release of new features. As a result, the system struggled to meet user needs, and many updates focused solely on functionality with little regard for improving user experience. This led to slow iteration cycles, where design feedback took longer to implement.

icon

Lack of scalability: without a design system, scaling the platform as the user base grew became increasingly difficult. Each new feature or screen required custom design work, leading to inconsistencies and errors across products. Operators managing multiple stations found it particularly frustrating when trying to oversee different charging points across regions due to the unorganized design structure.

The design

Atomic approach: design system's building blocks
Atomic approach: design system's building blocks
Design system components
Design system components
White label login page
White label login page

Client’s feedback

Lead Product Manager wrote:

"I presented the new OP to our customers, including Applegreen and Afcon... Their feedback was exciting! They loved it! They loved seeing the new design... They didn't have any negative feedback, they didn't have any comment on 'this can be different', it was all 100% on point."