Rachuneo.pl is one of the most popular comparison websites for energy, television and internet providers on the Polish market. The website provides access to a customer panel where users can manage all their utility bills from one place.
About Project
As a designer, I had to redesign the customer panel for managing bills. The goals of the project were:
UX redesign – improvement of website navigation and content architecture;
UI redesign – preparation of a scalable design system. Creation of a new visual style in line with the Rachuneo.pl brand book. Redesign of icons and new design of illustrations.
The old version of the system was counter-intuitive and did not meet modern standards. I delivered an intuitive website design which made it easier for the end-user to pay and manage all the utility bills (electricity, gas, water or insurance).
About clients
My cooperation was based on a contract with the Polish creative agency HeroDOT, which provided IT services for Rachuneo.pl. The aim of the cooperation between HeroDOT and Rachuneo.pl was not only to redesign the entire infrastructure of the website (back-end) but also to implement a modern front-end application. As a Product Designer, I was fully responsible for the vision of the user interface.
Design Sytem
My cooperation was based on a contract with the Polish creative agency HeroDOT, which provided IT services for Rachuneo.pl. The aim of the cooperation between HeroDOT and Rachuneo.pl was not only to redesign the entire infrastructure of the website (back-end) but also to implement a modern front-end application. As a Product Designer, I was fully responsible for the vision of the user interface.
Material Design System by Google
I used ready-made market solutions to speed up the design work on the product. I based the design system for the Rachuneo.pl website on a material design by Google.
Angular Material UI
Together with the team of programmers, I used ready-made libraries to make the front-end work efficient and time-saving. We used the framework Angular Material to build the front-end application. External libraries such as Material UI + Angular are simple and easily configurable UI component libraries to create faster, prettier and more accessible applications in Angular.
I quickly designed not only the ❖ Design System but also the entire application using Material Design by Google.
Product Design
Together with the IT team, I used the Notion application for keeping records of the entire project. The Notion app was not only used to prepare the design specification, but also the technical documentation.
Icons
Most of the icons that were used in the design process come from the public Material Design database. Additionally, I used icons from an extremely rich Material Design Icons repository to give the application a unique character.
All icons in the Figma application are embedded as ligatures (WebFont). I copied all the icons to the clipboard and pasted them directly to the design file as Webfont. Thanks to pictogrammers.github.io I saved a lot of time embedding icons in the design project file.
Building an application with icons as Webfont is a huge time saver!
⬇Download Material Design icon packs such as Webfont to design apps faster!
Illustration
I used open-source graphics from Shutterstock in the application. I used illustrations by artists such as:
The client and I purchased the appropriate license for the project. To give the illustrations character and style of the website I matched the colour scheme of the graphics to the Visual Style of Rachuneo.pl.
Using open-source illustrations can dramatically change the nature of your application!
Conclusions
The cooperation of the three parties (I, Rachuneo.pl and HeroDOT) has brought spectacular results in the implementation of modern and scalable infrastructure. As a Product Designer, I was fully responsible for all user interface work. Do you want to check out a detailed technical case study? Check the technical article at HeroDOT.
Finally, I provided the client with an extensive Design System and several mockups of the client panel. The rich library of components not only allowed me to design mock-ups with all the functionalities of the Customer Panel but also helped other designers who started the next stage of the design. Thanks to a specially prepared ❖ Component library in Figma, other designers had an extremely easy task in designing subsequent parts of the website.
Finally, the team of programmers from HeroDOT delivered a completely new product to the market! Do you want to compare the production version with the design project? Log in (or Create an account) on the Rachuneo.pl website!
Project resources
Together with the team of programmers, I used ready-made libraries to make the front-end work efficient and time-saving. We used the framework Angular Material to build the front-end application. External libraries such as Material UI + Angular are simple and easily configurable UI component libraries to create faster, prettier and more accessible applications in Angular.
I quickly designed not only the ❖ Design System but also the entire application using Material Design by Google.
