The rapid advancement of artificial intelligence (AI) is opening up new possibilities in product development. At IT Sonix, we conducted an experiment to test the limits and potential of AI in digital product development from various perspectives. Our goal was to see whether a backend expert and a design expert could take on each other’s tasks using AI tools. We are now presenting the results in our two-part blog series.
The Personal Challenge
Our experiment involved Danny Hucke, our backend expert and Circle Lead for Artificial Intelligence, and Tina Marschner, our design expert and Circle Lead for Digital Product Design, competing against each other. Our goal was to find out whether they could take on each other’s tasks using AI tools. Both had the same goal: to create a small digital product that includes front-end and back-end components as well as design.
The Goals and Rules
Our Xperts wanted to know whether a lack of expertise could be compensated for by using AI tools and to what extent they would be able to develop a functional end-to-end prototype using AI. It was also important to them to identify the limitations of AI solutions and to understand in which areas AI support already works reliably.
For this little experiment, our Xperts agreed on the following rules:
- AI should always be used first, and human assistance should only be sought when there are dead ends
- Both must build the entire product—design, front-end, and back-end
- Money may only be spent on AI tools, not on people
- The entire project must not exceed a time budget of 40 hours
Requirements for the Digital Product
Product Vision: The goal was to develop a mood-tracking journal—a tool for minimalists looking for a simple and straightforward way to track their mood on a daily basis.
MVP Features:
- Enter your current mood (daily)
- Overview of Sentiment and Its Evolution
Technical Requirements:
- Persistent information: The data is retained even if the app is closed and then reopened
- Web Application
Implementation
Once all the parameters had been clarified, our Xperts set to work on implementing the project. In this first part, we’ll focus on the approach taken by our design Xpert. We’ll take a closer look not only at Tina’s workflow but also at the individual AI tools she used in the process.
Design Expert Becomes a Backend Developer
Tina approached the task as if she were working on a real project, first getting an overview of the situation before turning her attention to the design and implementation.
Market Analysis with Gemini
To start, our design expert conducted some research. She used Gemini Advanced, which—alongside Figma—was the only paid tool integrated into her tech stack. Using precisely worded prompts, she was able to leverage Gemini to take on the role of a UX researcher. This enabled Tina to conduct a small market analysis that examined both the competition and the target audience, including proto-personas. Gemini handled the following tasks:
- Existing Mood-Tracking Apps: An Overview of Apps Already Available
- Target Audience: Definition and Behavior
- Proto-Personas: Creating initial user profiles based on the analysis results
User Interviews and Proto-Personas
To gain a better understanding of the target audience, our expert Tina conducted an experimental user interview using the AI tool Gemini. She had Gemini simulate a real user and, through skillfully crafted prompts, gained additional valuable insights into the users’ needs. It’s important to emphasize that this persona is merely a stereotype and therefore cannot replace a real person in an interview for an actual project. She then transferred the newly gained insights and proto-personas into FigJam to make them usable for further design work.
Application Design
Using FigJam, Tina created a template for the proto-personas, which she then populated with the data generated by Gemini. Our design expert was particularly surprised when FigJam suggested not only a suitable template but also a practical user flow for the mood-tracking app. Based on this, Tina developed a user journey grounded in the requirements from the fictional user interview and the proto-personas. She also relied on FigJam’s AI capabilities when creating the requirements list, including the MVP model for implementation.
Source: FigJam
Design and Branding
It was clear to our design expert from the very beginning that a successful product requires not only a solid concept and functionality but also an appealing design and strong branding. To develop suitable brand names and color palettes, Tina relied on the AI tool Gemini. Using targeted prompts, she generated various suggestions from which she selected the best ones.
When creating the logo, Tina first turned to ChatGPT and used a Custom GPT specifically tailored for logo design. „Although Gemini was helpful in many ways, I wasn’t entirely convinced by its capabilities, which is why I switched to ChatGPT,“ explains our Design Xpert. With targeted prompts, the Custom GPT was able to deliver high-quality logo concepts in text form, which Tina then turned into graphic designs.
By using AI tools, we were able to achieve significantly faster results in both branding and logo design without compromising on quality.
Wireframing and Prototyping
When it came to wireframing and prototyping, our design expert initially wanted to use AI-powered tools and plugins. To that end, she took a closer look at the tool Uizard. After conducting a few tests, however, she realized that the results didn’t meet her standards. Ultimately, Tina decided to create the wireframes and the entire design herself in Figma.
To speed up the process, Tina used Google's Material Design resources, with the intention of using the framework for the front end later on as well. While researching how to integrate the design, she eventually came across the tool Locofy.
Implementation of the front end and back end
Locofy is an AI tool that helps developers translate design prototypes into production-ready front-end code. It supports frameworks such as React, Next.js, and Flutter. The tool enables the efficient conversion of UI elements and interactions from Figma or Adobe XD designs into code. Tina chose React to implement her designs.
Source: Locofy
Although Locofy made their work considerably easier, the tool did not fully meet expectations. The generated code was not always optimal and had to be revised several times. Iterations also caused problems for Locofy. There were repeated errors in the UI that had not existed in previous versions.
However, it’s important to keep in mind that Locofy is a free tool currently in beta that delivers impressive results. Tina recommends the tool especially for less specific or complex applications, such as simple websites. For more demanding projects, the amount of work required is definitely greater than what the community or tutorials suggest.
Source: Locofy
To continue working on the front-end and back-end code, Tina used Visual Studio Code as her development environment. Drawing on her experience with this tool, she made the necessary adjustments. As for the backend, Tina first consulted Gemini. She sought advice on suitable databases, the optimal approach to backend architecture, and how to integrate it into the rest of the system.
Despite the support from AI, our design expert encountered challenges when connecting the front end and back end and had to rely on human assistance. In two short sessions, she was finally able to successfully link the front end to the back end by combining human expertise with Gemini’s capabilities. In the process, the backend expert Tina consulted discovered that she was working with two different backend solutions that Gemini had suggested to her in two separate chats. This example illustrates how important it is to thoroughly understand the results generated by AI tools in order to avoid mistakes like this one.
„emo“ Web Application“
Example 1
Example 2
In our next post, we'll take a look at the approach used by our backend expert Danny and explain his method step by step. We'll also compare the two applications, and we're already excited to see the results.
