ChatGPT in UI/UX: Streamlining your process

The emergence of AI-powered tools and technologies is having a growing impact on many industries and UI/UX is no exception. One of the most prominent AI tools currently is ChatGPT — a language model developed by OpenAI with tremendous language processing capabilities. Throughout this piece, we delve into the exciting opportunities that arise from integrating AI into your UI/UX processes. More specifically we explore how ChatGPT can help you optimize various parts of the design process and elevate the quality of creative outcome.

Before we go any further, it is important to highlight that while ChatGPT is one of the most robust AI tools, it is still, and fundamentally, a natural language processing (NLP) model that depends on the specificity of your input in generating the desired output. The better you articulate your intention, the more relevant are the results you get from ChatGPT. Even then, it is worth remembering that NLP models can still produce inaccurate data, no matter how convincing and natural the output seems. So make sure you double check and cross-reference your findings. After all, ChatGPT is not meant to take out the human from the process, but rather to augment their workflow.

With the warning out of the way, let’s dive in. Here are five areas in which ChatGPT’s assistance is of added value.

1. Ideation 💭

• Understanding the Problem: Defining the product during the ideation stage requires a variety of insights not only into user audiences and their preferences, but also the problem your product is trying to solve. Leveraging ChatGPT’s wide access to information, you can easily prompt it to summarize relevant literature from the internet for a speedier desk research during the initial stages. Make sure to assess the data cautiously and cross-reference it with dependable sources. While ChatGPT’s suggestions can improve your research, only your critical eye can ensure legitimacy.
• Ideating Problem Statements: Interact with ChatGPT in a conversational manner. Start by introducing the problem and the context to set the stage for productive ideation. Such an approach can prove very useful in ensuring a specific and helpful output that can lead to a more focused problem statement. Of course, real user pain points will have to be taken into account along the process, but this can be a good start.
• Defining the Product: Explain the problem you are trying to solve in as much detail as possible. Ask ChatGPT to generate possible concepts for digital solutions. Encourage divergent thinking by requesting a variety of suggestions from more conservative to more creative and use them situate your product within the existing market. From the wealth of ideas generated, filter out the most promising ones. Prompt Chat GPT to explain reasons behind computed feasibility, which you can later use throughout your design proposals and presentations.
• Finding Product Inspiration: Oftentimes it helps to look at how others have tackled similar problems. Finding inspiration by searching online can be great, but it’s also something that ChatGPT can help with in a more effective way. Simply ask ChatGPT to give you a list of product case studies that tackle a similar problem or deal with a similar type of service. The list can also serve as a stepping stone for your competitor research and analysis.

Prompt examples:

Ideation prompt: I’m brainstorming ideas for a travel booking app. Can you suggest innovative features or concepts to differentiate it from competitors?

Ideation prompt: Can you suggest out-of-the-box ideas for a charity donation platform? How can I encourage more donations and make the process emotionally engaging?

Ideation prompt: Can you provide creative concepts for an AR-driven shopping experience? How can augmented reality be integrated to improve product discovery?

2. Research 🔎

• Expanding Research Considerations: Encourage ChatGPT to provide specific examples or scenarios where your design concept might excel or fall short. This helps you understand user expectations and potential usability issues. Note that the output is not going to be based on your project-specific user data so make sure you treat it as such. Use the output in expanding your research considerations and opportunities, as opposed to treating it as research outcome itself.
• Generating Research Scripts: ChatGPT is capable of giving you a comprehensive list of research questions for stakeholder and user interviews, as well as surveys, based on your specific product, user audiences and user scenarios. The questions can vary from more generic to more specific depending on the details in your input. The output information can then be further iterated based on prompts regarding, tone, voice, direction and intended research outcomes. On the other hand, if your questions are already prepared, you can always run them through ChatGPT for feedback on clarity and word choice.
• Completing Operational Writing: To avoid spending too much time on operational writing that can take precious time away from the research work itself, rely on ChatGPT’s writing capabilities to help you with — at least the first draft of — survey intros, interview appointments, stakeholder emails, as well as proofreading (and simplifying!) to ensure research participants understand your research clearly.
• Creating User Personas (Templates): It goes without saying that user personas and user findings are inextricably linked, so it is impossible for ChatGPT to generate relevant user personas without access to your user findings. That said, feed user findings to ChatGPT (with the users’ permission!) in order to have it summarized into relevant and useful personas. When that’s not possible, use ChatGPT’s generic user persona outputs as templates for building the project-specific user personas.
• Conducting Competitor Analysis: Tackle this time-consuming task by prompting ChatGPT to give you a list of relevant competitors for the client’s business. If your stakeholder is not a well-known company, feel free to use their prime competitor in the prompt. Be as specific as you can in how the output should be categorized for a more structured analysis.

