Redefining Innovation With AI Prototyping – Spiceworks News and Insights
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.
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.
Source: Credera
Caption: Initial paper prototype (Sketch)High-resolution figma mockup based on the paper prototype
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.
Source: Credera
Caption: Prompt given to ChatGPT for image generation
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:
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.
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).
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.
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:
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
Chief Innovation Officer, Credera
© Copyright 2006 – 2024 Spiceworks Inc.
