AI and no code app
This project taught me that providing specific context and concise prompts is essential to utilize AI tools effectively.
Also, my take on the debate- AI is GOOD NEWS for product designers! (at least for the coming future.)
Work
Passion Project
Project Duration
5 days to learn+build a responsive website
2 days to build the app
Role
AI Prompt Designer
Collaboration
AI and no code tools
Summary
(When you only have 5 seconds)
-
2023 is all about AI. Since ChatGPT gained popularity in January 2023, we have seen a rise in the usage of AI tools.
My curiosity led me to experiment with the technology and test how these tools would aid product design. This video from Codex Community was my inspiration.
-
My goal was to learn about the capabilities of these tools and their potential impact on the design and development process.
I also wanted to test out the learning curve and time to deliver products using these tools.
-
The precise nature of the prompts you provide is crucial for obtaining optimal results when using AI tools.
AI and no-code tools help speed up the product and interaction design aspect.
These tools will reduce the amount of time spent on logistics and will enable designers to dedicate more time to comprehending fundamental challenges and deliver value to users.
Design Process
Meet the Team
-
Figma
Ideation
-
Chat GPT
Content
-
MidJourney
Assets
-
Framer
Website Builder
Defining
Success
Metrics
Learning Curve
To assess the learning curve of AI and no-code tools, I utilized NPS ratings to evaluate my experience learning each tool. The NPS scale ranged from 1 (indicating difficulty of learning) to 5 (indicating ease of learning).
Time to Deliver
To determine whether these tools facilitate or hinder design work, I measured the "time to deliver" metric to quantify the time saved to complete design tasks.
Settings and Prompts
When using AI tools, the precise nature of the prompts you provide is crucial for obtaining optimal results. This is because the AI system relies heavily on the information it is given to generate accurate outputs. Therefore, the more specific and relevant the prompts are, the more effective the results will be. As a result, investing time and effort into formulating clear and precise prompts is crucial for maximizing the potential of AI technology.
Quick Tip
Refer to documentation or blog posts to learn more about how to use the AI tool. Reading about MidJourney’s settings/prompts accelerated my learning process.
Chat GPT Blog
MidJourney Docs
Result generated with a generic prompt
Result generated with a precise prompt
No-code tool
Having used Webflow previously, I determined it was unsuitable for this project and decided not to use it. I explored Editor X from Wix but found it to be confusing. As an alternative, I opted for Framer, which I had used before for a smaller project at work.
My first impression of Framer was that it was very similar to Figma. I explored all the options, unlearned my reflexes from using Figma, and learned how to use Framer efficiently.
My favorite aspect about Framer is the ready-to-use layouts and components, along with interactive effects.
Quick Tip
Although Framer has the freeform canvas interface as Figma, there are differences, and occasionally referring to the learning materials is very helpful.
Framer Learn
Success
Metrics
Learning Curve
ChatGPT:
I rate it as a 5 (very easy) due to my extensive usage since January.
MidJourney:
I gave it a rating of 4 (easy) because I had to familiarize myself with all the prompts and the workings of the platform. Reading about the settings and prompts accelerated my learning by almost three times.
Framer:
I rate it a 2 (difficult) because even though it has similar vibes as Figma, it was difficult to quickly work around on the platform.
Time to Deliver
Initially, I constructed a responsive website, which required approximately five days to complete, including the time spent on learning. Afterward, I shifted my focus to developing a mobile app, which was completted within 48 hours.
