Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Get ready to dive into the future of design. Whether you're a student, a design pro, or just super into AI, this workshop is for you. You'll see how ChatGPT can give you spot-on feedback, help you write killer copy, suss out the competition, and even whip up basic web prototypes. It's hands-on, it's mind-blowing, and it's all about unleashing your creativity. Don't miss out on this chance to kick off your AI-powered design journey in style!
Join Treehouse's Discord Community to connect and collaborate with like-minded individuals.
Explore more!
Discover our curated AI Design Content:
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hey there.
0:09
My name is Dan and welcome to our workshop
mastering AI assisted design with ChatGPT.
0:10
This video is tailored for everyone.
0:16
Whether you're a student, a professional
designer or simply intrigued by AI.
0:18
Today, I'll show you how to use chat
GPT as an additional team member,
0:23
offering another set of eyes
on your design projects.
0:26
We're focusing on ChatGPT-4V, and advanced
version that brings new capabilities,
0:29
allowing ChatGPT to see, hear and
engage in conversations.
0:34
Much like a fellow designer, we'll explore
how ChatGPT can provide targeted feedback
0:38
on our work, assist in crafting
compelling copy for our designs, and
0:43
even conduct a thorough
competitive analysis.
0:47
If this sounds interesting,
then let's jump right in and get started.
0:49
Now before we dive in, I wanna add
a disclaimer that ChatGPT Model 4V and
0:54
its capabilities to provide feedback
on uploaded images is currently only
0:58
available to users with a pro account.
1:02
This may change in the future,
of course, but as it stands now,
1:05
you do need a paid plus subscription
to access these features.
1:08
But with that said,
we're ready to get started.
1:11
For our first example, let's discuss how
ChatGPT can assist with design critiques.
1:15
Design critique are an essential
part of the design process where
1:19
constructive feedback is given to evaluate
and improve the effectiveness of a design.
1:22
So what exactly ChatGPT do for you?
1:26
Well, it can provide valuable
insights into your designs,
1:29
highlighting their strengths and
weaknesses.
1:32
It can even help you grade your
projects based on design principles and
1:34
offer suggestions for improvement.
1:37
These insights will not only help you
understand what you did right, but
1:39
also enable you to communicate your
design decisions more clearly and
1:42
effectively to stakeholders.
1:46
I'll start by uploading my design.
1:47
It's a website designed for
fictional photographer Thomas Wells.
1:49
Then I'll use the prompt.
1:52
You are an expert in UX design and
research.
1:54
I want you to review the design of this
portfolio website for a photographer.
1:56
I want you to be ruthlessly harsh and
show all the fallacies, errors, and
2:00
issues that put a damper
on the user experience.
2:04
I'm using the command you
are an expert in UX Design and
2:06
Research in my prompt to help
ChatGPT narrow its focus.
2:09
It's been trained on
a vast amount of data, and
2:12
this will prevent the need to
tap into all of that data.
2:15
Here is a brief look at
the design ChatGPT is critiquing.
2:17
It's quite simple for the most part
featuring a header and hero section,
2:20
an about section, a gallery for
Thomas to show off his work.
2:24
A testimonial to show that he does
quality work, a contact section, and
2:27
a website footer.
2:31
ChatGPT has already started critiquing my
design, starting with the Visual hierarchy
2:32
and Layout, before moving on to the
Consistency and Readability of the design.
2:36
But I'll skip ahead, and we'll come
back to ChatGPT's finished response.
2:40
All right, ChatGPT kicks off with a heads
up that the Captivating Landscape section
2:44
packs a visual punch, potentially
eclipsing the site's navigation,
2:49
risking users missing it completely.
2:52
It also flags that both the Medium length
section, or the About the Site section,
2:54
and the Gallery are filled with
placeholder text that need addressing.
2:59
Further, it highlights a clash
between sans-serif and serif fonts,
3:02
impacting consistency and readability.
3:06
On the Navigation and Accessibility front,
3:08
it notes that the menus blend menu
label and the buttons need clarity.
3:11
I absolutely concur there.
3:14
Regarding Branding and Identity,
3:16
it comments that the branding elements
feel somewhat run of the mill.
3:17
It doesn't stop there touching upon
Call to Action, SEO, Social Proof and
3:21
Testimonials, contact details,
Responsive Design and Aesthetic Appeal.
3:25
Essentially, it covers a spectrum of
areas providing a slew of suggestions and
3:30
critiques to help you produce
your best work possible.
3:35
But let's move on to our second demo.
3:38
Next, let's talk about generating content.
3:41
Ever struggle with fitting
text perfectly in your design?
3:43
With ChatGPT,
you can upload your mock-up and
3:46
get tailor-made copy that fits just right.
3:48
You see,
when generating copy without a design,
3:50
you may end up with content
that is too long or too short.
3:53
Instead of simply trying your luck with
regenerations, you can show ChatGPT
3:55
your mock-up and ask for it to provide
copy that fits the intended sections.
3:59
This approach can help ensure that the
generated copy aligns with the design and
4:03
layout of your project,
avoiding issues such as overly lengthy or
4:07
insufficient content.
4:11
I'll start by uploading my web design for
Thomas Wells again.
4:12
As Chad GPT mentioned,
we have some sections with lorem ipsum, so
4:15
let's fix that with this prompt.
4:18
You are in Expert in UX copywriting,
I need your expertise to replace the lorem
4:19
ipsum and placeholder text in
my design with effective copy.
4:24
Please focus on enhancing
the user experience.
4:27
For each section where the placeholder
text is currently used,
4:29
provide copy that fits
within the same space.
4:33
Specify the context or
purpose of each section, like homepage,
4:35
product description,
call-to-action, etc, so
4:38
the copy aligns with the intended
user interaction and design goals.
4:41
And just as we've come to expect, ChatGPT
starts to work on the task I've given it.
4:48
Let's skip ahead and review the results.
4:52
ChatGPT starts with the Hero Section and
suggests a headline that reads,
4:54
Discover the World Through My Lens,
with a paragraph,
4:58
immerse yourself in the stunning
vistas captured by Thomas Wells.
5:01
Journey through the mountains, forests,
5:04
and rivers that tell a story of
nature's unparalleled beauty.
5:06
Connect with the world in every shot.
5:10
And for my medium headline section,
it suggests a headline of
5:12
Crafting Your Perfect Shot with
a follow-up paragraph that reads,
5:15
every image tells a story.
5:18
Let's make yours unforgettable,
not bad at all in my opinion.
5:19
And if we continue to
check out the results,
5:23
we can see we were provided with
a copy for the entire site.
5:25
But let's take a look at how my original
design looks with the results ChatGPT has
5:28
generated.
5:32
All right for the hero section, I kept
my original headline and the paragraph
5:33
text the same as ChatGPT's provided
copy didn't really fit in this design.
5:37
However, for the next section,
Crafting Your Perfect Shot, and
5:40
the accompanying paragraph,
it worked beautifully.
5:43
I feel like this text fits the space
perfectly and complemented the design and
5:46
the context.
5:50
Next we have the Gallery section.
5:50
Once again, this text worked out as well.
5:52
It makes sense, fits the context,
and fits the design well.
5:54
And down here in the contacts section I
added the Let's Connect in this ready to
6:01
capture the perfect moment paragraph,
which also came from ChatGPT.
6:05
So three of the four sections got updated,
and in my opinion,
6:09
the design looks and flows better.
6:12
But that'll do it for this demo.
6:14
Let's move on to our next one.
6:16
Now, let's switch gears and see if we can
digitize our design thinking sessions.
6:19
Imagine staring at a wall of sticky notes,
brimming with ideas and insights.
6:23
But how do you capture these
fleeting explorations and
6:26
turn them into actionable insights?
6:29
This is where ChatGPT steps in,
6:31
ready to transform your analog
musings into a digital goldmine.
6:33
Let's see how.
6:36
I'll start by uploading this image
of digital Post-it notes, but
6:37
you can upload an image of real
Post-its and it'll work just as well.
6:40
These Post-it notes are insights from
users who were surveyed about their
6:44
shopping habits when it came to their cat.
6:47
This is from our workshop,
creating an affinity diagram,
6:49
which I'll link below in case you
wanna check it out after this video.
6:52
Then I'll enter my prompt.
6:55
You are an expert,
UX designer and UX strategist.
6:57
Please review this image and perform an
affinity mapping exercise using the data.
6:59
I know you can't create new sticky
notes or organize them, but
7:03
please perform the exercise
using text lists.
7:06
Thank you.
7:09
I added the last bit so ChatGPT knows
to create a site map in text format, or
7:10
else it might try to use its image
generating capabilities to generate
7:14
an image of a site map.
7:18
Only this image will be illegible and the
text will be gibberish, since DALL.E 3,
7:19
the image generation model behind ChatGPT,
7:23
can't handle more than
a handful of words at a time.
7:25
But let's skip ahead to
review the full results.
7:28
ChatGPT has started by digitizing and
7:30
grouping the insights from our post-its in
several categories such as ownership and
7:32
food preferences, purchasing habits,
treat preferences, quality of food and
7:37
ingredients, trust and brand perception,
health and diet, and plenty more.
7:42
It then provides a summary
with several bullet points.
7:46
The summary highlights diverse
aspects of cat feeding practices,
7:49
including the variation in meal sizes and
types due to different cat needs.
7:52
Contrasting purchasing preferences with
some favoring online convenience and
7:56
others supporting local businesses or
preferring larger chains for
8:00
their selection and rewards.
8:03
It also notes different attitudes towards
treats, with some owners regularly
8:04
including them while others do not,
often influenced by the cat's interest.
8:08
The awareness of quality and
ingredients varies among owners,
8:12
indicating a possible divide in education
or concern levels about pet food quality.
8:16
Additionally, health consciousness plays a
significant role in purchasing decisions,
8:20
often guided by veterinary advice.
8:25
And consumer behavior trends show a move
towards more personalized health-focused
8:26
pet foods, and
an increase in online shopping.
8:30
Next, I'll prompt ChatGPT to
identify themes and patterns.
8:33
Next, you would sort these individual
notes into groups based on their
8:37
similarity and content or theme.
8:40
Synthesize Findings.
8:42
With the groupings refined, you would then
synthesize the findings to draw insights.
8:43
Actionable steps.
8:48
Finally, you would translate these
insights into actionable steps for
8:49
design or strategy.
8:53
And just like that ChatGPT says it will
begin identifying themes and patterns,
8:57
synthesize findings and
translating these into actionable steps.
9:02
Perfect.
9:06
Let's skip ahead and
review what it came up with.
9:07
The themes and patterns identified in
the study encompass a range of cat owner
9:10
behaviors and preferences.
9:14
Diverse feeding habits are evident
with variations in the type and
9:15
frequency of feeding influenced by
the number of cats and their sizes.
9:19
Purchasing preferences show a balance
between the convenience of online and
9:22
grocery store purchases and
support for local businesses.
9:26
There's a dichotomy between owners
who scrutinize labels for quality and
9:29
those who prioritize convenience or
vet recommendations.
9:33
Treats are used in various ways from
training aids to emotional bonding tools.
9:36
Health and Nutrition are significant
factors for some owners.
9:40
Influenced by vet advice and
quality ingredients.
9:43
Emerging trends include a rise in DIY
pet food, functional pet foods and
9:46
online shopping reflecting
changing consumer behavior.
9:50
Cost and value perception also play
a role affecting brand loyalty and
9:53
shopping habits.
9:58
Synthesized.
9:59
Findings suggest that customization
is key for pet owners,
9:59
who also demand transparency
in ingredients and quality,
10:02
often relying on expert opinions
like vet recommendations.
10:05
The divide between the convenience of
online shopping and the experience of
10:08
in-store shopping, with its rewards and
selection benefits, is notable.
10:12
There's a market for health-oriented
products, aligning with the trend
10:16
of treating pets as family members and
seeking the best health outcomes.
10:19
Educational opportunities exist to
inform pet owners about nutrition and
10:23
ingredient quality.
10:27
Actionable steps for UX design or strategy
include developing personalization
10:28
features for product recommendations.
10:32
Enhancing trustworthiness through clear
information about ingredients and
10:34
quality standards, optimizing online
shopping experiences, enhancing
10:38
in-store experiences with loyalty programs
and personalized recommendations.
10:42
Creating tools for informed decisions
about pet nutrition and health,
10:46
marketing strategies for
DIY and functional foods.
10:50
And clearly communicating
the value proposition of products,
10:53
especially as cost consciousness
rises among pet owners.
10:56
Wow, ChatGPT has done an outstanding job
at analyzing our user data and providing
10:59
rich insights and actionable next steps,
but let's perform one last task.
11:03
I'll ask ChatGPT, can the actionable
insights be rewritten to be focused on
11:08
how to improve the UX of the website
according to these findings?
11:11
Of course it can, let's skip ahead and
review my latest generation.
11:15
ChatGPT has provided a list of awesome
actionable next steps starting with,
11:19
customizable product recommendations.
11:24
Implement a dynamic recommendation engine
on the website that suggest products based
11:27
on user input or
quiz results regarding pet size,
11:31
number, dietary restrictions,
and preferences.
11:34
Transparent ingredient information,
enhance product pages with detailed
11:37
ingredient lists and
quality certifications,
11:41
including pop-up explanations or
a glossary for transparency and
11:43
incorporating vet endorsements or
user ratings focused on health benefits.
11:47
Streamlined online shopping experience
simplify the purchasing process with easy
11:51
navigation and a quick, secure checkout.
11:56
Introduce the subscription model for
automated monthly deliveries,
11:58
customizable to changing needs,
rewarding in-store experience online.
12:01
Develop a virtual loyalty program offering
points for purchases, reviews, or
12:05
referrals, and use augmented reality, AR,
or virtual tours to simulate the in-store
12:09
shopping experience, allowing users
to explore products and offers.
12:13
Educational content integration, create
a resource hub featuring articles, videos,
12:17
and infographics on pet nutrition and
food quality, including webinars or
12:22
Q&A sessions with veterinarians.
12:26
Highlighting emerging trends and
DIY options,
12:28
dedicate website sections to emerging
trends like functional foods, and
12:31
DIY meal kits, and offer tools for
creating custom pet food blends.
12:35
Clear value propositions,
display cost per serving or
12:39
price comparisons to articulate value and
highlight the long-term benefits of
12:42
quality food, such as potential savings
on vet bills, to justify premium pricing.
12:46
User-generated content and
community building, encourage and
12:51
feature user reviews, testimonials, and
pet stories to foster trust and community,
12:54
and implement social features for
sharing Pet progress or
12:58
achievements related to the food products.
13:01
Mobile optimization and accessibility,
ensure the website is fully optimized for
13:04
mobile devices and
adheres to accessibility standards,
13:08
allowing all users, regardless of ability,
to navigate and access information easily.
13:11
I think ChatGPT has hit another
home run with this response,
13:17
as several of these actionable steps
are sure to improve the overall user
13:20
experience of a pet brand's website.
13:23
I'm still blown away to be honest,
but let's move on to our next demo.
13:26
Did you know ChatGPT can compare your
design with your competitors and
13:30
give you a thorough competitive analysis?
13:33
To provide a competitive analysis using
ChatGPT, you can start by showing the AI
13:36
your design, along with
the designs of a few competitors.
13:40
Then you can prompt ChatGPT to provide
a full competitive analysis based
13:44
on the visual aspects, language used,
information architecture, and
13:47
overall design of the competing
products or services.
13:51
This analysis can help you
understand the strengths and
13:55
weaknesses of your competitors designs,
identify industry standards and
13:57
best practices, and gain insights that
can be used to improve your own design.
14:00
Competitive analysis is a crucial step in
the design process, allowing you to create
14:05
a better user experience and
stand out in the competitive market.
14:09
For this demo, we're going to pretend
we're working with the clothing brand
14:13
Old Navy as a web design client.
14:16
And we want to create a competitive
analysis to compare the Old Navy site with
14:18
two of their competitors, H&M and ASOS.
14:22
I've downloaded screen captures
of all three websites, and
14:25
I will provide them to ChatGPT
along with the following prompt.
14:28
You are an expert researcher in the UX
design field, using the provided
14:31
screenshots of the ecommerce websites,
oldnavy.com, hm.com, and
14:35
asos.com perform a competitive analysis
focusing on the following categories.
14:39
Visual appeal, navigation, promotions,
user engagement, and additional features.
14:44
Summarize the findings in
a comparative table format.
14:50
Highlight key design elements,
user interface, calls to action,
14:53
promotional offers,
14:56
and any distinct features that can impact
the user experience and brand perception.
14:57
Provide observations that can be discerned
from the visuals alone, and make note of
15:01
any aspects that require further in-depth
analysis beyond the provided images.
15:06
All right, ChatGPT is starting
on our competitive analysis.
15:10
And I'll just scroll up to show we've
included three images, one of each site,
15:13
but let's skip ahead to the finished
results to see how ChatGPT did.
15:17
In the competitive analysis, ChatGPT
reports that ASOS showcases a clean,
15:21
modern aesthetic with a minimalist
color palette, high-quality images,
15:25
and a clear brand identity.
15:30
The website has a user-friendly
top navigation bar and
15:32
offers promotions like promo codes and
student discounts.
15:34
Old Navy adopts a bright,
colorful aesthetic with upfront pricing,
15:38
and it makes the fonts offering
a family friendly vibe.
15:41
Their site has clear navigation and
emphasizes price focused promotions.
15:45
H&M presents a sophisticated look
with a muted color palette and
15:48
high-fashion photography,
promoting a premium feel.
15:52
Their website has
the simplified navigation and
15:56
focuses on brand experience
promotions rather than price.
15:58
ChatGPT then provides key observations,
16:02
such as ASOS having urban contemporary
imagery catering to a young,
16:04
trendy audience, with promotions
aimed at cost-conscious shoppers.
16:08
Old Navy's visual strategy is bright and
playful, appealing to a wide demographic
16:12
seeking affordable fashion, with
a focus on clear pricing and discounts.
16:17
H&M portrays an upscale,
designer-inspired image,
16:21
with a promotion strategy more
centered on the brand experience,
16:23
potentially attracting customers
seeking affordable quality and style.
16:26
Just think, if this type of research and
analysis was done manually,
16:30
it would take hours.
16:33
But let's move on to our
final demo in this workshop.
16:35
Envision a whiteboard or a notebook filled
with intricate sketches and detail notes,
16:38
all part of a creative
brainstorming process.
16:42
The challenge lies in preserving
these valuable thoughts and
16:44
transforming them into
actionable insights.
16:47
This is where ChatGPT comes into play,
offering a seamless way to convert
16:50
your analog ideas into
a structured digital format.
16:54
Let's explore this transformation.
16:58
I'll start by uploading two pictures
I took of a whiteboard exercise from
17:00
an old project.
17:04
In this project,
I was designing a landing page or
17:05
one-page website to promote
a service I was offering,
17:07
where I would turn people's
podcasts into Amazon Alexa skills.
17:10
Next, I'll provide ChatGPT with my prompt.
17:14
Can you digitize my notes in this wire
frame design by creating a text-based site
17:17
map based on the content in the image?
17:21
Also, can you create a secondary site map
that incorporates the data from the second
17:23
image in the reasons why section?
17:27
And like normal ChatGPT
instantly tackles my request.
17:30
Let's jump ahead and review its results.
17:33
In this first site map, ChatGPT has
created a site map based off of the first
17:36
image, which was a photo of
a low-fidelity wireframe.
17:40
It has done a great job of
transferring my writing into type and
17:43
creating a sitemap that follows
the same format as my design.
17:45
In the second wireframe, ChatGPT has
iterated on the bullet points provided
17:49
under the reasons why section,
using the insights I
17:53
had written out on the whiteboard
in the second image I uploaded.
17:55
Pretty cool, right?
18:00
It's included new bullet points like voice
speakers are in 13% of homes in 2017 and
18:01
expected to be in 55% of homes by 2020,
and one in six have a voice speaker.
18:06
However, when we go back
to my uploaded image,
18:12
you'll notice the bullet points should
have been in 13% of homes in 2017 and
18:14
expected to be in 55% of homes by 2022,
not 2020.
18:19
There are also a few other small
discrepancies as well, such as 35.6
18:22
million users use a smart speaker once
a week when it should be once a month.
18:26
As always, you wanna double check your
results as ChatGPT isn't always a hundred
18:30
percent accurate.
18:34
Plus, I'm sure my handwriting doesn't
help, but still the point remains.
18:36
Now let's go back to the top and
18:41
I will show you my images to prove
ChatGPT pulled these insights from them.
18:42
Here's the image of extra bullet points.
18:46
As you can see the bullet points,
13% of homes in 2017 and
18:48
one in six homes own a voice
speaker are featured in this image.
18:52
And in the first image, we have my
very crude low fidelity wire frame.
18:56
Now is that awesome are what?
19:00
But I'm not done yet, let's have ChatGPT
take this sitemap of my wireframe and
19:02
generate copy for it, I'll use the prompt.
19:06
Can you generate the copy for
the landing page based off our sitemap?
19:09
And you know what's coming next.
19:13
ChatGPT begins going all out to
produce my landing page copy.
19:15
I'll skip ahead and
we'll see what the chatbot came up with.
19:18
ChatGPT starts by providing a headline,
and it's the same that we had before.
19:21
Turn your podcast into an Alexa skill
with a subheading of harness the power
19:26
of voice.
19:29
I guess that would be the headline for
this section or possibly a tagline.
19:30
Next, it provides a section headline,
why voice, why now?
19:35
Engage with your audience
like never before.
19:39
With body text that says, voice technology
is rapidly becoming a part of daily
19:41
routines with a significant spike
in usage every holiday season.
19:46
By integrating your podcast with Alexa,
19:50
you tap into the growing trend that is
shaping the future of interactive media.
19:52
I really liked that paragraph and
the way it came out,
19:56
that was really insightful and convincing.
19:59
It then goes on to provide the bullet
points that we provided, and it says,
20:00
leverage the momentum of voice
technology to grow your audience and
20:05
establish a presence in
the homes of millions.
20:08
Again, I really like that as well.
20:11
And then it moves on to
a how does it work section,
20:13
where it promotes seamless integration for
your content.
20:15
And it says, our process is
straightforward connecting your podcast to
20:18
Alexa through popular platforms like
Libsyn, Soundcloud, and Anchor,
20:22
all those I mentioned
in the original sketch.
20:25
So that's really awesome.
20:28
Then it has voice statistics and
explains that we can offer statistics for
20:29
each skill and a section for testimonials.
20:33
And then, ready to amplify your reach.
20:35
Let's get started today.
20:38
Join the voice revolution.
20:39
Bring your podcast to
life with a with Alexa.
20:40
And finally, an Order Now button.
20:43
Overall, really, really great stuff.
20:45
This is high-quality copy that's
definitely going to help my
20:47
website convert.
20:50
So there you have it,
20:54
we've explored just a few ways ChatGPT can
become your trusty AI design companion.
20:55
It can analyze designs, craft copy,
unlock insights from your notes, and
21:00
even help you understand what
your competitors are doing.
21:04
Remember, ChatGPT is a tool,
just like a brush or a pen,
21:08
it enhances your skills,
it doesn't replace them.
21:12
Use it to explore, experiment, and
push your creative boundaries.
21:16
The more you use it, the more you'll
discover its potential to streamline your
21:20
workflow and elevate your design process.
21:23
Ready to embark on your
AI-powered design journey?
21:26
Here are some next steps.
21:29
First, create your own Open AI account for
free and try ChatGPT for yourself.
21:30
Next, check out some more
of our AI content for
21:36
designers in the teacher's notes.
21:38
And lastly, join our discord community to
participate in the conversation around AI.
21:40
The link to join will also be included
in the teacher's notes below.
21:45
Until next time, friends, happy designing.
21:49
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up