Context
Overview
PowerFlex, a leader in renewable energy solutions, aimed to enhance its existing platform with a comprehensive design system and a user interface overhaul. The goal was to modernize the UI, ensure it was user-friendly, and create a cohesive experience across all features and components.
My role
In this project, my role was to lead the design efforts, including developing the design system, revamping the platform’s UI, and ensuring a consistent user experience. This involved conducting research, collaborating with stakeholders, and working closely with the development team to implement the changes.
Background
PowerFlex has a vast network with over 980 sites, serving more than 300 customers, and has installed over 10,000 EV charging stations. This extensive infrastructure highlights the company's commitment to providing comprehensive renewable energy solutions.
Target audience
The primary users were customer-facing individuals who needed an intuitive and visually appealing interface to manage their renewable energy solutions effectively.
Research and Insights
Research and Ideation
Conducted a comprehensive visual analysis of the entire platform, including internal and external user pages. Focused on the most frequently used elements and components.
Competitive Analysis
Reviewed design systems and practices from industry leaders, focusing on usability and visual appeal.
Key Insights
Identified the need for a unified color palette, standardized UI components, and improved user interactions. Using Material UI was advantageous for implementation and adherence to best practices.
Design System Development
Design Principles
Focused on creating a visually appealing, user-friendly, and cohesive system.
Components and Patterns
Developed an accessible color scheme from the existing brand and standardized components such as buttons, forms, and navigation elements.
Documentation and Guidelines
Created comprehensive documentation in Notion, providing pixel-perfect specs, descriptions, examples of application, colors, and detailed guidelines to ensure the design system could be consistently applied across the platform.
Redesigning the Platform
Initial Assessment
Identified significant inconsistencies and usability issues in the existing platform.
Redesign Process
Enhancements
Improved color contrast, text size, and navigation. Ensured compatibility with screen readers and other assistive technologies.
Visual Appeal
Modernized the UI by updating the main and side navigation bars, improving visual hierarchy, and creating a cohesive look and feel.
Unified Experience
Applied the design system to all features and components for a consistent user experience.
Final Design and Implementation
Visual Design
The final design featured a cohesive, modern interface with standardized components.
Implementation
Collaborated with developers to implement the new design system. A shared language and documentation was the key to success.
Successfully applied the design system across the platform, ensuring all elements adhered to the new standards.
General Conclusions
The PowerFlex redesign successfully transformed the platform into a modern, user-friendly interface with a comprehensive design system. The new design system provided a cohesive and visually appealing experience, improving navigation and usability. Documentation in Notion ensured consistent application across the platform with specs, descriptions, examples, and guidelines. Positive client feedback highlighted the improved navigation, consistency, and enhanced accessibility. Moving forward, we plan to monitor user feedback and make improvements, focusing on micro interactions.
See something you like? Lets chat :)
soyandresgar@gmail.com
Remote from Colombia
