Project description: Concept phase for weploy.ai

In the concept phase of our project for weploy.ai, we have extensively dealt with the challenge of revolutionizing website translations. Instead of relying on human translators, we wanted to harness the power of artificial intelligence, specifically the capabilities of GPT-4. The goal was clear: to create a solution that enables automatic and efficient translation of website texts.

Technology and approach:

At the beginning, we equipped ourselves with simple tools such as pen and paper as well as the digital tool Miro to visualize and structure our ideas. Our technical solution consisted of developing an open-source npm package that uses the GPT-4 API interface. An algorithm extracts texts from the HTML on the client side, and after the translations have been loaded from our weploy backend, the system replaces the text nodes in the HTML. Our backend was built using Node.js, Redis, and nocodb.

User Journeys:

One central element of our concept phase was the creation of user journeys. It was crucial to understand exactly what the end users expect and need from our solution. By working out these user journeys, we were able to ensure that the customer's business logic meets the needs of the users. This helped us identify and avoid potential stumbling blocks.

Competitive analysis:

To position our solution in the market, we conducted a competitive analysis. This not only gave us an overview of how our solution differs from others, but also provided us with the opportunity to gather inspiration for the design phase. It became clear that our combination of AI-based translation and efficient backend structure gives us a significant advantage over traditional translation services.

Wireframes:

Another step in our concept phase was creating rough wireframes. These helped us visualize the user interface and user experience and identify potential issues in the concept early on. It also allowed us to receive feedback from stakeholders and make adjustments before entering the development phase.

SEO optimization:

Since visibility on the web is crucial for weploy.ai, we have integrated SEO optimization into the conceptual phase. We have focused on selecting the right wording and technology to ensure that the website is not only functional but also optimized for search engines.

Conclusion:

The concept phase for weploy.ai was an intense and fruitful time of research, planning, and creativity. With a clear understanding of the needs of end users, a look at the market, and a solid technical foundation, we have developed a solution that is ready to revolutionize the way websites are translated.

1. The importance of the right design:

In the digital age, users decide within fractions of a second whether they find a website appealing or not. This quick judgment can make the difference between a successful product and a flop. Therefore, it was of utmost importance for us to develop a design that is not only functional but also aesthetically appealing.

2. Use of Figma:

We used Figma for the design, an advanced design tool that allowed us to create interactive prototypes and review and revise the design in real-time with the entire team.

Corporate Identity (CI):

Ein wesentlicher Bestandteil unserer Designarbeit war die Sicherstellung, dass die Corporate Identity von weploy.ai in der Lösung klar zum Ausdruck kommt. Die CI ist nicht nur ein visuelles Branding-Element, sondern auch ein Zeichen für die Werte und die Mission eines Unternehmens. Wir haben darauf geachtet, dass Farben, Schriftarten und andere Designelemente konsistent mit der CI von weploy.ai sind und gleichzeitig die Funktionalität der Website-Übersetzungslösung unterstützen.

Form Follows Function:

Our design approach is based on the principle of "Form follows function". This means that design should always serve functionality. Our main priority was to make the software as user-friendly as possible, so that users can easily access the AI translation features.

5. Modern design system:

We strictly adhere to modern design systems like Material Design. These systems provide consistent and proven design solutions that enhance usability. By using such systems, we ensure that our websites are instantly recognizable and easy to use.

6. Mobile design and responsiveness:

Since 70% of website visits come from mobile users, we have prioritized mobile design and responsiveness. Our solution has been designed to work optimally on different devices and screen sizes without compromising usability or aesthetics.

7. Target-oriented design:

Finally, we always kept the target audience in mind when designing. By considering the needs and preferences of the predefined individuals, we were able to develop a design that truly resonates and appeals.

Conclusion:

Die Designphase für weploy.ai war ein kritischer Schritt in der Entwicklung einer revolutionären AI-basierten Website-Übersetzungslösung. Durch den Einsatz von Figma, die Berücksichtigung der Corporate Identity und die Anwendung moderner Designprinzipien haben wir eine Benutzeroberfläche geschaffen, die sowohl funktional als auch visuell ansprechend ist.

Technology and approach:

To achieve this goal, we have developed various sign-ups for Webflow and integrated a tool called weploy into the Webflow website. This tool allows the translation of the website into multiple languages, thereby increasing discoverability for international customers.

Used technologies:

Node JS :A server-side platform that allowed us to create the backend service for the website.

Nocodb: Ein Tool, das uns half, eine Datenbank ohne Code zu erstellen, um die Website-Inhalte zu verwalten.

Google Cloud: Hier haben wir unsere Anwendungen und Daten gehostet, um eine zuverlässige und skalierbare Lösung zu gewährleisten.

GithubAPI: Mit dieser Schnittstelle konnten wir den Entwicklungsprozess automatisieren und effizienter gestalten.

OpenAI API: Diese API wurde verwendet, um fortschrittliche KI-Funktionen in die Website zu integrieren.

React: Ein JavaScript-Framework, das uns half, eine reaktive Benutzeroberfläche für die Website zu erstellen.

Tailwind: Ein Hilfsprogramm für das Design, das uns ermöglichte, ein ansprechendes und modernes Design zu erstellen.

NPM: Ein Paketmanager, mit dem wir verschiedene Bibliotheken und Tools für die Entwicklung integrieren konnten.

Redis: Ein In-Memory-Datenspeicher, den wir für Caching und schnelle Datenabrufe verwendet haben.

Our way of working:

Our guiding principle in this project was simplicity. We have found that unnecessary complexity not only prolongs development times but also increases costs. To ensure the success of a project, we prioritized user experience and reverse-engineered our approach to identify the most suitable technology. With advanced tools like Github's Copilot, we have continuously optimized our development processes, underscoring our commitment to efficiency and innovation.

Project completion:

The project was delivered on time and within budget. This was proof of our efficient way of working and our commitment to delivering the best possible product to the customer.

Conclusion:

The development phase for weploy.ai was a combination of technical expertise, innovative thinking, and a clear focus on user-friendliness. By using state-of-the-art technologies and tools, we were able to develop a website that is not only aesthetically appealing but also functional and easily discoverable for customers.