With solar energy being a more sustainable replacement for our energy sources, companies have been turning to Enel X as a solution. Enel X offers Optima, an application that allows our users to manage their (battery) electricity supply and demand for their electric system.
The goal of the recent redesign initiative focused on facets of accessibility, usability, and overall user experience. Central to this project was an effort to discern and address existing pain points that users encountered in their interactions with the application. By understanding user interactions, the intent was to conceive and implement enhancements that would invariably elevate and enrich their experience.
4 Months (Mar - Jun 2023)
UX Designer
UX Tester & Facilitator
Grid Services is the largest feature in Enel X's Optima application. It is a feature that allows the solution engineers to select a type of "program" for their battery to run on. These programs include keeping the balance between electricity supply and demand, maintaining proper voltage levels, and variations of how to utilize energy storage. Each program differs between what months it would operate the battery and what geographical location it can function in.
The application always received feedback that:
It was difficult to know if a grid service program was selected or not
The list of programs was an information overload
Application was not easy to navigate or learn
Our goal was to increase the usability of Grid Services and improve the efficiency for solution engineers when selecting programs. When the engineers have a negative experience with tools, it can impact their communication of Enel X's electric supply offerings to potential clients. Our focus was to refined the tool to provide a more enjoyable user experience and streamline solution engineers' interactions.
Original UI - User Selects their Desired Program
Original UI - List of All the Programs and Information
Original UI - Additional Settings
Our user persona helped represent our solutions engineers and their characteristics. By understanding who we are designing for, it directed our design efforts towards addressing the SEs' real user needs and preferences. Personas enhance communication within the design team and help prioritize features effectively.
This method works well during the ideation phase, where having previous insights helps ideas flow faster.
The workshop's main goal was to brainstorm numerous ideas for the new Grid Services design. Our intention was to gather a range of small ideas that could later be developed into more complete concepts.
We collaborated with a solution engineer to provide valuable input from an end-user perspective, as well as the product manager to gain a comprehensive understanding of the broader business requirements.
Crazy Eights is a great method to help with problem thinking. Because of it's fast-paced and energetic nature, it gets everyone involved to think about the problem from a broader perspective. While some may think that this puts too much pressure while designing; I try to remind everyone that the intention behind constraining the time is to make sure no one has enough time to second-guess their ideas.
It's okay if the ideas aren't "perfect".
Imperfect ideas lead to even greater ideas!
.png)
Crazy Eight - UX Designer POV
Crazy Eight - Product Manager POV
Crazy Eight - Solution Engineer POV
Introduced the main objective of the workshop and our current users' pain points
Participants were instructed to fold an A3 paper into eight sections before setting a 30-second timer
In each section, the facilitator initiated the timer and encouraged participants to begin sketching their ideas
Following the 4-minutes, each participant shared their ideas – some unexpected, some weird, or some that might just work – creating an environment of inclusivity for all work
Participants cast their votes for ideas using dot, heart, and star stickers, while also utilizing sticky notes to indicate areas for idea elaboration.
After our crazy eights ideation session, I illustrated multiple layout concepts for grid services. Given the desktop focus, I streamlined designs for desktop view. Drawing from insights gained, my sketches addressed:
Checkboxes to clearly indicate program selection
Condensing data with a filter button
Implementing a cart-like function for clear program tracking and actions: remove, duplicate, view more information
I categorized these ideas for optimizing grid services' look and function. After presenting the designs to the product manager and lead UX designer, they picked concepts for prototype development.
A Sketch from my Notebook -
depicts a new layout for grid services
A Low-Fi Mockup from Balsamiq -
Cart-like feature
.png)
A Low-Fi Mockup from Balsamiq -
Filter Feature
I transformed everyone's concepts and ideas into a digital format for visualization and organized them into categories. Then, I facilitated the selection of a preferred idea for me to proceed with prototyping.
.png)
.png)
.png)
.png)
.png)
.png)
A user journey allowed us to really get into the shoes of the users and see how they interact with grid services. The purpose was to better understand their needs, the things that bug them, and finding ways to make things better. When you lay out the entire journey, it's like having a map that guides us designers in creating a more user-friendly experience, ironing out the steps, and aligning everyone. This journey not only ensured smooth functionality but also ensured our users remain content – all the while offering us a way to continuously fine-tune and enhance.
Facilitating a user journey is like a collaborative discovery mission. We chart the touch points, pain points, and emotional arcs users face, employing empathy and cognitive walkthroughs. Together, we ideate, prototype, and validate solutions to optimize these interactions. Ultimately, our goal is to craft a seamless narrative that resonates with users, while metrics like task success rate and task completion time validate our UX improvements.
.jpg)
These prototypes included the categories:
Collapsible Filter
Static "Shopping Cart"
Checkboxes and Selected Color Indicator
Prototype in Action
The intention behind creating this prototype was to evaluate our initial design iterations. By incorporating all the categories requested by the product manager, UX lead, and solution engineer, my aim was to assess its performance among our intended users - the solution engineers. Through this process, I sought to gain insights into their preferences and areas of concern.
Give an introduction and obtain user's consent to be recorded and observed
Establish rapport with the users so they feel comfortable to voice their opinions
Briefly explain the testing process, and emphasize the design and not their abilities
Encourage thinking aloud, make sure they verbalize all of their thoughts
Ask follow-up questions: what was difficult? What did you like? What did you dislike? What did you wish was here?
As seen in the data table headers, users want to see the headers as filter options.
Just like the dollar sign ratings on Yelp that indicate the cost of a meal, users want a similar design for our solar batteries. Our goal is to implement value tags that provide users with a clear idea of whether a battery is more affordable or pricier compared to others.
What's the value of the program? What's the range? What type of program is selected. That's what I want to know.
With user convenience in mind, we're planning to incorporate program type tags. This enhancement will allow users to effortlessly identify the specific category that each battery belongs to, providing a seamless and intuitive experience.
Striking the right balance between sharing all the necessary program information and avoiding an information overload posed a major challenge during the finalization of these designs.
Using our insights, I improved the filters to include all the important information from the data table. I also added easy-to-spot tags for program value and type, color-coded for clarity. To make things simpler, I introduced filter tags along with a button to clear them all at once. As part of these changes, when you pick a program, it promptly shows up on the right side, similar to an item in a shopping cart. Additionally, when you click on a program, it's now marked with a checkbox, a purple sidebar, and the background color changes to make it stand out.
.png)
Overall Grid Services Page
A Filter Tag with an Example Program Selected
Two Filters Expanded
Too Many Filters Selected Resulting in No Results Error
Prototype in Action
During the final stages of the delivery process, as I prepared to distribute the designs to the engineering team, my focus was on responsive design. This involved tailoring the designs to suit resolutions of 1920px, 1440px, 1280px, and 768px, thus optimizing the user experience across a range of devices.
To facilitate the team's implementation, we additionally provided a comprehensive design specification that outlined precise ratios and pixel values for the spatial relationships between different elements within the interface.
.png)
768px Wide Wireframe
1280px Wide Wireframe
1920px Wide Wireframe
.png)
768px Design Spec
1280px Design Spec
1920px Design Spec
Throughout this project, there was a continuous cycle of refinement based on user feedback and testing. This iterative design approach was necessary as it allowed for our designs to evolve in line with our solution engineers' needs and expectations.
Collaboration between us UX Designers and the Engineers is so crucial for turning design visions into functional products. By thinking in the mind of our engineers, I try to think of all the possible questions our engineers might ask us. I try to answer all of their potential questions in my design delivery... so they have no questions and can go straight into developing!
.png){kind=spacer}