Prompt examples:

Research prompt: I need guidance on conducting in-depth interviews with users to uncover their pain points and needs. What are some effective strategies for interview question formulation?

Research prompt: I’m conducting user research for a finance app. Can you provide tips on how to create effective user surveys to gather valuable insights from our target audience?

Research prompt: I need help with creating user personas for a travel booking website. What are some essential characteristics and pain points to consider?

3. Site Architecture 📐

• Generating User Flow Suggestions: Giving a brief but concise description about the product, ask ChatGPT to generate a user flow, which you can use as a baseline to iterate on, in line with your specific requirements. As you make changes to your user flow based on ChatGPT’s feedback, describe the updated flow to ChatGPT again to ensure the refinements align with your design goals. Conversely, you can also share a user flow you’ve designed (in written format) and ask ChatGPT for insights on potential bottlenecks, unclear transitions, or opportunities for streamlining the flow.
• Ensuring Navigational Clarity: Describe your navigation structure and ask ChatGPT for suggestions on how to ensure clear navigation paths for users, especially when there are multiple screens.
• Describing Wireframes: Although ChatGPT cannot provide visual output, it can provide a solid starting point for your wireframes and page layouts. With navigation or user flow information provided, it can knock out a preliminary layout of relevant sections across the product’s various screens.
• Error Handling: Inquire about how to handle user errors or unexpected interactions within your user flow. ChatGPT can suggest approaches to guide users in such situations.

Prompt examples:

Site Architecture prompt: Can you suggest a user flow for a food delivery app, including steps from selecting a restaurant to placing an order and tracking its delivery?

Site Architecture prompt: I’m designing a portfolio website for a photographer. Can you help me create a wireframe for the homepage that highlights their work effectively?

Site Architecture prompt: I need a checklist to ensure our website’s navigation is accessible and intuitive. Can you provide guidelines for a navigation audit?

4. Visual Exploration 🎨

• Finding Visual References: There are many a way that ChatGPT can provide assistance in the visual exploration process. While it itself cannot necessarily provide visual output, it sure can guide you to the most relevant products, platforms and tools as well as design theory considerations required to make strategic and well-informed UI design decisions.
• Deciding on Color Palettes: ChatGPT can help here by either providing color palette ideas or giving you feedback on currently selected color palette. By providing some context around the project, its purpose and target audience, you can receive helpful guidance on your color palette direction.
• Choosing Typography: With access to huge typographic knowledge and literature on best typographic practices, ChatGPT is capable of offering quality typographic guidance and even more in-depth typographic considerations to help you when choosing type families for you next project. With the adequate understanding of your project vision, ChatGPT can help you look for a font that communicates the project content best.
• Looking for Feature-specific Inspiration: When unsure how a certain feature should or could look like, prompting ChatGPT to provide feature-specific references is a good way to start ideating potential solutions. Including specifics such as stylistic considerations beyond the mere product feature could provide niche links that fit right in your project mood board.
• Creating Prompts for Text-to-Image Models: Much like the case with ChatGPT, most AI tools provide output as good as the quality of the input prompt. This includes the text-to-image models such as Dall-E and Midjourney. One way to ensure that you get as close to your desired output as possible is to ask ChatGPT to prepare a tool-specific prompt which you can then use to generate the images of your choice. Simply describe the content, the style as well as its use and specify what tool should the prompt be prepared for. You can also further iterate the prompt by providing more context and specific requirements to the same thread.

Prompt examples:

Visual Exploration prompt: I’m working on a healthcare app. Can you suggest color schemes that convey trust and professionalism while ensuring accessibility for all users?

