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 dieser Phase haben wir uns bewusst für die Technologie "Pen and Paper" entschieden. Dies ermöglichte uns, Ideen schnell zu skizzieren, zu überarbeiten und mit dem Team zu teilen, ohne uns von technischen Einschränkungen ablenken zu lassen.

User Journeys: Ein zentrales Element unserer Konzeptphase war das Erstellen von User Journeys. Durch diese konnten wir sicherstellen, dass die Geschäftslogik von Contatori den Bedürfnissen der Endnutzer entspricht. Wir haben verschiedene Szenarien durchgespielt, wie ein typischer Kunde seine Zählerstände erfasst, welche Herausforderungen dabei auftreten könnten und wie unsere Lösung diesen Prozess optimieren kann.

Competitive analysis: Nachdem wir eine geeignete User Journey festgelegt hatten, führten wir eine Wettbewerbsanalyse durch. Dies half uns zu verstehen, wie sich unsere Lösung von anderen auf dem Markt abhebt. Welches ist unser Alleinstellungsmerkmal? Was macht unsere Plattform einzigartig? Durch die Analyse konnten wir auch Inspirationen für die Designphase sammeln und sicherstellen, dass unsere Lösung nicht nur funktional, sondern auch ästhetisch ansprechend ist.

Wireframes: Ein weiterer wichtiger Schritt waren die groben Wireframes. Mit ihrer Hilfe konnten wir mögliche Probleme im Konzept frühzeitig identifizieren und Lösungen dafür entwickeln. Die Wireframes dienten als visuelle Grundlage für die Struktur und das Layout der Plattform und der Website.

SEO optimization: In der heutigen digitalen Welt ist es unerlässlich, dass unsere Lösung von den richtigen Personen gefunden wird. Daher haben wir bereits in der Konzeptphase mit der SEO-Optimierung begonnen. Wir haben überlegt, welche Begriffe die Kunden von Contatori wahrscheinlich verwenden würden, um nach einer solchen Lösung zu suchen. Welche Technologie könnte am besten funktionieren? Welche Wortwahl zieht die richtige Zielgruppe an? Diese Überlegungen halfen uns, den Grundstein für eine erfolgreiche Online-Präsenz zu legen.

Results of the concept phase: Am Ende dieser Phase hatten wir ein klares Bild davon, wie die Plattform und die Website aussehen und funktionieren sollten. Wir hatten ein tiefes Verständnis für die Bedürfnisse und Erwartungen der Endnutzer und waren bereit, in die nächste Phase des Projekts überzugehen.

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.

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.

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: Die Grundlage jeder Website. Wir haben sauberen und semantischen HTML-Code verwendet, um sicherzustellen, dass die Website von Contatori für Suchmaschinen optimiert und für alle Geräte zugänglich ist.

VueJS & Vuetify: VueJS ist ein progressives JavaScript-Framework, das sich hervorragend für den Aufbau benutzerfreundlicher Single-Page-Anwendungen eignet. Vuetify, ein Material Design Framework für Vue, wurde verwendet, um ein konsistentes und ansprechendes Benutzerinterface zu erstellen. Für Contatori haben wir diese Technologien kombiniert, um eine schnelle und reaktionsschnelle Plattform zu schaffen, auf der Benutzer ihre Zähler fotografieren und speichern können.

Google Cloud: Ein leistungsstarkes Cloud-Computing-Tool, das uns geholfen hat, die Daten und Bilder der Benutzer sicher und effizient zu speichern. Durch die Nutzung von Google Cloud konnten wir sicherstellen, dass die Daten von Contatori jederzeit sicher und zugänglich sind.

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.