Back to overview

Replace me if you can (2)

Reading time approx. 5 minutes
29.08.2024

Last week, we showcased how our design Xpert, Tina, performed in our little experiment. The goal was to develop a functional web application (Mood Tracker) for mobile use, including frontend, backend, and design, utilising AI tools. In this post, we focus on the approach and the results achieved by our backend Xpert, Danny. We will highlight the strengths and weaknesses of AI tools such as ChatGPT, Vercel's v0, and GitHub Copilot Workspace.

Backend Xpert turns Designer

Danny began by developing a concept for the application using ChatGPT. He also utilised custom GPTs specifically tailored to User Experience Design to define the basic layouts and core functionalities of the Mood Tracking app.

v0

Once the concept was finalised, our backend Xpert sought support from v0 for the design and frontend development. The AI tool v0, developed by Vercel, is capable of generating functional frontend code out of text and image descriptions. Danny fed the tool with prompts in natural language that described various layouts and their functionalities.

With additional inputs, Danny refined the intended design until v0 reached its limits, and further iterations did not yield the desired results. The solution? GitHub Copilot Workspace.


v0-version1 Iteration 1 (Source: v0)


v0-version11 Iteration 11 (Source: v0)


GitHub Copilot Workspace

GitHub Copilot Workspace is an AI-powered development environment. It enables developers to plan and implement projects from concept to execution using natural language. Compared to GitHub Copilot, this tool offers a task-oriented, collaborative environment. It enhances collaboration through real-time cooperation with AI, as well as specification-based planning and execution.

After reaching the limits of v0’s capabilities, our backend Xpert created a repository on GitHub with the code generated by v0 to continue development with Copilot Workspace. "Certain adjustments require direct intervention in the code because the capabilities of tools like v0 to create prototypes have their limitations," says Danny. As a backend Xpert with limited frontend knowledge, Copilot Workspace was particularly helpful for him. Programming in natural language, in particular, made his work in the frontend significantly easier.

For a session with Copilot Workspace, you first select the appropriate repository and then start with prompting. At the beginning, a task is defined and described as clearly as possible. After creating a well-defined task and its corresponding specification, Copilot Workspace provides suggestions for implementing the function in natural language. Based on the code from the repository and the task, the suggestions from Copilot Workspace are usually of high quality, but there is still the option to edit, supplement, or add subpoints to the suggestions. This fosters collaboration between AI and developers and helps avoid misunderstandings in the implementation.

Our backend Xpert advises keeping tasks small, even though the tool can handle larger tasks well. It is important to group related tasks together and not combine different tasks in one request. Traceability is best maintained when proceeding modularly. However, Copilot Workspace also has its limitations and makes mistakes that need to be corrected, which is why a basic technical understanding is necessary.

While working on the backend, Danny implemented some tasks independently, but he increasingly relied on ChatGPT and GitHub Copilot Workspace.


github-workspace-multiselect Multiselect (Source: GitHub Copilot Workspace)


result-multiselect Multiselect Result (Source: GitHub Copilot Workspace)


During the implementation, our backend Xpert encountered various challenges, particularly with the correct display of mood-tracking graphics (e.g., v0 persistently used months instead of days). These were overcome through manual adjustments and iterative refinement in the Copilot Workspace. The final improvements in design were ultimately achieved through targeted code adjustments in GitHub Copilot Workspace.

Despite the support from AI tools, technical understanding and manual adjustments were necessary to achieve a satisfactory result. By using ChatGPT, v0, and GitHub Copilot Workspace, our backend Xpert was able to create a functional and user-friendly interface, albeit with some limitations.

By combining these tools with his own expertise and multiple iterations, Danny was able to develop a mood-tracking journal that largely meets the previously set requirements for the product.

Web application "Ups & Downs"


Ups-and-downs-starting-page Starting Page


Ups-and-downs-statistics Statistics


Conclusion & Outlook

The experiment clearly highlighted the strengths of the different approaches: Tina's design stood out due to its inviting look and clear focus on user needs, while Danny's application impressed with its broader functional scope. Both Xperts gained valuable insights into the potential and limitations of the AI tools used.

It became evident that AI solutions are currently not yet mature enough to fully replace human expertise. While the tools are particularly useful for user research, conceptualisation, and branding, human validation and refinement of AI-generated results remain essential. AI tools significantly accelerated processes, especially in rapid prototyping. However, technical understanding, especially when coding, is still necessary to successfully implement specific requirements. Nevertheless, it is to be expected that AI tools will increasingly be integrated into design and coding processes in the future, as they noticeably enhance both the quality and quantity of output in these areas.

At this point, ethical questions quickly come into play. So far, AI-generated results are based on extensive datasets that reflect the knowledge of many people. There have been repeated protests from certain professional groups because their expertise has been used—without consent or compensation—for training the machines. On the other hand, there is the question of to what extent AI should and may replace human labour. In this area, there are various approaches, such as Human-Centered AI, and at the legislative level, there are efforts to establish clear regulations. As we have highlighted in previous blog posts and interviews with our Xperts, it is important to emphasise the positive use of AI. It is essential to perceive the technology not as an adversary but as a partner. No one can predict the future, yet we believe that human interaction and collaboration will remain important.

Given the rapid advancements in the field of AI, we plan to regularly repeat this experiment and further intensify the interdisciplinary collaboration of our teams. Those who want to stay competitive must prepare their employees for the future.