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.
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.
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.
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.
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.
The final product
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.