Open Energy Platform

Time span:
2022-2024
Description:
Database platform used for research data in energy system analysis
Tasks:
  • UI Design
  • Front-End Development
Tools:
  • Figma
  • Illustrator
  • Bootstrap
  • React
Profile view example

Objectives

  • Rethinking the exisiting information architecture to enhance the existing platform
  • Improving usability and accessibility for a better user experience
  • Contributing to the creation of new features, such as profile pages and communication features, to meet all user needs for the platform
  • Organizing, systematizing, and enhancing visual design

Iteration

The iterative process, informed by stakeholder and user feedback, began with an initial audit of the existing web interface and the identification of potential improvements. The goal was, and remains, to enhance key features while considering the entire application. After developing prototypes in Figma, they are implemented using Bootstrap and React on the front-end, in collaboration with the back-end and data teams.

Challenges & Solutions

A significant challenge is the shared work and decision-making process among various project partners. While this fosters a deeper understanding, it can complicate the decision process. However, management improvements have simplified design and front-end decisions, enhancing the overall workflow. For example, stricter rules for working on GitHub have been established and comprehensive documentation has been created. And on the design side, Bootstrap is now being used across the entire project. Even if it meant extra work at the beginning, because a consistent design system had to be implemented equally on all the different parts of the app, it is now helping to maintain a uniform visual system. This is the case even though some parts of the platform use React while others do not.

Another challenge is the lack of similar web interfaces with the same content and goals, making competitive analysis more difficult. Additionally, there is sometimes insufficient user feedback and data for data-driven decisions. But continuous improvements and iterations have been beneficial, preventing a focus on potentially irrelevant details and instead, allowing for feature enhancement based on new feedback.

Data upload process

Navigation Design

Navigation was not consistent and going through tables and data sets can be challenging. To tackle this issue, a breadcrumbs navigation system has been implemented to simplify the process, as well as the possibility to go deeper into the navigation tree directly from the tables and cards.

Table from OEP Database

Database

The initial database overview was a cluttered table loaded with unnecessary options and information, resulting in user distraction. To rectify this, it was updated to a clear card view, maintaining only the relevant information. Labels and concise descriptions were used for each category, and all essential options were moved to the top to facilitate database usage.

Table from OEP Database

Scenario Bundles

Scenario Bundles give important information about one or more scenarios. This feature previously lacked a clear overview, making it difficult to comprehend their contents. In response to this, the information was arranged in a simple tabbed layout, categorizing the data and placing the most important details at the top. This approach enables a quick overview of the factsheets, along with the associated studies and information.

Overview of a factsheet example

Data Quality

When using a platform to upload data, it is crucial to have access to high-quality datasets and their metadata. To fulfill this need, a new feature that focuses on ease of use for both contributors and peer-reviewers was implemented. Both can now effortlessly navigate through the metadata fields, exchange feedback for each element, and understand their current stage in the review process. This goal was achieved by displaying the categorized elements on the left, control options on the right, and indicating immediately when a field has received feedback.

Flowchart showing how the Oepen Peer Review Process works
Open Peer Review Process

Results

We made significant improvements in information architecture, making navigation easier. New features were successfully implemented, and the content was upgraded with high-quality information. Interaction design was improved, enhancing usability, and the visual aspect became consistent throughout the app.

Reflections

Working on a data-heavy interface is challenging due to its inherent complexity. However, constant iteration through feedback made it rewarding, with users reporting improvements. This project allowed me to explore new methods of data display and has increased my interest in handling similar projects in the future.