back

Flexible Exports

Product

SaaS for ESG reporting and management. B2B. Climate tech & Real Estate.

Scope of responsibilities

UX/UI Design, User Testing, Client Feedback & Product Ideation (/w Product owner)

Context

The initial concept was to have pre-defined reports and allow organisations to create their own reports and share it with other users on the platform. During interaction with users we noticed that they often ask for an extra cover page or extra feature to be added to existing report. We saw the need for custom reports as clients used these reports not only to give it to a different organisation but also to add it to the presentation or use it for marketing purposes. We decided to rethink the initial concept and allow clients to chose what they want to export. The idea of custom report templates originated. Later it was extended with other types of exports - diagrams and tables with KPIs.

Solution

Add custom export templates

Exports Page

The design was built on the concept of offering a few pre-defined exports and user's own templates. We assumed the number of exports would be low (under 10), so I decided to give templates a colour for easier distinguishing. This hypothesis was proved accurate in practice.  A year switch is located next to the page headline, as exports depend on data specific to each year. Templates, however, are universal and remain consistent across years and buildings. When a template is added, it is automatically applied to all buildings and years. This was done for convenience, as the export template typically needs to be reused across all buildings.

Shortcuts

My favourite part of design is simplifying features and making them very accessible. I added numerous shortcuts on the page that provide an overview, status of exports, and quick access to functions without needing to enter each individual export. Additionally, to enhance template recognition, I added color-coding.

Bulk Actions

As the number of templates users usually have is not that big it was technically feasible to add bulk actions here. Users have the capability to issue and reissue all corresponding reports at once. This feature proves particularly helpful when data in one of the widgets needed correction. Users can then conveniently reissue these reports in bulk, saving them the time and effort of doing it manually one by one.
The same convenience extends to issuing documents. If multiple reports have complete data, they can be bulk issued. This feature is especially valuable when creating several new templates when the data is already on the platform or when the missing data was added and all templates now are ready to be issued.

Template Tiles

All tiles include year from which data comes from, building name and internal template name.
To enhance simplicity, I included quick actions on the top right of the tiles so that users can perform key actions directly from the exports view without entering the process view. The bottom section gives information about the status of progress and data in the report.
New
new or in progress template with existing required data

Quick actions bar:

Contains only a context menu with options to edit and delete

Progress bar:

Starts at 0% but often already includes some progress, as some of the required data is typically provided during onboarding
Complete
complete or with minimum required data being entered

Quick actions bar:

The 'Issue' button appears alongside the context menu

Progress bar:

The percentage might not reach 100% if some non-mandatory widgets are incomplete. A yellow dot appears if some data is estimated
Issued
with complete or incomplete data

Quick actions bar:

Quick actions for download and preview are displayed. When clicked, the user is asked to select a language if the export contains multiple languages

Progress bar:

Progress is replaced with the issue date. A yellow dot is displayed if the export contains estimations
Changed after issuing
data or export structure was changed

Quick actions bar:

The 'Reissue' button appears. Quick actions remain the same and display the currently issued report

Progress bar:

The issue date of the existing export is displayed. A yellow dot appears if the export contains estimations, and a red dot indicates that changes to data or export structure were made after issuing, requiring an update

Creating a template

In every template type users can specify a an internal name for the template and select a language. The main language is pre-defined based on account settings. For each added language, a report name is required, which will be displayed on the cover page and in the header of other pages.

Specifying languages and names

In every template type users can specify a an internal name for the template and select a language. The main language is pre-defined based on account settings. For each added language, a report name is required, which will be displayed on the cover page and in the header of other pages.

Report template

The last step involves feature selection. Users can select features through drag-and-drop or by clicking on them. They can also be moved all at one using the arrow button in between sections. Features can be rearranged, except for the cover page, which always remains at the beginning, and appendixes, which can be rearranged among themselves but always stay at the end of the report. When hovering over a feature, a preview of the example page is displayed to the left. Users can also view a preview of the whole report by clicking on the icon next to selected features headline.

Diagram template

Diagram Template originated from the request of having only the diagram from the initial assessment without the rest of the page. As we saw the need of some clients to have different KPIs in that diagram, I pitched the idea to make it customisable and we went for it.
Diagram Template modal has the same structure as Report template but instead of a list of features it has a list of KPIs, from 1 to 10 of which can be selected. It also contains a reference selection. If more than one reference is selected then software adds an extra diagram for the additional set of references. As a start we offered only one diagram but this concept can be easily extended with other types on diagrams.

Table template

