Imagining a ChatGPT app: UI/UX Case study

Adi Gajbhiye
3 min readJun 15, 2023

Before we get started, I must clarify that this is a personal project and that I have no affiliation to ChatGPT.

ABOUT CHATGPT

At this point, everybody knows what ChatGPT is. But if you don’t know then, ChatGPT is an advanced language model developed by OpenAI. designed to engage in conversational interactions with users. It can understand and generate human-like text responses to various prompts, questions, and discussions.

WHY THIS REDESIGN?

Like many of you, I rely significantly on ChatGPT in my day-to-day life. It has considerably eased my life as a designer. The other day, I was thinking about how an app for it could look and function. I thought why not give it a shot and design it for myself? Since, I am usually free on weekends, I sat down and completed this kinda mini case study in 2 days.

SITEMAP

Gone are the days when I would open Figma and start designing high fidelity mockups. First, I planned on creating a sitemap to estimate how many screens I would need to design and what items should go where to provide the best user experience possible.

A sitemap for ChatGPT app

LOW-FIDELITY WIREFRAMES

After creating a sitemap, things became more clearer to me of what should I design and how can I proceed with the design. I took inspiration by the web version but used some standard mobile-friendly UI patterns to improve usability and aesthetics.

STYLE GUIDE

Before getting my hands dirty on the high-fidelity wireframes, I created a style guide to make sure the design was consistent.

HIGH FIDELITY WIREFRAMES

And here it is, what you actually want to see!

High fidelity wireframes of ChatGPT app

PROTOTYPE

Try it for yourself!

ChatGPT Prototype

CONCLUSION

A weekend well spent. Creating 20+ screens in 2 days is not an easy task, mind you. It definitely demonstrates the progress I’ve made in my design speed. The next step would be to test this with real users and incorporate any feedbacks they provide. I hope you enjoyed it!

--

--