Open Energy Platform
- UX/UI Design
- Front-End Development
- Figma
- Illustrator
- Bootstrap
- React
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.
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.
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.
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.
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.