Transcripts
1. Introduction: Holi guys, are you interested
in using AI for UX design, UX research and UX writing? If the answer is yes, then this course
might be for you. Firstly, we are going to
create user persona and user story using Boardmix
and Fike Jam. Look at this. Next, we are going to create grocery delivery
app wireframe using UX Pilot and Google
Stitch. Look at this. Then after that, we
are going to create grocery delivery app prototype using Uizard and Visily AI I. In addition, we
are also going to visualize how the user will
interact with it spade. For example, if the user
click on the tracking button, he will be redirected to
the order tracking page. If he click on the
Analysis button, he will be redirected to
the spending Analysis page. Next, we are going to create a sitemap using
Relume. Look at this. Next, we are going to create a user flow diagram using Miro, and we are also going to create user journey map using Eraser. Look at this. After we
are done with UX design, we are going to move
on to UX research. We are going to create user interview
equations using Sprig. Then after that, we
are going to conduct usability testing simulations
using Gemini and UX Pilot. So we are going to
upload a UI image, and AI is going to assess the
usability of this product. Next, we are going to analyze user behavior using
Microsoft Clarity. We will be able to see recording how the user
interact with your app, what buttons they click, and what challenges they are
facing when using your app. Next, we are going to analyze UX research data
using Julius AI. So we're going to upload
a CSV file and AI is going to automatically
analyze the data, perform sentiment
analysis, generate valuable insights and
actionable recommendations. And to visualize the
UX research study, we are going to create
affinity diagram using Miro and Edraw
AI. Look at this. We are going to write microcopy using Mistral AI and Manus. We are also going to improve existing UX copy using
ChatGPT and Cloud.
2. Creating User Persona and User Story with Boardmix & Figma: Hi, guys. Welcome
back to the course. In this video, we
are going to create user persona and user
story using two AI tools. The first one is Boardmix
and the second one is ICMA. We are going to use this grocery delivery app as an example. As you guys can see, I have created simple UI design
using Google Stitch. This app has three
main features. The first feature is AI powered grocery
recommendation system. The second feature is
real time order tracking and delivery management. And the third feature is
grocery spending analysis. Look at this. The
reason why we want to create user persona
and user story because we want to know who will be
the main target customer for this app and what are
they expecting from this app? Okay, let's get started. Let's click Log In. I'm going to log in
using my Gmail account. It is still loading. It
will take a few seconds. As you guys can see, I have
successfully logged in. And let's click this
new whiteboard. And you will be redirected
to the editing page. And let's use AI. So let's click this and
let's write the prompt. The prompt is going
to be very long, so make sure that you pay
very close attention. Create a UX user persona. For a grocery delivery app. With these three main fitters. The first fitter is EI Powered
Grocery recommendations. The second fitter is real time order tracking
and delivery management. And the third fitter is
grocery spending Analysis. Based on the persona create relevant user stories that describe the user's goal and needs when using these fitters. Using this format, we are going to provide the
user story format. As a user, let's put user
inside the break it. I want to let's
put actions inside the brake so that let's put
benefit inside the break it. Only include user
persona and user story. And I'm going to add
one more sentence. The expected format is structured UX user
persona template. So that's going to be
the expected format. Additionally, you can upload
any image that you want, click this and you can select any AI bottle
that you want to use. There are two options
Cloud and GPT, and you can also add
additional sources. So just click this and you
can activate the websarch, but I don't think it is
necessary in this case. Let's click Generate. The process is going to take approximately ten or 15
seconds. So just wait guys. Hopefully it doesn't
take too long, and I'm so excited
to see the result. Well, it didn't take too long. It only took 15 seconds or
even less than 15 seconds. And actually, the output is more detailed than I expected. Okay, here is the user persona. Her name is Sarah Chen. So this is a
fictional character. This is not a real person. She is 34-years-old.
She is female. She works as a marketing
manager at a tech startup. Her annual income is $85,000. Her education is bachelor degree in business administration, and she lives in Seattle. Okay, so we have
behavioral characteristics like use its scenarios, use its frequency,
consumption habits, decision making behavior, psychological
characteristics like values, emotional needs, life
attitudes, preferences needs, goals and motivations,
short term goals, long term goals, actions, motivations, pinpoint
and needs, user journey. Well, actually, we're going
to cover user journey later. So we are not going to be
focusing on user journey, and we also have common
tools and media. Okay, now let's read
the user story. For the first fitter AI Power grocery
recommendation model. As a busy professional, I want personalized
product suggestions based on purchase
history so that I save time browsing and discover relevant
items efficiently. Okay, let's rate the user
story for the second fetter, real time order tracking
and delivery management. As a time conscious
professionals, I want real time
GPS tracking with accurate delivery windows so that I plan my
schedule reliably. And let's rate the
user story for the third fetter, grocery
spending analysis. As a financially aware shopper, I want comprehensive spending daskbard with category
breakdowns and trends so that I monitor budget adherents and identify optimization
opportunities. Okay, so that's
the user stories. If you want to download
this, it is very easy. Just click this and
just click Image. You can download this image
as PNG or JPEG format. Next, we are going to create user persona and user
stories using FICMA. So let's log in. I'm going to log in using
my Gmail account. I will take few seconds, maybe five or 10 seconds. As you guys can see, I have
successfully logged in, and we are going to use FikYam. So let's click this FikYam and you will be
redirected to this page. And we are going to
use the AI feeder. We're going to use
the same prom. So let's copy and
paste the prom, and let's click Make. The process is going to take approximately 10 seconds.
So just wait, guys. Hopefully it doesn't
take too long. As you guys can see, AI is generating the user
persona and user story. Look at this. Well, it didn't take too long. It only took 10 seconds or
even less than 10 seconds. Okay, let's rate
the user persona. Her name is Maya Chance
is 34-years-old, Ss a busy professional parent. Let's rate her big run. Says a marketing manager, mother of two lives in a midsized city suburb
and these are her goals. Save time on weekly
grocery runs, stay within a monthly
grocery budget, eat healthier without
spending hours planning meals and know exactly when her delivery arrives. And these are her pain points, forgets recording household
staples until they run out, over spends on groceries
without realizing it, anxious about delivery
windows when coordinating childcare and decision fatigue when browsing large
product catalog. Again, this is just a
fictional character. This is not a real person. Okay, now, let's read
the user's story. For the first fitter AI powered
grocery recommendations. As a busy parent, I want the app to
suggest items based on my past purchases so that I don't forget household staples. For the second fitter, real time order tracking
and delivery management, as a working parent, I want live delivery
tracking on a map so that I know exactly when to
be home to receive my order. And for the third fitter, grocery spending analysis,
as a household manager, I want to set a monthly
grocery budget and get notified when I'm approaching it so that I can
avoid overspending. Okay, guys, so that's
the user story. If you want to
download this image, just click this and
just click Export, so file and exports, and you have four options. You can export this as PNG, JPG, PDF or CSV. I'm going to select PNG
and let's click Export. It will take few seconds. Okay, guys, I think that's it. That's all you need to know. I'll see you guys in
the next video. Bye.
3. Designing Wireframe with UX PIlot & Google Stitch: Holi guys. Welcome
back to the course. In this video, we
are going to design app wireframe using
two AI tools. The first one is UX Pilot and the second one
is Google Stitch. Let's rate the case study. We are designing a grocery
delivery app that helps users discover groceries through AI powered grocery
recommendations, track their orders with real
time order tracking and delivery management and manage their budget through
grocery spending analysis. The first step is to
define the user task. So in this case,
the user wants to find AI recommended groceries, purchase them,
track the delivery, and review their
grocery spending. And the second step is to
identify required screens. So based on this task, we need these following screens. Home screen, product
detail screen, Cort and checkout
scrintOder tracking screen, and spending analysis scrint. Okay, let's get started. We're going to use UX Pilot. Firstly, you will
need to log in. You can log in using your
Gmail account and just click product and just click
AI wireframe generator, and you will be
redirected to this page. Okay, now we are going
to write the prompt. Create a oi LT wireframe for a grocery delivery app. With five strands. The first one is home screened. The second one is
product detail. The third scrant is
cord and checkout. The third scrint
is order tracking. And the fifth scrint
is spending analysis. Include AI Power grocery
recommendations. Grocery browsing. Product informations. Card and check out
functionality. Real time delivery tracking. And grocery spending analysis. Use simple gray scale layouts. Basic boxes, lines,
text placeholders, and minimal UI elements. Focus on informations hierarchy. Content structure,
functionality, and navigations. Rather than colors, typography branding images or
visual styling. Okay, guys, this is my prom. You can use my prom or you
can also modify my prom. It is totally up to you.
And let's click this. And let's select
mobile because we are designing wireframe
for mobile app. And let's click
Generate wireframe. It will take a few seconds, maybe ten or 20 seconds.
So just wait, guys. Hopefully it doesn't
take too long, and I'm so excited
to see the result. Well, it didn't take too long. It only took 20 seconds or
even less than 20 seconds. As you guys can see, AI has
generated five screens. Look at this. So the first
screen is the home screen. So we have the AI
powered recommendations. Look at this, shop by category, and here is the second
screen, the product details. We have product image, price, quantity descriptions,
nutrition information, and also add to card button. Here is the third
screent card and checkout we have order summary
and Place Order button, and here is the fourth
screen order tracking. So we have the map
and also the T ask themions and here is the last
screen spending analysis. We have the monthly trends spending by category,
AI insights. Okay, very cool. If you
want to download this, you need to select
which screen that you want to download and just click Export and you can export
this screen to FITMA. You can also export this
as as DML code or PDF. And just click this
Export One Scrant. Next, we are going to
try the second AI tool. The name of the tool
is Google Stitch. Firstly, you will
need to log in. You can log in using
your Gmail account, and we are going to
use the same prom, so you can copy and
paste this prompt. And make sure to select
app because in this case, we are going to deside
a wireframe for a mobile app. And
just click this. You can select speed. If you want to use
Gemini 3.5 model. You can also select
balance if you want to use Gemini
3.8 flash model. It is totally up to you. You
can use any model that you want and just click Generate. The process is going to take
approximately 30 seconds. So just wait, guys. Hopefully
it doesn't take too long. Well, it didn't take too long. It only took 20 seconds or
even less than 20 seconds. AI has generated
these five screen. So the first one is the
home screen. Look at this. We have desserts functionality, categories, AI recommendation
assistant. Look at this. The second screen
is product details. We have product image, price, nutritions, and also
add to card button. The third screen is
card and checkout. So we have the shopping
cart delivery details. Order summary and
Place Order button. The first screen is the
real time order tracking. We have the map and also
the time estimations. And the fifth screen is spending
analysis. Look at this. We have the statistics spending by category
AI spending insights. If you want to
download this image, just right click and
just click Download. As you guys can see, we have successfully downloaded
this wireframe. Look, guys, I think that's it. That's all you need to know. I'll see you guys in
the next video. Bye.
4. Designing Prototype with Uizard & Visily AI: Holidays. Welcome
back to the course. In this video, we
are going to design a prototype using two AI tools. The first one is Uizard and
the second one is Visily AI. Let's get started. I'm going to log in
using my Gmail account, but you can also log in using
your Microsoft account. Let's click this I
will take few seconds. As you guys can see, I have
successfully logged in. And let's click this
generate with Auto Designer, and you will be
redirected to this page. Firstly, you will need to select which device you
are designing for. There are three options
mobile tablet and desktop. Let's select mobile and
let's write the prom. Okay, I'm going to copy
and paste the prom, and let's read the prom. Create an interactive
prototype for a grocery delivery app
with home product details, cord and checkout order
tracking and spending analysis. Focus on connecting screens, creating clickable
interactions, and defining navigations
for key user tasks. You can use My Prom or you
can also modify My Prom. It is totally up to you,
and let's continue. And let's select Pm. Now you will need to describe your preferred style
for your project. Simple app prototype. And just click this
Generate My Project. Okay, now, AI is going to
generate the prototype. It will take a few seconds, maybe ten or 20 seconds. So just wait guys. Hopefully
it doesn't take too long. Well, it didn't take too long. It only took 15 seconds or
even less than 15 seconds. As you guys can see, AI has generated multiple
screens. Look at this. We have the welcome screen, sign up page, home screen, product details, card, order
status, and statistics. This is the grocery
spending analysis fitter. Next, we are going to click this intrag so you will be able to connect
one page to another page. And this tool is going
to be very useful for UX design
because you will be able to visualize how user
will interact with this page. Let's click Interact again and make sure that you
show all interactions. So let's turn this on. As you guys can see,
we have its line represents interactions
between its page, for example, once the user click
Create Account, then he will be redirected to the home screent if he
clicks on Shop button, he will be redirected
to the sign up page. And if he clicks on Check Out, then he will be redirected
to Order Status. These are just examples, guys. Okay, now we are going to
try the second AI tool. The name of the tool
is physically AI. Let's log in. I'm going to log
in using my Gmail account. As you guys can see, I
have successfully log in and let's click Create and
let's click Create with AI. In this case, we are going
to use the same prom. So let's copy and paste this. You can use my prom or you
can also write your own prom. It is totally up to you. And let's click Generate. The process is going to take approximately ten or 15
seconds. So just wait, guys. Hopefully it doesn't
take too long, and I'm so excited
to see the result. Well, it didn't take too long. It only took 10 seconds or
even less than 10 seconds. And just click this
at all to board. As you guys can see, AI
has generated five pages. So here is the home
screen, product details, card and checkout, order
tracking and spending analysis. And let's click prototype. So we have all these lines
connecting each page. For example, if the
user click on Analysis, then he will be
redirected to this page. If the user click on tracking, then he will be
redirected to this page. If you want to download this, just click Export and just
click Export to image or PDF and just click this. Okay, I think that's it. That's all you need
to know. I'll see you guys in the next video. Bye.
5. Creating & Designing Sitemap with Relume: Holidays. Welcome
back to the course. In this video, we are going to create design sitemap
using Relume. And don't worry this tool
is completely free to use. Let's click on pricing. As you guys can see,
Relume offers a free plan. Look at this. Okay, let's get started. I'm going to log in. Let's click this, and I'm going to log in using
my Gmail account. So let's click
Continue with Google. It will take a few seconds. As you guys can see, I have
successfully logged in. Okay, now let's click
on New Project, and you will be
redirected to this page. And you have four
options sitemap, wireframe style
guide and design. Make sure to select sitemap. Because in this
video, we are going to create a design sitemap. So let's click this. Next, we are going
to write the prom. In this example, we are
going to create a sitemap for electric ficle
charging station finder. Let's write the prom. Create UX sitemap for EV or Electric Vical
charging station finder. That helps users find and physialize nearby charging
and parking locations. Including availability
and charging spit. The product should also support road optimizations to
selected charging locations. Oh and Q and wet list management. So this product has
three main fitters. The first fitter is to find
nearby charging locations. The second fitter is
the root optimizations, and the third fitter is Q
and weit leist management. Organize the sitemap around
clear informations hierarchy. Intuitive navigations
and user goals. Focusing on what information and functionality users need
rather than physical design. Look you guys, that's my prom. You can use my prom or you
can also write your own prom. It is totally up to you. For the number of pages
I'm going to select 2-5, and for the language, I'm going to select English. And let's click this
Generate sitemap. The process is going to take approximately ten or 20 seconds. So just wait, guys. Hopefully
it doesn't take too long, and I'm so excited
to see the result. Well, it didn't take too long. It only took 10 seconds or
even less than 10 seconds. Okay, here is the AI
generated sitemap. Let me zoom in a little bit. This is too small,
so let me zoom in. Okay, so we have the homepage. We have Navigation Bar, hero header sections,
fitter sections, how it works sections, statistics sections,
and most importantly, CTA or call to action sections. So we have three fitters, fine charger, road planner, and weight leis Queue. Look at this very
comprehensive, right? And we also have the
charger details sections. Okay, very cool, guys. If you want to
create a wireframe, you can also do it using
Relume click this and AI is going to automatically
generate wireframe for you. And you can also
export this to Figma. Just click this. You can
export this to Webflow. Just click this. Okay,
I think that's it. That's all you need to know. I'll see you guys in
the next video. Bye.
6. Creating User Flow Diagram with Miro: Hi guys. Welcome
back to the course. In this video, we
are going to create user flow diagram using Miro. Let's get started. Let's click Log Int. And I'm going to log in
using my Gmail account. Let's click Google. It will take a few seconds. As you guys can see, I
have successfully log in. And let's click this Create
New let's click board, and you will be redirected
to the editing page. Okay, here is the editing page. In this example, we
are going to create user flow diagram for electric vehicle charging
station finder app. Okay, let's write the prompt. Create UX user flow diagram. For EV or electric vehicle charging station finder app that focuses on the specific actions and decision points required to find and select
a charging station. Show the flow from searching for nearby chargers to
viewing station details. Checking availability and
selecting an available station. Include decision points and alternative path for
unavailable chargers. I'm going to add
one more sentence. Make sure the user flow diagram is easy to understand
and logical. Let's click this and you can activate the web
search. Just click this. You can also add skills for AI. You can add one of these skills, and let's click Generate. All right. Now, AI is going to generate the
user flow diagram. It will take approximately
ten or 15 seconds. So just wait guys. Hopefully,
it doesn't take too long, and I'm so excited
to see the result. Well, it didn't take too long. It only took 10 seconds or
even less than 10 seconds. Okay, here is the AI
generated user flow diagram. Let's click this
Apply to Canvas. Okay. Firstly, the user
will open the app. Then the app is going
to dett the location. It is also going to
search nearby stations. If charger is found nearby, then it is going to show the
stations list in the map. Then if the user
choose the stations, then it is going to open the
Fuse station detail page, and it is going to check if
the charger is available. If the charger is available, then it is going to
show charger details, and it is going to
enable user to select the charger and confirm
the selections. However, if the charger
is not available, then it is going to
display these messages. No charger available. Then it is going to
ask these questions. Try another station.
If the answer is yes, then it is going to go back here and show the
stations in the map. However, if the user says no, then it is going to set
the availability alert. And you might also
be wondering what will happen if no
stations found. Then it is going to
expand search radius, and it is going to retry to search the nearby
station again. So that's what is
going to happen. If you want to download
this, just click Export. You can save this as PDF. You can also export
this as image. Just click this and
just click Export. Okay, guys, I think that's it. That's all you need to know. I'll see you guys in
the next video. Bye
7. Creating User Journey Map with Eraser: Hi guys. Welcome
back to the course. In this video, we
are going to create user journey map using Eraser. And don't worry, this tool
is completely free to use. Let's click on pricing. As you guys can see,
it offers a free plan. Let's get started. Firstly, I'm going to log in. So let's click this. I'm going to log in using
my Gmail account, but you can also log in using
your Microsoft account. It will take few seconds. So just wait Okay, I have successfully logged in. And let's click this. Create a blank file, and you will be redirected
to the editing page. In this case, we
are going to create user journey map for electric vehicle charging
station Finder app. Okay, let's write the prompt. Create user journey map. For EV or electric vehicle
charging station finder app from the perspective of
electric vehicle driver. Who needs to find and use a
reliable charging station. Cover the complete experience, including finding nearby
charging stations. Checking availability
and charging speed. Optimizing the route,
arriving at the station, managing queues, and joining the wait list when necessary. And completing the
charging session. Include journey stages,
user actions, thoughts, emotion, pinpoints, and
opportunities for improvement. You can also upload
a file or image. Just click this, but I don't
think it is necessary. And I'm just going
to click Send. And now AI is going to
create the user journey map. The process is going to take approximately ten or 20
seconds. So just wait guys. Hopefully it doesn't
take too long. Well, it didn't take too long. It only took 10 seconds or
even less than 10 seconds. Okay, as you guys can see, AI has generated
user journey map. Look at this. Let me
zoom in a little bit. Let's get started
with the first step. Discover nearby charger. So in this case, the actions that will be taken by
the user are opening map allowing locations
filtering by connector network
price and amenities. And at this stage,
the user will think, What is reliably close
enough for my current range? And here is the pinpoint, outdated listing, and
unclear access restrictions. And here is the opportunity. Show life status confidence, access rules, and driver
verified details. And here is the second step, validate availability and spit. So in this case, the user will compare open plug
connector compatibility, kilowatt spit price,
and reason check ins. And the third step is
road optimizations. So the user will
select the stations, review the ETA and
battery on arrival, and start navigations
or just back up. Then the fourth step
is when the user arrive and connect the
charger to the car. And here is the fifth step, minutes queue or wait list. And the last one is
charge, pay and continue. If you want to download this
image, it is very easy, just click this and just
click Export and you can download this image as PNG
file and just click Export. Next, we are going to
try the second tool. We're going to use FikGAM. This is Figma AI fitter. Firstly, just log into Figma. You can log in using your
Gmail account and let's click FIGaM and you will be
redirected to this page. Let's click Brainstorm, and I'm going to copy
and paste the same prom. So let's use this prom. And let's click Make. Okay, now AI is going to
generate the user journey map. The process is going to take approximately ten or 15 seconds. So just wait guys. Hopefully,
it doesn't take too long. If you want to download this
image, it is very easy. Just click this and just
click Export and you can export this image as PNG
and just click this. Okay, I think that's it.
That's all you need to know. I'll see you guys in
the next video. Bye.
8. Creating User Interview Questions with Sprig: Holidays, welcome
back to the course. In this video, we are going to create user interview
equations using AI. The name of the tool that we
are going to use is Sprig. Let's rate the case study. Imagine you are a UX researcher responsible for
understanding how users manage and track their everyday expenses
using RCEP management app. The app uses OCR or optical character
recognitions and AI to capture recep information, organize spending data, and help user better understand
their purchasing habits. The app has three main features. First fitter is scanning
receipt using OCR. The second fitter
is automatically extracting product
prices and totals, and the third fitter is categorizing and
visualizing spending data. As part of the UX research plan, we will create multiple user interview equations
for each fitter. We will find relevant users who regularly manage their expenses and ask them to answer these questions to
understand their behaviors, needs, challenges,
and expectations. Okay, let's get started. Let's open this website. And I'm going to log in
using my Gmail account. Let's click this. It
will take few seconds. As you guys can see, I have
successfully logged in. Let's click New study. You have three options. You can start from scratch. You can copy from past study, or you can also create
from templates. There are many templates that
you can use and customize. But in this case,
we are going to use AI to generate the user
interview equations. Okay, let's write the prompt. Create user interview equations. For RCEP management app
with three main fitters. The first fitter is
scanning RCP using OCR. The second fetter
is automatically extracting products,
prices and totals. And the third fitter is categorizing and
visualizing spending data. The equation should help us understand the user
expense tracking habit. Challenges, needs
and expectations. When using these fitters. Include open ended
unbiased questions that encourage user to share their experience rather than leading them toward
specific answer. Okay, so that's my prom. You can use my prom or you
can also write your own prom. It is totally up to you. And now let's click Generate. Next, you will need to
choose a study draft. So AI has generated
three study draft. Here is the first
one, fitter use. Here is the second
one user needs, and here is the third
one Expense habit. I'm going to select
the first one, and let's click Continue. So here is the first question. How often do you use the app scanning and
categorization fitter? Here is the second question. What challenges have you faced when tracking expenses
with the app? And here is the third question. Which fitter do you find most valuable for managing
your receipt? Okay, so we have three
interview equations. So it is going to
look like this. How often do you use the app scanning and
categorization fetter? I'm going to select three. What challenges have you faced when tracking expenses
with the app? The button is too small. Well, this is just
a random example. Let's click Next. Which fitter do you find most valuable
for managing your receipts? I'm going to select
the second one, automatic extractions
of details, and let's click Finish. Okay, so that's how the
user interview works. Now let's click this continue to audience and let's click
website or web app. So we're going to
be able to embed these user interview
equations on our website. Let's click Targeting and
let's click at event or URL, and let's click event, and let's click New event, and let's click
Create Nocde event. Firstly, you will need to add the name, user
interview questions. Next, you will need
to add descriptions, user interview questions for Recep management app I'm
going to select the pads URL. For this example,
I'm going to use this URL, appspd.com
slash Survey. But if you want to use this
for your own app or website, make sure to use your
own link or URL. And let's click at Event. Okay, new event, save. And let's click studies. Let's click Save and continue. And let's click FitterU. Let's scroll down a little bit. You will be able to see
all responses right here. And it's going to
display the statistics. And on the right, you can
see the study preview, like what it looks like
from the user perspective. Okay, guys, I think that's it. That's all you need to know. I'll see you guys in
the next video. Bye.
9. Simulating Usability Testing with Gemini & UX Pilot: Holidays. Welcome
back to the course. In this video, we are
going to simulate usability testing
using two AI tools. The first one is Gemini and
the second one is UX Pilot. I have created sip
management app, UI design using Google Stitch. Look at this. We
have four pages. Homepage, recep
OCR scanner page, extracted recipe detail page
and spending Analysis page. So we're going to upload these images to Gemini
and we're going to let AI to assess the
usability of this product. We're going to let AI to play a role as the user
of this app and share his opinion about
the usability of this app. Is it easy to use or maybe not? Okay, let's get started. Firstly, we are going to
upload these four images. Let's click Open Okay, we have successfully uploaded
this for UI designs. Next, we are going
to write the prom. But actually, the prom is
going to be very long, so I'm just going to
copy and paste this. Okay, let's at the prom. Simulate usability testing for this recip management app from the perspective of a user who wants to record and
manage their expenses, evaluate how easily the user
can scan a receip using OCR, review automatically extracted
products prices and totals and a few categorized spending and spending
visualizations. Identify usability issues,
navigation problem, confusing elements and
potential friction points and provide actionable
recommendations for improvement. Okay, so that's my prom. You can use my prom or you
can also write your own prom. It is totally up to you. You can select Which AI
bottle that you want. I'm going to select
Gemini 3.5 flash light. And let's click Submit. It will take few seconds. Okay, here is the
usability testing result. Let's talk about
the first filter, scanning recipe via OCR. So we're talking
about this page. Here is the friction points. The screen is densely packed with status tags and
control toggles. This creates visual
noise that can overwhelm a user trying to
simply snap a quick photo, and here is the recommendations. Group secondary options like grid toggles and pro
tips into a collapsible settings menu to keep the
live view finder clean and focus entirely on
the alignment frame. Let's talk about
the second feature, reviewing extracted
products price and totals. We are talking about this page. Let's rate the friction points. While highly detailed, the
zero volume of text on a single mobile screen can induce cognitive
fatigue during review. Furthermore, having multiple confirmation
pathways approve and lock expense button at
the bottom alongside top level text
cause redundancies, and here is the recommendations. Introduce a compact view
togal for line items or use progressive disclosure
collapsing long list with an options to expand. So user can quickly verify
totals without scrolling through extensive itemized
list unless necessary. Let's talk about
the third fitter. Categorized spending
and visualizations. We're talking about this page. Okay, let's read the
friction points. The Analytics screent, Crems category s
percentages, doughnuts, or lines, daily spend charts, and smart insights card
into one vertical scroll. Additionally, distinguishing between interactive filters like Zo percentages and static
informational text elements isn't always immediately clear, and here is the recommendations. Implement tap navigations or bodular card within the Analytics Dakboard
allowing users to toggle cleanly between
categories trends and insights rather than forcing
a long uninterrupted scroll. Okay so this is very
insightful recommendations. Next, we are going to try
the second tool UX Pilot. So let's log into UX Pilot. You can log in using your Gmail account and
just click Review. You will be redirected
to this page and you will need to
upload the design. So just click this and I'm going to upload this
image. Let's click Open. It is uploading the image. It will take few seconds, and let's scroll down. And let's click
Start the review. Okay, now EI is
reviewing the design. It will take ten or 15
seconds, so just wait. Hopefully it doesn't
take too long. Okay, here is the AI
review. What is working? The interface features high tech feedback
loops, edge detections, OCR status that goods
user confidence in the AI's accuracy. The use of a single
or bit stocol is a clear functional pattern
for high utility tools. And what is risky? The interface is
extremely noisy. Information's density is very
high with floating techs, badges and status indicators
competing for attention. This cognitive load may hinder the primary
task of scanning. And down here, we have the
score card for usability. The score is three out of five. Good functional feedback,
but high cognitive load. And for accessibility, the
score is only two out of five. Several tiny text elements
and low contrast grind. So there's a problem with the
color that we need to fix. Okay, guys, I think that's it. That's all you need to know. I'll see you guys in
the next video. Bye.
10. Analyzing User Behaviour with Microsoft Clarity: Holidays, welcome
back to the course. In this video, we are going to analyze user behavior
using Microsoft Clarity. And don't worry, this tool
is completely free to use. Let's click on pricing. As you guys can see, it is free. Let's get started. I'm going to log in
using my Gmail account, but you can also log in using your Microsoft account
or Facebook account. It will take few seconds. Okay, I have
successfully logged in. Let's click New Project, and you will need to
name your project. I'm going to name
this test website. Next, you will need to enter
your website or app URL. In this case, we
are going to use FICMA to build a simple website. I'm going to use this prom. Create a receipt
management system with three main features. Scan receipt using OCR, automatically extract
product prices and totals and categorize
and visualize spending. Include home scrintRcp
scanner receipt details, and spending Analysis Scrint. And let's click Generate. It will take approximately
ten or 15 seconds. So just wait hopefully it
doesn't take too long. Well, it didn't take too long. The website is ready, and now we're going to
publish the website. So just click Publish and
just click this Publish. It will take ten or 15 seconds
to publish the website. Okay, now the website is
live. Just click this. Go to web, and you will be
redirected to your website. And let's copy and
paste the URL, and let's go back to
Microsoft Clarity. And let's copy and paste
the URL right here. Next, you will need to
select the website industry. I'm going to select technology
and telecommunications. And let's click at New Project. Okay, the new project has
been created successfully. Now we are going to connect Microsoft Clarity
with this website. So every time user interact
with your website, Microsoft Clarity is
going to be able to track their movement and
analyze their behavior. Okay, now let's click
on Get Tracking Code, and you will need to copy
and paste this code. And if you are not familiar with programming or software
development, don't worry. It is not your job
as a UX designer. Actually, this is a
software developer or web developer job. So if you are working with a team of engineer or developer, just let them know you want
to integrate the website with Microsoft Clarity and just give this code to them and they will handle the integration process. Okay, now, I'm going to click
this Copy to Clipboard. And let's go back to ICMA, and we're going to let
AI know that we want to integrate Microsoft
Clarity to the website. Okay, let's write the proms. I want to integrate Microsoft
Clarity to this website. And just copy and
paste this code. And just click Send. Okay, now AI is going
to add this code. And once the code
has been edited, Microsoft Clarity is going to be connected to this website. Well, it didn't take too long. As you guys can see, Microsoft
Clarity is now integrated. The tracking script is
injected in head and will fire on every page
load with your project ID. Okay, very cool. Now
we're going to republish the website and
just click Update. It will take few seconds, maybe ten or 15 seconds. Then after that, we are
going to open the website again and we're going to
interact with the website. And we're going to
see how we can use Microsoft Clarity to
analyze the user behavior. Okay, now, let's click this. Go to web, and we're going to interact with this
website for a minute. I'm going to click
on Random button. Let's click scant. Let's try Demo Scan. Let's click F recipe details. And I'm going to scroll down. And let's click Analysis. Okay, here is the
spending Analysis. Let's click categories
and trends. And let's go back
to the homepage. And let's click Apple Store. Okay, now, let's go back
to Microsoft Clarity. And let's click on recordings. And let's click on Live Users. And let's play the video. Look at this. It's click Is
recorded. Very cool, right? As a UX designer, this tool is going to be very
useful because you will be able to see how the user
interact with your website, what challenges they are facing, and what buttons they
are clicking, right? So this is going to be very useful. Okay, I think that's it. That's all you need
to know. I'll see you guys in the next video. Bye.
11. Analyzing UX Research Data with Julius AI: Holi gays, welcome
back to the course. In this video, we
are going to analyze UX research data
using Julius AI. We have the sample data, and this data has six columns. The first column is
user occupations. The second column is user opinioned about the
receipt scanning fitter. Is it easy to use or
difficult to use? The third column is
the OCR accuracy rate. The fourth column is user opinioned about the spending
categorization fitter. Is it useful or not useful? The fifth column is the
spending physialization rating. So the rating is 1-5, and the last column
is the user feedback. So Julius AI is going to be
able to analyze this data, perform sentiment analysis, and generate valuable insights. Okay, let's get started. Firstly, I'm going to log
in using my GML account. It will take a few
seconds. So just wait. Okay, I have
successfully logged in. Now I'm going to
upload this data. Let's click this. Let's
click upload file. Okay, I'm going to upload this
file UX research data CSV. Let's click Opened. Now it is uploading the data, and let's write the prom. Actually, the prom is very long, so I'm just going to
copy and paste the prom. And let's write the prom. Analyze this UX research data for the receipt management app, identify key patterns
and trends and perform sentiment analysis on the
participants feedback. Generate a concise summary of the findings,
valuable UX insights, and actionable recommendations
for improving the apps, receipt scanning,
OssiR accuracy, spending categorizations, and spending
visualization features. Okay, so that's my prom. You can use my prom or you
can also write your own prom. It is totally up to you. And for the AI model, we are going to
use Julius 1.2 it. And let's click Generate. The process is going to take approximately ten or 20 seconds. So just wait. Hopefully,
it doesn't take too long. Well, it didn't take too long. It only took 10 seconds or even less than 10
seconds. Look at this. Julius AI visualized the
data using Br chart. Okay, now let's read
the executive summary. The dataset contains
25 participants across a broad range
of occupations. Overall, the receipt management
app is viewed positively, especially for reducing
manual expense traking and making spending information
easier to understand. The main opportunity is
not the app's core value, but its reliability
in its cases. Users reported weaker
experiences with long damaged, vetted or complex receipts, as well as a need
for more control over extracted data and
spending categories. Okay, now, let's rate
the key UX patterns. Scanning is generally easy. 76% rated scanning as
easy or very easy. 32% rated it very easy and
24% rated it moderate, and no participant
rated it difficult. However, scanning is strongly associated with OCR performance. Participants who
rated scanning as very easy had average
OCR accuracy of 95.9% compared with 79.8% among those who
rated it moderate. This suggests that users
may experience scanning and recognition as one
combined workflow rather than separate fitters. Okay. Now let's talk
about the OCR accuracy. The average reported
OCR accuracy is 89.7%, but performance varied
considerably from 74% to 99%. So that's the range. Let's talk about the spending
categorizations fitter. Categorizations
is well received, 52% rated it very useful. The remaining 48%
rated it useful. No participant gave
a negative rating. Now let's talk about
spending visualizations. Visualizations was the
strongest rated fitter quantitatively with an average
score of 4.3 out of five. Users describe the chart and spending breakdown as
simple, intuitive, helpful for
understanding expenses, useful for monitoring
spending patterns over time. Okay, now, let's read the
sentiment analysis result. Using sentiment scoring
on the written feedback, 12 comments were positive, 13th were neutral or mixed and no comments were
purely negative. And let's talk about
the UX insights. Number one, reliability matters more than adding
basic functionality. Number two, manual correction should be part of the
primary workflow. Number three,
categorization is useful, but users want ownership, and number four,
visualization is understandable but could
become more actionable. Okay, on, let's read the
actionable recommendations. Sip scanning improvement,
priority high. Add a guided capture
experience with framing lighting distance
and alignment instructions. And the second one is OCR
accuracy improvement. The priority is also high. Improve recognitions
for faded cramplod and low contrast receives. And the third one is spending
categorization improvement. The priority is medium, allow users to create, rename, merge, and delete
custom categories. And the third one is spending
visualization improvement. The priority is also medium. Keep the current simple chart
style since user find it easy to understand Okay, guys, I think that's it. That's all you need to know. I'll see you guys in
the next video. Bye.
12. Creating Affinity Diagram with Miro & Edraw AI: Hello, guys. Welcome
back to the course. In this video, we
are going to create affinity diagram
using two AI tools. The first one is Miro and
the second one is Idro AI. The reason why we want to create an affinity diagram
is because we want to be able to organize user
feedback into meaningful groups, identify common
patterns and themes, and better understand
user needs, pinpoints, and experience. Okay, let's get started. Firstly, let's log into Miro. You can log in using
your Gmail account, and let's create a new board. Okay, now we are going
to write the prom, but actually the prom is
going to be very long, so I'm just going to
copy and paste the prom. Okay, let's write the prom. Create an affinity diagram
from this UX research data for the ZIP management
app by organizing individual user feedback into group based on common patterns, needs, pain points,
and experiences. The expected output format is a affinity diagram using sticky notes with
its sticky note representing a key finding and similar findings group under clearly labeled teams
related to recip scanning, OCR accuracy, spending
categorizations, and spending visualizations. And what I'm going to
do next is to copy and paste these key
feedback columns. If you remember in
the previous video, we also use this
UX research data. And by the way, if you want
to get access to this file, just click on the resource
folder next to the video and you will be able to
download this CSV file. Okay, let's copy and paste this, and let's go back to Miro. And let's copy and paste
this user feedback. And let's click Generate Okay, now, Miro is going to
create an affinity diagram. It will take a few seconds, maybe ten or 20
seconds. So just wait. Hopefully, it doesn't
take too long. It didn't take too long. It only took 10 seconds or
even less than 10 seconds. Okay, now, let's rate
this affinity diagram. So the first one is receipt
scanning and processing. The scanning process could
provide better instructions. Long receipts are difficult
to scan accurately. The app works well, but receipt processing
could be faster. And the second one is OCR
accuracy and data extractions. OCR works well, but some
products names are incorrect. Some prices were extracted
incorrectly from my receipt. The app is easy to use, but I want to edit
extracted information. And here is the third one
spending categorizations. I would like more spending
categories to choose from. Categorizing expenses
automatically is very convenient, and here is the spending
pesializations, and analysis. The spending chart are simple
and easy to understand. The spending analysis gives me a good overview of my expenses. If you want to
download this image, just click this and just
click Export as Image. Next, we are going to
try the second AI tool. The name of the tool is Idro AI, and don't worry this tool
is completely free to use. Okay, let's get started. You will need to log in. You can log in using
your Gmail account, and after you have log in, you will be redirected
to your dashboard. Okay, now we're going to
copy and paste the prom. So we're going to
use the same prom that we used previously, and let's copy and paste
the user feedback. And let's click Generate. The process is going to take approximately ten or 20
seconds. So just wait. Hopefully, it doesn't
take too long. Well, it didn't take too long. It only took 10 seconds or
even less than 10 seconds. Okay, so here is the
affinity diagram. It is more colorful. So we have four sections,
receipt scanning, OCR accuracy, spending categorizations and
spending visualizations. So the user feedback is
categorized based on the topic. If the user feedback is about recipe scanning the
belongs to these sections. If the user feedback is
related to OCR accuracy, then it belongs to
these sections. If you want to save this image, just click Export and
just click this Export. You can select your file format. There are two
options PNG or GPG. Okay, guys, I think that's it. That's all you need
to know. I'll see you guys in the next video. Bye
13. Writing Microcopy with Mistral AI & Manus: Hello, guys. Welcome
back to the course. In this video, we are going to write microcopy
using two AI tools. The first one is Mistral AI, and the second one is Manus. In this example, we
are going to use this bike rental app UI Design. I created this UI design using Google Stitch.
Look at this. So we have blank
portion for the button, form label error messages, confirmation messages,
and input placeholders. We're going to use AI to write the microcopy for
this blank part. Okay, let's get started. Let's open Mistral AI. You can log in using your Gmail account and it
is completely free to use. Let's upload the image. I'm going to click
this upload file. And I'm going to
upload the UI design, and let's write the prompt. Firstly, we are going
to define AI's role. In this case, AI is going to
be acting as the UX writer. You are an experienced
UX writer. Then after that, we are
going to define AI task, like what we want AI to do. Write UX microcopy for each of the elements represented by dot, dot, dot in this
bike rental app. The reason why we added this triple.in the prom because
if you look at this image, the input placeholder,
the error message, the button are represented
by triple dot. So it is going to be
easier for AI to know the locations and know where the microcopy is
going to be placed. Okay, let's continue the prom. Including buttons, form labels. Error messages,
confirmation messages, and input placeholders. Make sure the microcopy
is easy to understand. Concise, consistent and clearly communicates what user
needs to know or do. Okay, now let's click SAM. It will take a few seconds, maybe five or 10 seconds. So here is the AI response. Okay, for the search and filter, the microcopy for the
search ba placeholder is search for stations,
bikes or locations. For the filter button, the microcopy is filter. For the sort button,
the microcopy is sort. So it is very clear and concise. For the bike selection sessions, for the Block button, the microcopy is supposed to be lock bike and for the
bike details button, the microcopy is supposed
to be few details, very clear and concise, right? And here is the microcopy for
the rental option sections. Rent for a quick ride, unlimited for 2 hours, unlimited rides for
24 hours and so. And for the payment sections, the microcopy is enable pay
as you go payment method. So this is very clear
and straightforward. So people can easily understand what is the actions
and what they need to do. Okay, very cool, guys. Next, we are going to
try the second AI tool. The name of the tool is Manus. And don't worry, this
tool is also free to use. Firstly, you will
need to log in. So just log in using
your Gmail account, and we are going to
do the same thing. So we're going to upload
the UI design image, and we are also going
to use the same prom. So I'm going to copy
and paste this prompt. And let's click Send. It will take a few seconds for AI to generate
the microcopy. Well, it didn't take too long. It only took a minute or
even less than a minute. So here is the AI
generated microcopy. For example, the search field, the recommended microcopy
is search station or bikes. For the Alert card menu, the recommended microcopy
is few alert details. Actually, you can also
use Manus to edit the image and edit the microcopy to the
image. Look at this. This is the original image
that we uploaded and Manus was able to add the microcopy
directly to the image. Look at this search
station or bikes. Map updated just now. So bikes may be unavailable.
Very cool, right? So here is the original image. So this part was empty, right? And Manus is able to add the microcopy
directly to the image. Okay, very cool, guys. Look at this. I think that's it. That's all
you need to know. I'll see you guys in
the next video. Bye.
14. Improving UX Copy with ChatGPT & Claude: Holi guys. Welcome
back to the course. In this video, we
are going to improve existing UX copy
using two AI tools. The first one is ChatGPT and
the second one is Cloud. We are going to use
this energy consumption tracking dashboard
UI as an example. I created this UI
design using Visily AI, and I intentionally make the microcopy looks
bad and confusing. So we're going to use AI
to fix the microcopy. Okay. Let's get started. Let's open ChatGPT. You can log in using your Gmail account and
just upload the image. Next, we are going
to write the prompt. Firstly, we are going
to define AI's role. You are an experienced
UX writer. Then after that, we
are going to define the AI task like what
we want AI to do. Improve the existing microcopy in this electricity and energy
consumption tracking app. To make it easy to understand concise, clear, informative and user centered while preserving the original meaning and purpose of its message, I'm going to add
one more sentence. Make it concise, only include microcopy that
need to be fixed. Show the existing microcopy. And the recommended microcopy. And let's click Sand Prompt. It will take a few seconds, maybe ten or 20 seconds. So just wait. Hopefully,
it doesn't take too long. Okay, now, we have a
table with two columns. The first column is
existing microcopy and the second column is
recommended microcopy. For example, overall efficiency
context, sufficient is. Well, this is a little
bit informal, right? So we can replace that with overall efficiency, sufficient. So this is more
clear and concise. Let's read the other example. Your current power
telemetry suggests a significant but
unquantified trend toward feature usage variations. Please consult the jargon guide for further clarifications. We can replace that with your content power
data indicates a significant trend toward
future usage changes. But the size of the
change is unclear. See the guide for details.
See the difference. The first one is not very clear and I get confused
when I write this. But the second one is
more clear and I can easily understand the message. Okay, now we are going to
try the second AI tool. The name of the tool is Cloud. Firstly, let's open Cloud and just log in using
your Gmail account, and we are going to
do the same thing. So let's upload the image, and we are going to
use the same prom. So let's copy and paste
this And for the AI model, I'm going to use Sonnet five, and let's click San Message. It will take a few seconds, maybe ten or 15 seconds. Well, it didn't take too long. It only took 10 seconds or
even less than 10 seconds. The response is very
similar like ChatGPT, so we have a table
with two columns existing and
recommended microcopy. For example, here is
the existing microcopy. Initiate flow audit. We can replace it
with run usage audit. Frequest details report. We can replace that with get
detailed report. What else? Real time pulse magnitude
4.82 kilowatt/hour. We can replace that with current usage, 4.82
kilowatt hours. Notice the recommended
microcopy is more clear, concise, and easier
to understand. Okay, guys, I think that's
it. That's all you need
Chris Raharja, Data Scientist & AI Enthusiasts
