Building application with AI: from concept to prototype
Introduction – Artificial Intelligence in Application Development
When a few years ago the technological world was taken over by the blockchain trend, I must admit that I didn’t hop on that train. I couldn’t see the real value that this technology could bring to someone designing application interfaces. However, when the general public got to know about ChatGPT 3 and Midjourney in 2022, I was completely drawn in, heavily adapting their capabilities to my work. In this book, I would like to present my methodology for working with daily tasks, utilizing the power of AI to speed up work and achieve better results, as it’s not just about pace here. So, let’s check if I can succed in Building application with AI.
Disclaimer: This article is a condensed version of the full eBook, which you can download here (don’t worry, there is no mailwall). There, you will find prompts and answers of ChatGPT, leading to the building of application prototypes.
I don’t plan on explaining what AI, machine learning, or deep learning are. I assume that anyone interested can familiarize themselves with the topic among experts like Demis Hassabis or Andrew Ng. Instead, I want to demonstrate a highly practical approach to completing a random task that thousands of designers struggle with every day. How random? Let’s leave that decision to the force that this article is dedicated to: artificial intelligence. In the process of creating the outline of this text, I opened ChatGPT 4 and came up with the following prompt:
My prompt:
I work as a UX/UI designer in a software house that creates digital products for clients from all around the world. My main tasks include User Experience design, Interface design, and Web design. I work with Photoshop, Illustrator, create prototypes in Figma, and use HTML, CSS, and JavaScript for development, as well as animations in After Effects. I have experience in IT, advertising, branding, and designing digital and physical products.
I am writing an article about the use of AI in the daily work of professionals in my field. For this purpose, I want to create a sample website project. Please provide a list of 5 projects that will serve as an interesting framework for discussing the benefits of working with AI in the context of graphic design.
I started the prompt with a fairly detailed description of who I am and what I do. This will allow the algorithm to better understand my background, context, and generate more fitting ideas. Let’s input our prompt into the chat and wait a few seconds for a response.
Chat’s answer:
Five design projects highlight AI’s benefits in graphic design:
- Local Artisanal Bakery: AI analyzes top bakery sites for optimal design, enhancing the user experience with an interactive order menu.
- City Bike Rental Service: AI uses heatmaps for design refinement based on user feedback, ensuring a mobile-friendly interface.
- Children’s Interactive Learning Platform: AI adapts UI/UX based on kids’ interactions, creating an engaging, age-appropriate experience.
- Eco-Friendly Clothing Brand: AI predicts sustainable design trends and personalizes the shopping experience by analyzing user behavior.
- Local Music and Arts Festival: AI optimizes ticket sales layout and curates content based on visitor preferences, enhancing user experience.
AI tools improve efficiency, personalization, and user focus in design, augmenting designers’ capabilities with data insights.
I like points number 2 and 3, so I asked for a detailed explanation.
City Bike Rental Service:
- City Explorer Bike Package: Offers bikes with a digital map for tourists, highlighting attractions and eateries. AI creates dynamic, optimized routes tailored to user interests and efficient travel.
- Family Adventure Day: Provides family-friendly bikes and gear, with AI suggesting packages based on family size and optimizing bookings for equipment availability.
- Bike Maintenance Tutorials: Features tutorials on basic bike care, with AI promoting popular topics and customizing learning paths based on user activity.
Children’s Interactive Learning Platform:
- Storytelling Math Adventures: Teaches math through stories, with AI customizing difficulty based on child’s progress.
- Virtual Science Labs: Interactive virtual experiments, with AI guiding the learning sequence and providing feedback on mistakes.
- Language and Culture Explorer: Introduces languages and cultures through games and stories, with AI adjusting content based on the child’s interest and proficiency.
It is easy to steer the algorithm in directions different from what we planned. Perhaps I was not very precise in formulating the prompt, but the Chat understood that it is the client who should benefit from the AI advantage in their product, not just me while working on it. However, this does not hinder us in any way, and it even adds another layer of technological change to our experiment. At this stage, I have decided that we will focus on the educational product, but none of the ideas resonated with me completely. I asked for three more proposals.
Children’s Interactive Learning Platform:
- Historical Time Travel Adventures: Interactive module for exploring different eras. AI customizes journeys based on a child’s engagement, offering deeper dives into specific interests, like art during the Renaissance.
- Eco-Warrior Environmental Missions: Environmental education through virtual missions. AI adapts challenges and topics based on the child’s progress, introducing more complex concepts like composting after basic recycling tasks.
- Music and Rhythm Universe: Teaches musical instruments and genres through interactive activities. AI personalized learning, focusing on preferred instruments or genres and adjusting game difficulty to keep pace with the child’s development.
Boom! Since I have loved history since I was a child, number one on the list hit the right chord instantly. So, we have an idea for a product, let’s start working from scratch.
Part 1 – Strategy. Artificial Intelligence as a Researcher.
Initially, we wanted AI to generate a customer who comes to us with a request for a website. After a brief conversation, we have our customer, but we don’t have a product that the website will advertise. Fortunately, with GPT Chat, there are no limits, so let’s also create an application for our client.
Ideation and brainstorming
During traditional product design, the first thing we like to do is to carry out solid background research using Design Thinking methods to understand the barriers and opportunities that lie ahead. Therefore, it’s time to ask the Chat to embody a specific role – an experienced, professional, and well-trained researcher with extensive knowledge in Design Thinking. This will allow the algorithm to dig deeper into the knowledge than if I had asked the question without specifying the role. We will use this technique for any task requiring specialized knowledge.
Let’s focus on Historical Time Travel Adventures app.
Please answer as a professional product designer, with many creative solutions in portfolio, using a Digital Thinking approach.
Give me 3 reasons why children don’t want to study history.
The first sentence sets the contex, the second puts Chat into a specific role, and the third defines what needs to be created.
- Lack of Immersion: Traditional history teaching, based on memorization, doesn’t match the interactive experiences digital-native kids expect.
- Solution: Use AR or VR to create immersive historical experiences, like exploring ancient Rome, making history tangible.
- Relatability Issues: History may seem irrelevant to children without a personal connection, feeling distant and unengaging.
- Solution: Employ personalized storytelling with characters facing challenges similar to those of the child’s age, enhancing relatability through gamified elements.
- Complexity Overload: The vastness and interconnectedness of history can overwhelm, especially when presented linearly.
- Solution: Modular, interest-based learning paths aided by AI, along with interactive visuals, simplify and contextualize history, making it more approachable and engaging
Business Model
With this knowledge, we can try to create a business model for the application. This is the answer that came after I inputted the prompt.
Time Travel Adventures App Business Model Overview
Value Proposition:
- TimeTrek merges VR and AR with historical content for an immersive learning experience, making history accessible and engaging for children.
Customer Segments:
- Children (7-15 years)
- Parents seeking educational tools
- Schools and educational institutions
- History enthusiasts
Distribution Channels:
- Individual downloads via App Store and Google Play.
- Bulk installations through partnerships with schools.
- Promotion on educational app review sites.
- Collaborations with museums and historical sites.
Customer Relationships:
- Personalized profiles for progress tracking.
- Interactive forums for community engagement.
- Regular feedback collection to refine the app.
Revenue Streams:
- Freemium Model: Basic access is free; premium features are paid.
- Subscription Model: Access through monthly/yearly subscriptions.
- Educational Licenses: Discounted bulk access for institutions.
- In-app Purchases: Exclusive modules and features.
- Affiliate Marketing: Partnerships for ticket sales or merchandise.
Key Resources:
- Content creation team (historians, writers, researchers).
- AR and VR development specialists.
- Marketing and partnerships team.
- Customer support team.
Key Activities:
- Developing engaging AR & VR historical content.
- Continuous content updates and feature enhancements.
- Marketing efforts and user acquisition strategies.
- App maintenance and technical support.
Key Partnerships:
- Collaborations with historical sites for exclusive content.
- Partnerships with schools for educational programs.
- Tech companies for AR and VR hardware.
- Educational content creators and influencers.
Cost Structure:
- Research and development for content.
- Development and licensing of AR/VR technology.
- Marketing and advertising expenses.
- Server hosting and maintenance costs.
- Operational expenses, including salaries.
Competitive Advantage:
TimeTrek sets itself apart with its innovative use of AR and VR technology to create an unparalleled educational experience, authentic content through museum partnerships, and a commitment to continuous improvement and user engagement. This positions TimeTrek as a frontrunner in immersive historical education, dedicated to making history learning enjoyable and informative for its audience.
Part 2 – The Application. Artificial Intelligence as an UX/UI Designer
The next step is to create an application prototype. In the full version of the book, I describe this process in detail, going through the creation of user flow, layouts, interactions and content such as icons, photos and texts.
It’s hard for me to measure how much using Chat and Midjourney sped up the application design process, but after just two evenings I had the prototype below ready.
Part 3 – Branding. Artificial Intelligence as a Brand Designer
We have a decent starting point for testing our (or not just our…) idea on real users. However, let’s not forget that we need to create a website, and we don’t even have branding yet.
Naming with AI
The chatbot, by himself, has added a working name for the application, TimeWarp Tales, but it doesn’t fully worked for me. I asked for other 10 short ideas.
1. HistQuest
2. TimeTrek
3. ChronoCraft
4. EraExplore
5. PastPort
6. TimeTwist
7. HistHopper
8. ChronicleChase
9. WarpWalk
10. EpochEdge
TimeTrek seems like a proposal worth considering, as I informed in the Chat.
Logo idea by AI
When asked for a concept, it suggested the following solutions:
- Hourglass & Pathway: A minimalist hourglass with a winding pathway inside, symbolizing a journey through time. Colors: Metallic silver or gold for the hourglass, gradient blue for the path.
- Clock Face & Footprints: A round clock with footprints instead of numbers, clock hands as walking sticks or sundial elements. Colors: Antique bronze, deep blue for footprints, rose gold for hands.
- Timeline Compass: A compass with symbols for different eras (pyramid, castle, gear, futuristic city) as directions. Colors: Earthy browns and greens.
- Tesseract Portal: A rotating 3D tesseract indicating time’s complexity, with an emerging path. Colors: Cosmic purples and starry whites.
- Sundial & Shadow: A modern sundial with a spiral shadow, representing history’s cyclical nature. Colors: Sunlit gold for the sundial, fading gray for the shadow.
I asked to combine symbols associated with history with a space rocket to symbolically represent a journey through time.
- Base: An Hourglass with fiery propulsion, symbolizing time’s passage.
- Body: A Scroll shape with Ancient Columns and Gears, representing historical records and civilizations.
- Mid-Section: Knight’s Shield control window, symbolizing protection and history.
- Stabilizers: Quill-shaped fins, referencing the Renaissance.
- Rocket Tip: Stone Tablet with an Antique Map, highlighting early records and exploration.
- Embellishments: Globe patterns and a Broken Pillar shadow, alluding to global exploration and past eras.
The rocket built from a Greek column seemed promising to me, so I asked Midjourney to generate some simple illustrations with a rocket and a column, after which I combined them into a fun logo in Adobe Illustrator.
Quite good, but in my opinion, too childish – in the second attempt, I focused on abstraction, asking Midjourney to imagine a minimalist logo from one of the earlier ChatGPT proposals: “A streamlined arrow, but the shaft is slightly wavy or warped, giving an impression of movement and distortion as it “travels” through time.” Here’s the result.
After delicate manipulations of the fourth picture, I managed to achieve a satisfactory effect by implementing a dynamic, T-shaped clock into signature.
Part 4 – Website. Artificial Intelligence as a Web Designer.
Having developed the strategy, application prototype, and preliminary branding, we can now prepare the landing page for our application. For this purpose, I typically assigned a role to our chat and asked for a list of elements that should be included on an informational landing page.
In the book, I describe in detail the creation of the website structure, layout design and copywriting process supported by AI.
With what I managed to generate, I began designing the website. I used some graphics generated in Midjourney for the application’s needs and a few completely new. That is the finished landing page design.
Summary
When I started writing this article, I had no idea where this experiment would lead me. After just a few days, we came up with a well-documented concept, initial design and a clickable, content-filled prototype. I reckon this shows clearly the immense potential of ChatGPT as a tool for designers. It elevates the design process mostly by granting access to a vast array of virtual specialists, each equipped to offer best practices across numerous domains. Such capabilities can significantly streamline and enhance the ideation and execution phases of design, offering insights and suggestions that might otherwise be overlooked.
However, it’s essential to approach Chat with a discerning mindset. The platform, as of now, exhibits certain biases and can occasionally fall into a loop of misconceptions. It requires careful guidance to ensure that the information it provides aligns with the user’s objectives and is free from inadvertent errors.
Furthermore, while ChatGPT is a powerful tool, it doesn’t replace the depth and nuance of traditional research or hands-on workshops. It should be viewed as an alternative, particularly useful when traditional, patient approaches are not feasible. In essence, while AI tools are a groundbreaking addition to a designer’s toolkit, it’s crucial to use it judiciously, always cross-referencing its suggestions with established best practices and real-world insights.
Authors
Bartosz Puszczyk is a product designer focused on bringing to life ideas that makes growth easier. A multidisciplinary autodidact, launched his first skateboarding website in middle school and has since been continuously making new errors, striving to bring institutions and users closer together.
Popular Posts in category
AI for programmers
