Open Energy Platform

Time span:
2022-present
Client:
Reiner Lemoine Institut
Description:
Improve usability and design new features of a database platform used for research data in energy system analysis
Tasks:
  • UX/UI Design
  • Front-End Development
Tools:
  • Figma
  • Illustrator
  • Bootstrap
  • React
Open Energy Platform

Context

The Open Energy Platform (OEP) is a web-based platform that provides a database for energy-related data sets, such as energy consumption, production, and storage. The platform is used by researchers, policymakers, and the public to access and contribute to the database. The existing platform had usability issues, making it difficult for users to navigate and contribute data. The goal of the project was to improve the platform's usability, accessibility, and visual design.

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 future user needs.
  • Organizing, systematizing, and enhancing visual design.
Profile view example
Profile page:A profile page was created so that each user can have easy access to important informations, such as associated data tables, peer-reviews and groups.

Design and development process

  • Began with an initial audit of the existing web interface and the identification of potential improvements.
  • Created mockups and prototypes in Figma, in order to enhance key features while considering the entire application.
  • Worked in an interative form, informed by stakeholder and user feedback.
  • Improved visual design and implemented changes as well as new features using Bootstrap and React on the front-end, in collaboration with the back-end and data teams.
  • Improved contextual navigation by creating a breadcrumb system and navigation trees where necessary, in order to easily go through tablestables and data sets.

Workflow

A significant challenge was the shared work and decision-making process among various project partners. While this fosters a deeper understanding, it can complicate the decision process.

  • Structured management process to simplify design and front-end decisions, enhancing the overall workflow
  • Established clear rules for working on GitHub and created comprehensive documentation.
  • Decided to focus only on Bootstrap across the entire project, even if some parts of the app use React, while others not.
  • Developed a consistent design system while improving the platform or creating new features.

Database

The main feature of the platform is the database, but it used to look cluttered and loaded with unnecessary options and information, resulting in user distraction.

  • Updated database to a clear card view, maintaining only the relevant information.
  • Used labels and concise descriptions for each category, and moved all essential options to the top to facilitate database usage.
Topics view
Database overview:The database has been categorized into cards, with the most important category at the top, where contributors can directly add new data sets.
Table from OEP Database
Data set detail:Users can have direct access to the data and metadata as well as different additional options such as exporting data or navigating to its related input and output data sets. The breadcrumb navigation makes it easy to go back up in the database tree.

Scenario Bundles

Scenario Bundles give important information about one or more scenarios, factsheets and studies and their relationships between them. But it previously lacked a clear overview, making it difficult to comprehend their contents.

  • Arranged information in a simple tabbed layout, categorizing the data and placing the most important details at the top, in order to improve reading and usability.
Overview of a scenario bundle
Scenario Bundles:Example of a Scenario Bundle, where the layout and information have been carefully restructured for better reading.

Data Quality

  • Implemented peer-review feature that improves uploaded datasets and metadata quality.
  • Focuses on ease of use for both contributors and peer-reviewers, so that they can effortlessly navigate through the metadata fields, exchange feedback for each element, and understand their current stage in the review process.
  • Displayed the categorized elements on the left, control options on the right, and indicated immediately when a field has received feedback.
Data upload process
Metadata and data upload:Before the peer-review process, the user has to upload or manually insert the metadata and then upload the data.
Flowchart showing how the Oepen Peer Review Process works
Peer-review process:Flow from a contributor and reviewer perspective, leading to a successful, a new or an unsuccessful review.
Open Peer Review Process
Peer-review example:Peer-review interface where the reviewer can easily and rapidly go through each item (accepting, suggesting an alternative or rejecting).

Results

  • Redesigned the platform's information architecture, including a new breadcrumb navigation system, which significantly improved user navigation and ease of access to key data sets.
  • Successfully implemented new features, such as user profile pages and a peer-review system, which made data contribution and quality assurance processes easier.
  • Improved the overall visual consistency of the platform, ensuring that the platform met the needs of diverse user groups, from researchers to the general public.

Reflections

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