Visual Exploration prompt: I’m designing a non-profit organisation’s website. What fonts should I use to convey a sense of empathy and authenticity?

Visual Exploration prompt: Could you provide me with website inspiration links that showcase carousels in an effective and innovative way? I’m looking for examples to draw inspiration from for my own project.

5. Copywriting ✍️

• Upgrading from Lorem Ipsum: ChatGPT is useful for any kind of convincing writing in either long or short format. If enough information about certain paragraphs (in the making) is available, use ChatGPT to generate text in the desired length, number of sentences, or characters. While the text will likely have to be proofread and updated by a human copywriter, the output will serve as a great start at filling the empty canvas and allowing designers to more easily design around existing (and meaningful!) content.
• Generating Microcopy: Similar to long-format text, ChatGPT can be used for microcopy as well — be it for CTAs, taglines or error messages. Prompt ChatGPT to give you multiple options and choose the one that feels most appropriate. If voice and tone guiding samples are available, feed them into ChatGPT to get even more relevant results.
• Proofreading Alt Text: Other tools could help with image-to-text descriptions albeit still in need of , but Chat GPT can certainly help make human-made Alt text more compact. Human supervision is paramount.

Prompt examples:

Copywriting prompt: Can you provide copy suggestions for a landing page promoting a new mobile app? I want the copy to communicate its value and encourage downloads.

Copywriting prompt: I need assistance with microcopy for a checkout page. What concise and reassuring messages can I include to guide users through the payment process?

Copywriting prompt: Can you suggest error message microcopy that is both informative and empathetic? I want to improve the user experience when users encounter issues.

6. Other Tips ➕

• Design System Documentation: Again, Chat GPT cannot provide visual documentation or style guides, but it can surely provide a technical template to achieve the best technical documentation. Feel free to prompt ChatGPT to use tables and relevant variables/tokens in getting a more detailed template.
• Convenient Tools: There are plenty of other AI and non-AI driven tools that can further optimize your workflow as a UI/UX professional. Asking ChatGPT to suggest the best tools for completing certain tasks can provide you with a succinct list of helpful tools without the anxiety of searching through products that come out almost daily.
• Design Standards: When unsure about a certain design choice, you can rely on ChatGPT’s ability to provide design guidance followed by arguments and reasoning directly tied to literature, standard practices or emerging trends. Be specific about what you are uncertain about and make sure you ask ChatGPT to elaborate on the ‘why’ of its suggestions. Asking it to provide references from articles and literature about its suggestions is a convenient way to double-check the output.
• Ask for help: If anything, you can always ask ChatGPT how it can help you with the task at hand. Being aware of its capabilities and limitations, it is often a good judge in terms of the qualitative help it can provide.

Prompt examples:

Prototyping Guidance prompt: What tools and prototyping techniques do you recommend for creating interactive prototypes of a mobile app to test with users?

Usability Report prompt: Can you suggest a template or structure for a usability testing report? I want to document the findings and recommendations from our user testing sessions.

Documentation Template prompt: I’m in the process of creating technical documentation for our design system. Can you assist me in generating clear and comprehensive documentation that includes guidelines for components, usage examples, and coding standards?

Closing thoughts 🧐

ChatGPT serves as a valuable asset in the UI/UX design process, efficiently streamlining tasks and expediting certain aspects. While it’s important to maintain a realistic perspective on its capabilities, ChatGPT can offer designers solid starting points and substantially reduce the time spent on repetitive chores. By providing swift content generation and automating mundane work, it allows designers to channel their energies toward higher-level creative thinking. Moreover, ChatGPT’s inexhaustible source of information, presented in a filtered and user-friendly manner, enhances the overall quality of the design process. This wealth of information equips designers with a wellspring of insights, enabling a more well-informed and data-driven human-led design approach.

However, it remains essential to underscore the importance of human judgment and meticulous review of AI-generated outputs, given that ChatGPT may occasionally produce inaccuracies. In essence, ChatGPT represents a tool that enhances, rather than replaces, human expertise. When harnessed thoughtfully, it can significantly boost efficiency, inspire innovative ideas, and facilitate a more well-informed design journey.