Pumpind

Pumpind is a subsidy programme that promotes the replacement of circulating pumps in non-residential buildings with efficient new pumps. Swiss companies can apply for public subsidies via a web application.

Client Engergie Zukunft Schweiz AG

Team size 3

Time on project 6 months

Approved Applications 1.000+

Power Saved 80.000 MWh

A screenshot from the Pumpind homepage displayed in a Macbook. Text on the image presents the marketing claims, main benefits (40% savings in energy costs and up to 25% subsidy) and the call to action to

My Roles

The project core team consisted of three persons. I teamed up with a full-stack developer and was responsible for the design and its technical implementation in the product. A project manager from Energie Zukunft Schweiz (EZS) led efforts on the client side.

UX/UI Designer
Zusammen mit dem Projektleiter von EZS und dem Lead Entwickler habe ich die Anforderungen ermittelt, dokumentiert und priorisiert. Basierend darauf sind eine Projektroadmap, User Flow, Wireframes und Prototyp, schließlich UI- bzw. Webdesign für die Schritte der User Journey entstanden. Ein einfaches Administrationstool hilft EZS-Mitarbeitern, die Förderanträge zu bearbeiten.

UI Developer
In a Ruby on Rails web application I implemented the design responsively for various display devices in a React.JS frontend. The website is statically generated by Rails. Interactive parts, especially the pump exchange input are implemented component-based using React.JS — The fullstack developer built the functional foundations which I completed by adding the UI layer on top using HTML and CSS.

User Flows & Wireframes

Based on stakeholder interviews, requirements were identified and translated into user stories. Early sketches of user flows of core features, wireframes and flow charts helped to convey concepts and established a common understanding of the goals and functionality of the product to be developed.

A hand-drawn and annotated user flow that present how users would go through the process of filing an application for a subsidy.

To create an application for subsidy, entering data about the pumps they want to exchange is the core task for users. The data determines if they are eligble for subsidy and how much it will be. All other steps like creating an account, confirming eligibility condictions or entering contact information are important as well but secondary compared to the actual subject of the application.

So it made sense to start with how users provide data about their pumps. A 3-step wizard that guides users through data entry seemed to be an appropriate solution. Once all pump exchanges are entered the possible subsidy amount will be calculated. Next, users would enter the application flow where thy add contact and bank information to finish the application.

Two pages from my notebook. Left page shows a hand-drawn and annotated version of a refined user flow that present how users would go through the process of filing an application for a subsidy. It also shows small sketches of screen layouts for some process steps. The right page shows a wireframe concept for the homepage and lists required contents and criteria the site needs to meet.

It turned out that seperating the flows for data entry and filling out the application would increase the perceived length of the overall process. Also we found out through early feedback that in many cases there will be replaced many pumps of the same make and type: adding the same pump over and over would annoy users.

To solve this we decided to still use the wizard approach but make pump data entry the first step. Now users can fill out their intended pump replacements to check eligibility and subsidy amount. Once they decide to actually file an application they need to create an account. Afterwards their data is stored and they can continue with the wizard’s next steps.

Prototyping the data entry

At the core of the product is the pump data input, which directly calculates the amount of a possible delivery based on user input. In a workshop we gathered the requirements for the so-called “pump calculator” and defined task flows.

A sketch on a white board shwing different states of the pump calculator. Also a screenshot from Sketch with all Artboards that made up the prototype of the pump calculator.

I created an interactive prototype by building low-fidelity mockups in Sketch and then bringing them to life with InVision. The prototype marked an important milestone in the project. We were able to validate the concept with key stakeholders and implement their feedback directly — before I created detailed design artifacts and before we wrote a single line of code.

As a result the prototype and additional documentation became the basis for the following steps. The lead developer started to code while I focused on defining the visual parts of the design in parallel.

Interface and web design

The visual design is based on the existing design language of Energie Zukunft Schweiz. As this was mainly developed for application in print design, I had some freedom transferring design it to the web.

Screenshot of all visual design related artboards within Sketch.

Design in Sketch, Decide in the Browser

In Sketch I explored ideas and principles for the visual design of the landing page and the actual web application. I created a simple style guide — especially for web typography and important interface elements — which acted as reference during interface development.

I finalized the visual design directly in the code while I implemented it. Thus, in a small team with short feedback cycles, the production time could be reduced and adjustments could be implemented quickly.

The final product

...

The homepage describes Pumpind’s offering, the benefits, the process and who is eligible to receive subsidies.

A mini version of the calculator enables users to check the eligibility of their planned pump replacement with the minimum amount of data. Once they decide to file an application for subsidy, their data will be transferred and stored safely in a personal account.

...

If the entered pump replacements are eligible, they can be directly transferred to an application. Users need to fill out the mandatory form fields to describe their pump setups.

All pump exchanges are listed in an index. In the usual case that several identical or similar exchanges are made, existing entries can be copied and adjusted if necessary.

...

The bigger part of the process is done when users finished entering pump data. The next two steps are about compliance with the eligibility conditions must be confirmed and providing contact and bank information. After the application is submitted, experts from Energie Zukunft Schweiz will check its validity.

...

A compact dashboard gives users an overview of all their applications and the respective processing status. Applications that are not yet valid or completely filled out can be picked up and finished at any time.

What they are saying

The intuitive design of the Pumpind web application, developed by Matti, enables people who want to register a circulator exchange for delivery to reach their destination quickly and comfortably. Thanks to the clearly structured content on the website, customers are informed about the key points of the programme without being overwhelmed by it. The application then makes it easy to apply for funding. The cooperation with Matti was always pleasant. He recognized our needs and not least those of our customers, accepted them with great readiness and translated the requirements into a beautiful, easy-to-use design.

A portrait of Nico Pfäffli Nico Pfäffli Project Manager, Energie Zukunft Schweiz AG