Chat GPT Redesign: Side Menu UI

Chat GPT is awesome. But their side menu is awful 🫣 ... so how could we make it better? This redesign answers that exact question. Specifically, I used three key UX principles, Jakob’s Law (Law of Familiarity), The Aesthetic-Usability Effect, and Improving Visual Hierarchy to decrease cognitive load (aka don't make people think too hard).

Compared to the original design, the visual hierarchy has significantly improved. And the hover interactions and subtle animations make the experience feel like a breath of fresh air 😮‍💨. Check out the original design below ↓

The original design made some key mistakes that could easily be improved. Notice the redundant use of chat icons on the left hand side. Icons are meant to help the user scan/read quickly. Therefore, if the icons aren't helping the user differentiate between elements, then it's best to remove them.

Do we really need to show allllll chat history on the sidebar? It can become distracting and overload the user with information. Instead let's decrease the cognitive load by only showing 4 chat history options with the ability to view all.

Like what you see? Connect with me on LinkedIn and X (formerly twitter)

Want this Figma prototype template & tutorial? If I get 400 email sign ups, then I'll give it away for free :) Sign Up Here