Case Study · 2020-2022

Counters
Contatori.de

Contatori is used by condominium owners as well as property management companies to save time when reading meter readings.

Counters

Year

2020-2022

Services

Concept, Design & Development

Stack

Tailwind CSS, HTML, Vue, Vuetify und Google Cloud

01

Concept

Figma

Project description: Concept phase for Contatori

In the concept phase of our project for Contatori, we have extensively dealt with the challenge of how we can help Contatori's customers save time and money in the annual recording of their meter readings for electricity, water, wastewater, and gas. Our solution: a web platform that allows users to take photos of their meters and store them digitally. In addition, we have developed a website to make the project more easily accessible for Contatori's customers.

Technology and tools: In this phase, we deliberately chose the "Pen and Paper" technology. This allowed us to quickly sketch, revise, and share ideas with the team without being distracted by technical limitations.

User Journeys: A central element of our concept phase was the creation of user journeys. Through these, we were able to ensure that Contatori's business logic meets the needs of the end users. We played through various scenarios of how a typical customer records their meter readings, what challenges might arise, and how our solution can optimize this process.

Competitive analysis: After we established an appropriate user journey, we conducted a competitive analysis. This helped us understand how our solution stands out from others in the market. What is our unique selling point? What makes our platform unique? Through the analysis, we were also able to gather inspiration for the design phase and ensure that our solution is not only functional but also aesthetically pleasing.

Wireframes: Another important step was the rough wireframes. With their help, we were able to identify potential problems in the concept early on and develop solutions for them. The wireframes served as a visual foundation for the structure and layout of the platform and the website.

SEO optimization: In today's digital world, it is essential that our solution is found by the right people. Therefore, we started with SEO optimization already in the concept phase. We considered which terms Contatori's customers would likely use to search for such a solution. Which technology might work best? Which choice of words attracts the right target audience? These considerations helped us lay the foundation for a successful online presence.

Results of the concept phase: At the end of this phase, we had a clear picture of how the platform and the website should look and function. We had a deep understanding of the needs and expectations of the end users and were ready to move on to the next phase of the project.

In summary, the concept phase for the Contatori project was an intense and fruitful time of research, analysis, and creativity. With "pen and paper" as our main tool, we were able to focus on the essentials and create a solid foundation for the successful implementation of the project.

02

Design

Technology and tools

During the design phase, we relied on the technologies Figma and Framer. These tools allowed us to create high-quality prototypes and interactive designs that give users a realistic sense of the final platform.

Exploration and identification of problems

Before we started with the actual design, we extensively dealt with the problems of the users. It was crucial to understand what challenges they had when capturing their annual meter readings. Some of the identified problems could have been an unclear user interface, missing instructions, or difficulties accessing the platform.

Visual solution and Corporate Identity (CI)

An essential aspect of our work was the visual representation of the solution. On the internet, users decide in a fraction of a second whether a website is appealing or unattractive. Therefore, it was of utmost importance to develop a design that is not only aesthetically appealing but also functional. We made sure that the corporate identity (CI) of Contatori remains current and fits the solution. We firmly believe that form should follow function. Our designs are always aimed at making the software as user-friendly as possible.

Design systems and user-friendliness

We strictly adhere to modern design systems like Material Design. These design systems help us make our websites recognizable and easy to use. They also provide a consistent user experience across different platforms and devices.

Mobile design and responsiveness

Since 70% of websites are visited by mobile users, we have prioritized our mobile design and responsiveness from the beginning. Our platform has been developed to function seamlessly on various devices, from smartphones to tablets to desktop computers.

Target audience-oriented design

We have also considered the target audience of Contatori and ensured that the design corresponds to the predefined individuals. This could have been achieved through the creation of user journeys, where we put ourselves in the users' shoes and carefully thought through their interaction with the platform from start to finish.

Completion

In summary, the design phase for the Contatori project was an intense and fulfilling experience. By combining user research, modern design principles, and technological tools, we were able to create a platform that is both beautiful and functional, providing real value to Contatori's customers.

03

Development

vuevuetifygooglecloudfirebase

Used technologies and their application:

TailwindCSS: A highly customizable, low-overhead framework for creating user-friendly and responsive designs. For Contatori, we used TailwindCSS to create a modern and appealing design that enhances the user experience and increases website discoverability.

HTML: The foundation of every website. We used clean and semantic HTML code to ensure that the Contatori website is optimized for search engines and accessible on all devices.

VueJS & Vuetify: VueJS is a progressive JavaScript framework that is excellent for building user-friendly single-page applications. Vuetify, a Material Design framework for Vue, was used to create a consistent and appealing user interface. For Contatori, we combined these technologies to create a fast and responsive platform where users can photograph and save their meters.

Google Cloud: A powerful cloud computing tool that has helped us store user data and images securely and efficiently. By using Google Cloud, we were able to ensure that Contatori's data is always safe and accessible.

Our service approach:

Our guiding principle for this project was to keep things as simple as possible. Through our experience, we have found that unnecessary complexity not only prolongs development timelines but also increases costs. To ensure the success of a project, we place great emphasis on user experience and utilize a reverse-engineering approach to identify the most suitable technology.

Another step in our development strategy was the use of advanced tools like GitHub's Copilot. This has helped us continuously optimize our development process and underscores our commitment to efficiency and innovation.

Results and findings:

During the development phase, we gained some important insights. Firstly, the importance of responsiveness. The ability for users to take and save meter readings from any device was crucial to the success of the project. Secondly, the importance of SEO optimization. By using clean HTML and a well-structured website, we were able to ensure that Contatori is easily found by its customers.

Finally, we can proudly say that the project was delivered on time and within budget. This is further evidence of our commitment to providing first-class services and exceeding our customers' expectations.

Ready for your
next web project

with Desent?

Tell us about your project — we will get back to you within 24 hours with an initial assessment and the next steps.