Transforming Ideas Into Innovation With AI Prototype Design
Find out how AI prototyping can accelerate your design process and bring your ideas to life faster.
The fusion of AI and prototype design efficiently tackles the creativity crisis in innovation. Jake Carter, global chief innovation officer at Credera, through examples and hypothetical scenarios, illustrates how AI can generate high-fidelity mockups and even code prototypes.
Adopting design thinking in the innovation process highlights the crucial importance of rapid prototyping and user testing as fundamental elements. This methodology leans on creating visual artifacts, or prototypes, to delve deep into a concept through direct interaction with end-users. It transforms abstract ideas into tangible forms that facilitate insightful feedback.
Interestingly, there exists an unconventional correlation between the sophistication of a prototype and the depth of insights it garners. Tim Brown, a luminary from IDEO, succinctly articulates this phenomenon:
“Prototypes should command only as much time, effort, and investment as are needed to generate useful feedback and evolve an idea. The more ‘finished’ a prototype seems, the less likely its creators will be to pay attention to and profit from feedback.”
To create prototypes that balance realism with flexibility and encourage feedback without leading to confirmation bias, various strategies can be implemented. My teams, for example, start with rudimentary paper sketches to capture and iterate on innovative ideas, gradually progressing to more detailed mockups in Figma. For digital innovations, like mobile or web applications, we link these mockups to offer users a realistic experience of the app’s flow.
The advent of AI is revolutionizing the prototyping landscape. Now, tasks that previously took hours for a designer to accomplish can be completed in minutes with AI, allowing for the swift creation and deployment of interactive app pototypes.
Prototyping with AI
Consider the following hypothetical scenario: You have been asked to help the automobile manufacturer Toyota explore ways to serve individuals with mobility limitations better. You have decided to focus specifically on the challenges associated with finding and purchasing a vehicle. In doing so, you explore several concepts simultaneously.
One of these concepts introduces a new way to browse vehicles, focusing not on the vehicle’s specs but on how well it accommodates the needs of drivers and passengers with mobility challenges. If tasked with this, our team would create a paper prototype (Figure 1 below), which we typically hand over to a UI designer to transform into a high-resolution Figma mockup, as illustrated in Figure 2.
Paper Prototype (Sketch) & Figma Mockup
Source: Credera
Caption: Initial paper prototype (Sketch)High-resolution figma mockup based on the paper prototype
What if, instead, we used AI for prototyping?
To explore how well this would work, I provided the paper sketch above to OpenAI’s ChatGPT (using GPT-4 with DALL-E) and asked it to generate high-fidelity mockups based on the sketch. The first attempt (Figure 4) was interesting but deviated significantly from the concept, so I asked ChatGPT to try again but to adhere to the elements and placements in the sketch.
The output was better in matching the sketch, but the text was off, and the image included several superfluous elements. I tried once more, providing highly detailed directions.
The output was remarkably professional-looking. However, as a prototype, it would still be of limited value because the text is unintelligible, and the image file itself is not editable.
The Prompt
Source: Credera
Caption: Prompt given to ChatGPT for image generation
The Outputs
Source: Credera
Caption: Figures 4, 5, and 6: First attempt at AI-generated mockup, Improved AI-generated mockup, professional AI-generated mockup
See More: All Eyes on the Intersection of Risk, Research, and Innovation This Year
The good news is that instead of using AI to generate mockups, we can use it to create code prototypes. The benefits are twofold:
- Code prototypes are easier to manipulate after they have been generated, allowing us to tweak the output to match our needs better,
- Code prototypes provide a level of interactivity that is lacking in static image mockups.
As a test, I gave ChatGPT the same sketch we used above. Instead of asking it to generate an image, I asked it to produce the code necessary to create a web app using the Streamlit library. This new Python library makes it particularly easy to create data-oriented web apps. ChatGPT dutifully complied, producing the code shown in Figure 7.
The Generated Code
Source: Credera
Caption: Code generated by ChatGPT for web app prototype
To turn this code into a prototype, I needed to copy it into a deployable project. I used GitHub Codespaces, a cloud-based development environment with easy integration with Streamlit. I even built on top of Streamlit’s demo app, meaning all I had to do was drop in the new code (Figure 8).
GitHub Codespaces
Source: Credera
Caption: Deployment of the prototype using GitHub codespaces
I did some light cleanup in the code to better match the original, hand-drawn sketch. First, I added a page navigation bar. Then, I introduced tabs for the reviews. I asked ChatGPT to create a simple logo for the page to add a bit of polish and added some spacing to the page.
The final output is shown below (Figure 9). Is it perfect? Not at all. That said, it is probably sufficient to convey the concept so that we can test it with potential users. More importantly, it only took 20 minutes to produce, rather than the several hours a UI designer would have needed to create a high-resolution mockup they were willing to share.
For those who want to follow this pattern, it is worth noting that there are some dependencies to this approach. First, of course, I needed access to ChatGPT, and because I wanted to use the newer GPT-4 model with DALL-E for image generation, I needed a paid subscription to ChatGPT Plus. Second, I needed to install the open-source Streamlit library to use those components. Finally, while Streamlit is very user-friendly, I needed basic coding knowledge to manipulate the layout the way I wanted.
The Final Prototype
Source: Credera
Caption: Final prototype with adjustments, ready for testing
What does it mean for the innovation process that AI can generate realistic-looking prototypes? There are at least four interesting implications:
- Faster prototyping: The ability to prototype more quickly means we can realistically test more concepts than we previously could. In a typical design sprint, for example, our team would traditionally prototype one to two concepts at most; with AI, we could realistically double that number without extending the time bounds of the sprint.
- Flexibility: It becomes easier to make on-the-fly changes to prototypes because we no longer need to revert to a designer for updates. This enables more rapid iteration, even allowing for concept adjustments between testing sessions based on what we learn from users.
- More opportunities for feedback: Prototypes themselves become more disposable—and that’s a good thing! As Tim Brown noted, the less we’ve invested in building a particular prototype, the more willing we are to hear critical feedback.
- Human design integration: At the same time, prototypes may be less usable to build internal momentum around an idea when AI-generated. This could lead to splitting the “prototyping” step in the innovation lifecycle into two or more rounds, with the first round leveraging AI to rough out an idea and subsequent rounds bringing in human designers to improve fidelity.
Prototyping is, of course, just one of many ways AI is likely to change the innovation lifecycle. Research suggests that AI may help us with everything from generating user insights to brainstorming ideas and even evaluating those ideas.
A recent Wharton experiment found that AI is better than MBA students at idea generation. As we dip our toes into the AI landscape, it’s reassuring to know that real value can be created by integrating AI into the innovation process.
How can organizations reshape the innovation process with AI-driven prototyping? Let us know on Facebook, X, and LinkedIn. We’d love to hear from you!
Image Source: Shutterstock
MORE ON AI INTEGRATION