Table Export was added as a result of clients requesting a simple pick and print export. The visualisation is a simple table with the name of the KPI, it's value, reference and deviation from reference.
The structure of the modal is the same as the Diagram one. The only difference is that the unlimited number of KPIs can be printed.

Providing data for an Export

After export template is created, it jumps straight to the report process view, where the necessary widgets are displayed. Each feature has a minimum required number of widgets that must be completed. The report can be generated with incomplete data if these minimum requirements are met; however, it will lack some sections or data.

Impact

Flexibility

Companies don’t need to create their own templates; instead, they can simply communicate to clients the information they require. Clients can then assemble the reports themselves, empowering them to generate reports quickly without needing to request specific formats from us. Additionally, users can easily customize and adjust these reports to fit their needs. While companies can still add and share their templates,they are no longer required to do so.

Data and Analytics

We can track which features users export the most to provide recommendations. This helps us identify the key features they are interested in, understand market needs, and determine where we should focus our efforts.

Independent Feature Release

New features can now be easily added to the reports feature selector, after the creation of the page template. This removes the dependency between a feature and a report.

Saved time

We have received way fewer client requests for adding/removing features and pages, which has created spare time and reduced manual work.

Feature thinking instead of report thinking

Now, we can focus more on the development of other features rather than thinking solely from the perspective of pre-defined reports. We no longer prioritize reports; instead, we focus on providing a greater variety of options and features.

The process

1st iteration

Creating the base

Creating the modal was a relatively fast process. I followed best practices for feature selection, considering arranging the order of the features. I also collaborated with the development team to explore suitable libraries and elements. I designed two versions: the first with drag-and-drop functionality (the user friendly one) and the second with up and down arrows, which would be more development-friendly in case finding a suitable component posed challenges. Luckily, our devs were able to find a suitable drag--and-drop component.In addition to feature selection, I used simple input fields and incorporated the hover preview functionality from the Area Widget (see case study).

My primary vision for this product is to simplify the user experience by making everything accessible. I aimed to minimise the need for users to search for information and reduce the number of clicks wherever possible. This is why I decided to include shortcut buttons on the tile itself for the main actions, enabling users to perform tasks without entering the reporting process.

Another key decision was my desire to create a template that is automatically shared among all buildings. The management welcomed this idea because companies typically require reporting in a specific structure, and this structure often applies to multiple buildings. By implementing a shared template, the manual process of adding it to each building is eliminated.

2nd iteration

Adding languages

When the custom template feature was released and confirmed as functional through user testing, a new request arose: the ability to export reports in different languages. Currently, the platform supports two languages, English and German, with plans for future extensions.

I created several prototypes for implementing this feature, both within a modal and within the report creation process. The deciding factor in favour of the modal option was the necessity for having different report names in various languages. Subsequently, when downloading or previewing a report, users can select the language in which they wish the report to be.

3rd iteration

Adding bulk actions

As I observed the state of data in our software, I often noticed that many template tiles had red dots, indicating that data was frequently changed. This observation led me to conceive the idea of creating a bulk action to reduce the manual effort required for issuing and reissuing reports.

When a client made changes to data within one of the widgets, we displayed it in the platform to inform the user that the data had been modified, requiring them to manually reissue the document to ensure they received an updated version. However, often times many exports shared the same widget, for example, 10 exports. Having to manually reissue all 10 templates when the data was fixed is not efficient. To address such situations, I consulted with the backend team whether it's feasible to add bulk actions. As the number of reports is usually around 3-8, there was not a problem to implement it.  We implemented a bulk reissue feature that allows users to reissue all documents at once.

The 'Issue All' option serves a similar purpose. It's used when data was previously inputted, and several new templates were added. This feature enables clients to issue all reports simultaneously instead of doing it one by one. It also speeds up the process, especially considering that templates are shared among different buildings.

4th iteration

Adding different export types

Initially, we only expected exporting reports, as the platform was designed for ESG reporting—where experts define requirements, we provide templates, and users input their data. However, as clients began using the platform, they became more knowledgeable and developed their own requirements, pushing us to adapt and become more flexible. And, honestly, we loved it! We were thrilled by this shift, as it allowed us to empower users to create custom reports and provided us valuable insights into market needs.

Our first custom request was for a standalone diagram. Initially built as a static template for a specific client, this feature evolved into flexible diagrams for all users. Later, we received a request for KPI pick and print request, a page with plain labels and numbers, aimed at our most advanced users. This marked an exciting progression, signalling an interest in deeper calculations and analytics, which our team of experts was well-prepared to support.

the project that inspired me to become a Product Designer

Designing a non-visual experience