Dec 3, 2023
372 Views
Comments Off on Using ChatGPT as a UI/UX Product Designer
1 0

Using ChatGPT as a UI/UX Product Designer

Written by

ChatGPT is a great new tool in a designer’s armoury, not only can it speed up your workflow and process, but it can also expand your skillset, and allow you to do more.

“The final invention that humanity will ever require is machine intelligence.”

— Vijender, Indian UX Designer

Check out ChatGPT here

Firstly to give a bit of context. Chat Generative Pre-Trained Transformer (or ChatGPT for short) is a chatbot launched by OpenAI. It’s strictly textual interaction, you interact through text inputs like you would any other chatbot. It’s just reached 100 million users, all within a mere two months, the fastest-growing consumer app in history!

After first coming across ChatGPT, we ignorantly simply saw it as a search engine like Google; you ask a question and get an answer. But we later found, it is much more than that. For example, unlike Google ChatGPT is conversational. You can follow up on a question, and ChatGPT will remember what was last said, just like in a conversation.

We can safely say we have been blown away, especially as this is considered an early iteration. What’s actually quite frightening is how advanced the next evolution will be. Here’s a graphic of the next model, GPT 4, rumoured to be nearly ready, due in early 2023.

The first dot is the amount of data ChatGPT was trained on, the second dot is the next iteration.

Image by AiBreakfast

Using ChatGPT as a Designer

There are a plethora of ways we can use ChatGPT as designers – there are almost endless ways of using it. But after two months of using it regularly, we have found a handful of tasks we find are the most useful, and efficient use of time.

Research

We have found that ChatGPT has been most useful on research tasks, as it allows us to spend more time doing what we love most – UX and UI design.

Data research

We’ve always found finding data a tad tedious and time-consuming, but we have been pleasantly surprised by the detail and efficiency of ChatGPT, it also helps that it searches multiple sources!

Prompt: “share demographic data of people in the UK that travel abroad”

Competitor analysis

Again another time-consuming task, that can now be done in seconds. We have found this to be super powerful, we’ve even tested it on a few obscure companies and the results have still been impressive.

Prompt: “who are Booking.com’s 5 biggest competitors”

User testing and interview scripts

Writing scripts for user testing and user interviews is a great one, however, when we used it, it was more of a template and used as inspiration. We took this and completely personalised it to our specific needs.

Prompt: “generate a user interview script for a travel booking app”

Summarising data

This one we’ve used quite a lot, and it can really be applied to anything. Like summarising long-form text and data (as in the interview above), you can take this one step further and even identify key themes and insights.

Prompt: “summarise this user interview [insert text]”

User personas

Another good one that we have used as a template, especially as our user persona docs are always super visual. But again this saves time and works a treat!

Prompt “generate 3 user personas for a travel booking app”

UX

Although ChatGPT is text-only, we can still use it for generating ideas which we can then illustrate into something visual. We did however notice it can generate tables (see example below in “Design systems”). I would be surprised if it couldn’t already generate a flowchart (for user flows), and in the future be able to draw out wireframes.

User flow

We have found this to be a great template for a user flow, and great for inspiration, although we have found a few flaws when testing it out on a few concepts – so use it with caution!

Prompt: “generate user flow for a travel booking app”

UX flaws

An exercise we always like to do here at Cojo. From the beginning of a project is identifying and analysing UX flaws of similar products. We find this exercise extremely helpful in creating a killer product with a top-notch user experience.

Prompt: “what are the biggest UX Flaws in travel booking apps”

UI

For UI design (similarly to UX), ChatGPT is great for ideation and inspiration.

On a side note. OpenAI introduced DALL-E in 2021, which can generate digital images from descriptions (using a deep learning model). It’s also amazing, but we’ll save any more talk on it for another article. Watch this space!

Inspiration

This could be a whole article in itself. You can ask ChatGPT to generate similar websites that you can use as inspiration. To asking ChatGPT for pointers on styling a particular website, app, logo etc. For example, a luxury travel website may have elegant, script-style font whilst incorporating imagery of iconic luxurious travel destinations. These are all things ChatGPT will point out.

Prompt: “how should a luxury travel landing page look?”

Colour

ChatGPT can be used for helping with colour choices, it’s best paired with brand values (because of colour psychology). It can also help with choosing colours that work well together. But our favourite method is using it to help with accessibility.

Prompt: “what three colours should I use for a luxury travel app?”

Design systems

This is a super interesting one. Although ChatGPT would not design the system itself, it can supply all the documentation needed. Although you have to prompt ChatGPT with specific requirements. I could see how useful this could become!

Prompt: “generate documentation for a design system for a primary button. Include: anatomy, states and placement. Add a table with anatomy that shows tokens (size, font, colour) Add a table with the states like default, clicked, hover, active, focus, and disabled. Describe these states with design token (colour, font)

Copywriting

Copywriting is a clear one that ChatGPT can help with. We have found that using it for micro-copy such as labels, text fields and buttons is a little tedious and inefficient. However for any longer text, it works great and saves you from ever having to use Lorem Ipsum again!

UI copy

We have found it super useful for generating text such as onboarding content, tooltips, notifications and prompts, error messages, helper text, or for providing additional context or guidance for users. We have found it helpful for really anything longer than a sentence. Another super useful one is getting ChatGPT to reword and optimise pieces of text, either because they sound a bit wordy (or off) or even if you’d prefer a different tone of voice.

Prompt: “reword this to sound friendly and approachable [insert text]”

Blogs

Not strictly design but it is one that we’re sure most designers will have done at some point. And that’s writing a blog, documenting your design process or writing a project case study. However what we have found most useful with this, is actually idea generation, giving us ideas for what articles to write.

Prompt: “generate 10 UX Design articles ideas for Medium”

Emails

Again not strictly design, but this one is part of the job, and no doubt everyone will have to do it. Again the options are endless, I mean you could use it for every email you write, from asking for a salary increase, to a cover letter, to wishing your partner a good Valentine’s day. But let’s be honest that would be really sucky and feel super generic. We have found that rewording an email has been super useful, helping optimise it if it feels off, too waffly or the tone of voice isn’t quite right. Another useful scenario is for an email that feels a bit tricky to write, such as a letter of resignation, you can then use it as a starting point, and edit it to your specific needs.

Prompt: “write a Valentine’s day letter to my secret admirer”

BONUS: Coding

Yep, we’re great like that. Using ChatGPT for coding is super impressive and works extremely well, especially with smaller requests. For example, you could ask code samples from your Design System documentation (as mentioned above). This could be a great help to a developer you’re working with, and I’m sure they would greatly appreciate the gesture!

Within the design system conversation, I then added the prompt: “generate code samples”

To conclude

It’s clear to see how useful ChatGPT is, not only for writing, rewording, and research but also for generating ideas and overall ideation. But of course with all of these use cases that have been mentioned, do remember to use ChatGPT as a starting point and a template, and then make it bespoke to your needs. As ChatGPT puts it brilliantly…

“It’s important to note that ChatGPT is a tool, and its output should be used as a starting point for further refinement and editing, rather than being used directly in a final design.”

— ChatGPT

ChatGPT and AI in general, are undoubtedly only going to get better, and this is only the beginning, so embrace it and learn how to use it.

Thanks for reading! If you liked this post please do support us by giving the article a Thumb 👏

Article Tags:
· · · ·
Article Categories:
Design · Technology · UX

Comments are closed.