Redesigning Data Viz to Assist Energy Developers in Data Utilization
Alpha Grid is an EV charging infrastructure development startup that assists energy developers in making energy infrastructure choices.
As a lead designer, I was spot on to help leadership with making sure the platform was standardized and easy to help with infrastructure decisions.
My Role
Information Architecture
Style Guide Creation
UX/UI Design
Date
July - August 2022
(6 weeks)
Collaborated with
Luke Ackerknecht - Product Leadership
Tools
Figma
What is Alpha Grid?
Alpha Grid is a B2B startup that assists energy company developers with making better EV infrastructure by organizing complex data points and optimizing their infrastructure.
Alpha Grid provides a database that helps clients find the best investment options for EV charging infrastructure in their clients’ needs. Alpha Grid has an energy power company as a client: BP’s developers.
Who is the target audience?
Direct Audience: Developers
It normally took a week to a month to create a quote for their customers because of the complex data points to assess the power capability and estimation of all the costs and outcomes.
Indirect Audience: Clients
Because of the timeframes, their clients need to wait for longer time till getting robust quotes from the developers.
What is the problem?
Customers have lost their interest waiting for updates while developers spend a significant amount of time creating and organizing extensive amounts of data for potential customers.
Mission
Providing a database that the developers can easily interact with by inputting, modifying and manage info, and ultimately to create a precise quote faster and easier to their customers.
Contraints
Timeline
Very short time (6 weeks) to modify the UI for presentation to the client developers.
Redesigning
There were no design standards previously so we had to define the structure.
Introduction
Original
V2 High Fidelity Mockup
Challenge
How to simplify the hierarchy and interaction patterns
Observation
When I saw the original design, I noticed needs of informational architecture and style consistency due to the use of patterned templates
It appeared organized, but the intention behind listing the information was unclear due to the repetition of overuse of headers, bars, charts and graphs. So we needed to clarify what developers use and their expectations to understand where modifications were needed.
Assumption
Validation
From the client developers, we got feedback such as
Overview needs to be clear and concise
Charts need to be added
Different matrices are needed to display data clearly
Visual Design Challenge 1
Color Inconsistency
Visual Design Challenge 2
Space Inconsistency
Visual Design Challenge 3
Font Inconsistency
Information Architecture
Organizing the relationships of each tab and page to clarify the relationships
Creating a site map was crucial for the team, as we didn't have one initially. This process allowed me to gain a better understanding of the hierarchy of tabs and connections between pages, which, in turn, deepened my comprehension of each page's intended functionality. I also shared this site map with the product leader to ensure that we were aligned in our understanding.
V1
What I first focused on was closely studying other data visualization UIs. I examined over 200 UIs through sources like mobbin, dribbble, and actual corporate sites, selecting the best visuals for Alpha Grid by identifying key features. After this, I proceeded to sketch out the interface.
Redesigning
Layout
I chose a top navigation style to optimize the use of available space for displaying data. With 4 different sections - dashboard, projects, map, and comments - only the “projects“ tab required a sub-menu.
This choice resulted in faster navigation times and was the preferred structure. Although top navigation typically limits the number of tabs, it wasn’t an issue in our case as all the required tabs fit perfectly within the horizontal space.
Color
A darker background was used to distinguish each section, especially when pages introduced hoverable sections. Alpha Grid’s data comprises various sections, I introduced a lighter background to present the data seamlessly on one page.
Design Updates
Overview
・Added keywords section for a quick view
・Narrowed the width for improved readability
Details & Insights
・Moved and reduced texts
・Added icons for quick scanning
Savings
・Separated two different chargings clearly
・Highlighted the saving results focusing on the saving rate
Cost
After modifying the information with the actual data, I noticed the very thin layers representing the 4 different costs. In the original pie chart, these 4 costs were challenging to distinguish due to their thinness. To address this, I switched to a donut chart to reduce the thin layers in the middle and improve the clarity of all 5 different items.
・Added charts to show a ratio of costs
・Combined with the color for quick scanning
Achievements
- Highlighting Overview
- Emphasising Cost Savings
- Using fewer texts (w/o color modification)
Feedback
- Require a smaller top view for improved scrolling
- Reassess the content to further reduce the amount of text
V2
Getting feedback from the client developers, I worked on color modification as well as UI modification based on the updated datasets.
Color Modification
Adjusting color palette to better represent the brand color and creating supporting colors for variations of data visualizations.
Achievements
- Presentation went well with the new UI by the CEO
Reflections
If I had more time
-Enhancing Project Efficiency through Cross-Disciplinary Collaboration
Due to the very short time frame for the project, I was unable to discuss constraints with the engineers. While I was creating the information architecture, I had numerous questions, such as how many systems we had and what constraints would affect the design's implementation into the system. I believe that gaining an understanding of the engineering side initially would undoubtedly benefit all of us by reducing the total project time. I would appreciate the opportunity to explore this further if I had more time.
-Expanding Pages and Enhancing Understanding for Improved Functionality
I’d also concentrate on developing a robust system, incorporating additional pages like the input information page and analysis page. This way, everyone can gain a comprehensive understanding of how the system functions and where our priorities lie. Engaging in conceptual mapping and creating lo-fi wireframes would encourage more discussions among us.
Other Projects
OwnAir: A Localized Clean Air Activist Platform
