Overview
PowerHub is a solution for renewable energy asset managers that automates business process and empowers teams to focus on increasing financial performance and minimizing risk.
The Challenge
One of the biggest challenges was finding the right balance between flexibility and standardization. It was essential for the platform to adapt to different user needs while avoiding an overly complicated interface. Managing the tab-based navigation system was challenging, as it was important to prevent the excessive use of this component. Another critical consideration during the design process was ensuring that the platform offered comprehensive functionality while maintaining clarity.
Additionally, the layering of content through dialogs and modals posed a significant challenge. Since the platform utilizes multiple overlays to display information, it was crucial to control the number of layers in order to avoid cluttering the interface and confusing users. This consideration was key to achieving a successful overall design.
Process
Research and discovery
Wireframing and prototyping
Create style guide and design system.
Customizing React components
Creating new UI components
User testing and feedback
Provide multiple iterations
Detailed design specs
Wireframing and prototyping
Create style guide and design system.
Customizing React components
Creating new UI components
User testing and feedback
Provide multiple iterations
Detailed design specs
Developer handoff
Regular collaboration with developers
Regular collaboration with developers
The Solution
I limited the structure to two levels for the tab-based navigation: primary tabs and sub-tabs. This design choice helps maintain intuitiveness and scalability. We follow best practices by prioritizing and positioning the most critical features at the top of the hierarchy. Additionally, we use consistent features and styles to distinguish between the primary tabs and the sub-tabs.
Regarding content layering with dialogs and modals, I established a rule that at most three layers of overlays should exist; this ensures clarity and prevents the interface from feeling cluttered. This approach allows the platform to manage complex data effectively while remaining user-friendly, ensuring that critical information and actions are always accessible.
Regarding content layering with dialogs and modals, I established a rule that at most three layers of overlays should exist; this ensures clarity and prevents the interface from feeling cluttered. This approach allows the platform to manage complex data effectively while remaining user-friendly, ensuring that critical information and actions are always accessible.
My Role
As the UI/UX Designer, I collaborated closely with the project lead, product team and developers.
Miro
Figma
Adobe XD
Figma
Adobe XD
Research
During the redesign of PowerHub, I reviewed numerous files from previous versions of the application to understand the platform's evolution. Analyzing the platform was crucial, as it revealed valuable insights into user needs and challenges. This understanding guided the direction of the design improvements, making our work directly impactful on the user experience.
Our research was not limited to internal sources. I also carefully examined the communication team's notes from client interactions, which helped inform workflow enhancements and user experience optimizations. This collaborative approach ensured that we addressed key client concerns in the new design, making them an integral part of the process.
Working as a Team
I found that collaborating with project managers, UX designers, and developers was essential throughout the design process of the PowerHub platform; our regular meetings fostered a dynamic exchange of ideas, ensured alignment on our goals, and integrated diverse perspectives, all of which contributed to creating a cohesive and user-friendly solution.
Ideation & User Stories
Understanding what users aim to achieve with the PowerHub platform was crucial. We developed user stories that provided the team with a clear vision of our design goals and what we needed to accomplish to meet user expectations effectively.
Powerhub Personas
The UX personas are thoughtfully designed to capture the range of user roles within renewable energy asset management. These include asset managers, operations and maintenance engineers, and energy financial analysts. Each persona embodies distinct goals, challenges, and requirements, illustrating how various users use the platform to streamline their workflows and contribute to project success. By understanding these unique perspectives, the platform can better support users in optimizing their tasks and achieving their professional objectives.
Wireframes
We began working on the wireframes. We had extensive discussions about enhancing navigation to help users move seamlessly between different modules. My goal was to create a clean and minimalistic layout that would allow us to add layers of elements and components later, as the application would be content-heavy with tables and forms. Keeping the foundational design simple and uncluttered was crucial to ensure usability and clarity.
Style Guide & Design System
The brand identity for Powerhub focuses on a cohesive visual representation of its core values, with guidelines for logo placement and sizing to maintain integrity, a color palette that includes primary and secondary colors for backgrounds, buttons, and typography, and typography featuring Open Sans Medium for headers, Open Sans Regular at 14px for body text, and Open Sans Regular at 12px for captions to ensure readability. PowerHub uses Material React icons for enhanced aesthetics and functionality, while UI components consist of primary buttons in filled green, secondary flat buttons, and grey disabled buttons, all featuring clear hover states and appropriate sizing for user interaction.
High Fidelity Screens
I customized the React component library using our style guide, consistently applying the designated styles and colours across all screens. To further enhance the user experience, I created custom components tailored to meet specific user needs. These new components adhered to both PowerHub's design standards and React's guidelines, ensuring they seamlessly fit into the platform while maintaining a cohesive UI.
Dev Handoff
During the developer handoff, I ensured that we provided detailed notes to help them fully understand our design and included specifications for a clear overview of all measurements and padding. This approach allows anyone reviewing our high-fidelity screens to visualize how one screen transitions to the next, even without a prototype. I also took care to clearly explain any calls to action or special features that would appear on each screen, giving the developers a better understanding of how to build upon our design effectively.
As a UI/UX designer, I present my work in a way that ensures clarity and smooth collaboration between teams. I create detailed and structured layouts, as seen in this example, where I break down the entire user flow into individual screens. Each screen is displayed in sequence, showing the progression of actions users will take in the system.
I focus on keeping the presentation visually organized, with clear labels, annotations, and relevant guidelines for developers to follow. By mapping out each step and including important interaction points, I make sure the design logic is easy to understand. Additionally, I provide specific notes for developers on how each element should behave, including any necessary color codes, buttons, and form behavior, which helps streamline the handoff process and ensures consistency across the final product.
This approach allows me to communicate both the design intent and the functionality behind each decision effectively, facilitating a smooth transition from concept to implementation.
Reflection
I learned the importance of frequent communication with my team throughout this complex and lengthy project, especially as we continually added new services. Despite the challenges, the team consistently met deadlines. I took advantage of any extra time to refine our style guide, which allowed for more explorations of style and accessibility, ultimately enhancing our final UI. The team's collaborative spirit was evident, and I made it a point to keep both the team and front-end developers updated on any changes I implemented or new insights that could benefit our design. Overall, this experience inspired me to share my ideas more openly and foster collaboration among team members.
PowerHub's user demo video showcases the application's UI and key functionalities. Thanks to the marketing and sales team for their work in producing this valuable resource!