High-fidelity 3D laptop mockup displaying a dark mode AI chat interface, featuring an organized sidebar with chat history folders and a main conversational UI displaying React code snippets, conceptually illustrating advanced SaaS product design and UI/UX execution in John Luba's AI chat interface portfolio case study.

DISCOVER PROJECT

Experimental

AI chat interface

A smarter interface for AI conversations

2025

SERVICES:

AI UI design

AI chat UI Dark Theme
Full-screen high-fidelity UI mockup of a complex dark mode AI chat interface, featuring a three-column layout with organized chat history, an active conversational window displaying CSS code, and a side panel for saved boards and bookmarks, conceptually showcasing advanced SaaS dashboard architecture in John Luba's UX design portfolio.

The challenge

AI Chat Only
Full-screen high-fidelity UI mockup of a dark mode AI chat interface in a distraction-free focus mode, featuring collapsed sidebars and a structured text response about machine learning, conceptually demonstrating content readability and minimalist SaaS product design in John Luba's UX portfolio.
AI Chat Only
Full-screen high-fidelity UI mockup of a dark mode AI chat interface in a distraction-free focus mode, featuring collapsed sidebars and a structured text response about machine learning, conceptually demonstrating content readability and minimalist SaaS product design in John Luba's UX portfolio.

Image Label

Most AI platforms—ChatGPT, Claude, Perplexity—default to a simple chat format. While functional, it quickly becomes messy and inefficient. Scrolling through long conversations to find key insights is frustrating. Bookmarks are non-existent, and there’s no easy way to organise chats or see everything at a glance. I wanted to explore how an AI chat interface could evolve to better support productivity and organisation. The challenge was to design a system that feels as simple as a chat but adds layers of control, navigation, and clarity without overwhelming the user. My goal was to give users a centralised way to manage ongoing chats, highlight and bookmark important content, and reduce clutter, all in an interface that feels modern and seamless.

The process

I started by examining existing AI chat tools to understand their limitations and strengths. I then sketched out concepts for how folders, boards, and bookmarks could be integrated without breaking the core experience of a single chat view. Using Figma, I designed a fully functional prototype that demonstrates how these ideas could work across desktop and mobile. • Researched current AI chat interfaces (ChatGPT, Claude, Perplexity) • Identified pain points like poor navigation, no bookmarking, and lack of overview • Designed an interface in Figma featuring folders, boards, and responsive layouts • Built an interactive prototype to explore usability and interactions
High-fidelity mobile UI mockup of a dark mode AI chat interface navigation drawer, featuring collapsible chat history folders, active state indicators, and a primary new chat action, conceptually illustrating responsive SaaS product design and mobile information architecture in John Luba's UX portfolio.
var(--variable-works-process-01-alt)
High-fidelity mobile UI mockup of a dark mode AI chat interface navigation drawer, featuring collapsible chat history folders, active state indicators, and a primary new chat action, conceptually illustrating responsive SaaS product design and mobile information architecture in John Luba's UX portfolio.
High-fidelity mobile UI mockup of an active dark mode AI chat interface, displaying a conversational thread about React code snippets with distinct user and AI chat bubbles, conceptually illustrating responsive conversational UI and mobile-first SaaS product design in John Luba's UX portfolio.
var(--variable-works-process-02-alt)
High-fidelity mobile UI mockup of an active dark mode AI chat interface, displaying a conversational thread about React code snippets with distinct user and AI chat bubbles, conceptually illustrating responsive conversational UI and mobile-first SaaS product design in John Luba's UX portfolio.
High-fidelity mobile UI mockup of a dark mode AI chat interface displaying an active Bookmarks slide-over panel, featuring saved React code snippets with quick-action links, conceptually illustrating knowledge management UX and mobile-first SaaS product design in John Luba's UX portfolio.
var(--variable-works-process-03-alt)
High-fidelity mobile UI mockup of a dark mode AI chat interface displaying an active Bookmarks slide-over panel, featuring saved React code snippets with quick-action links, conceptually illustrating knowledge management UX and mobile-first SaaS product design in John Luba's UX portfolio.

The design focuses on clarity, control, and accessibility.

The solution

Organised AI interface

Organised AI interface

Bookmarks and highlights

Bookmarks and highlights

Layout design

Layout design

Responsive design

Responsive design

The deliverable is a fully interactive prototype of a GPT-style AI interface that offers light and dark themes, supports full mobile responsiveness and lets users organise chats into folders and projects. It also provides bookmarks, enables message highlighting and chat/message deletion for a cleaner workspace and introduces session boards to collect chats and bookmarks in a single visual overview.
Design System
Side-by-side comprehensive UI design system documentation displaying both dark and light modes, detailing scalable design tokens, atomic components, and molecular chat elements, conceptually illustrating rigorous design engineering and systematic product architecture in John Luba's AI chat interface portfolio.
UI Design Bookmarks
Full-screen high-fidelity desktop UI mockup of a dark mode AI chat interface, featuring a three-column layout with organized chat folders, an active conversational window detailing Node.js best practices, and an expanded right-hand bookmarks panel, conceptually showcasing knowledge management and complex SaaS information architecture in John Luba's UX design portfolio.

The impact

• Created a working, responsive prototype showcasing a new AI chat experience • Improved chat organisation with folders, boards, and bookmarks • Demonstrated a concept for faster, more accessible content retrieval • Provided a foundation for turning AI chats into structured productivity tools

Check out the working design here.

MORE PROJECTS

MORE PROJECTS

Banham Academy

Banham Academy website design

A complete website redesign that modernised Banham Academy’s digital presence and improved the user experience for students and staff.

Banham Academy

Banham Academy website design

A complete website redesign that modernised Banham Academy’s digital presence and improved the user experience for students and staff.

Banham Academy

Banham Academy website design

A complete website redesign that modernised Banham Academy’s digital presence and improved the user experience for students and staff.

Banham Patent Locks

Doors video ads for Banham Patent Locks

A curated collection of video ads produced for multiple door campaigns, showcasing different creative approaches and storytelling styles.

Banham Patent Locks

Doors video ads for Banham Patent Locks

A curated collection of video ads produced for multiple door campaigns, showcasing different creative approaches and storytelling styles.

Banham Patent Locks

Doors video ads for Banham Patent Locks

A curated collection of video ads produced for multiple door campaigns, showcasing different creative approaches and storytelling styles.

Banham Patent Locks

Locks video ads for Banham Patent Locks

A curated collection of video ads produced for multiple lock campaigns, showcasing different creative approaches and storytelling styles.

Banham Patent Locks

Locks video ads for Banham Patent Locks

A curated collection of video ads produced for multiple lock campaigns, showcasing different creative approaches and storytelling styles.

Banham Patent Locks

Locks video ads for Banham Patent Locks

A curated collection of video ads produced for multiple lock campaigns, showcasing different creative approaches and storytelling styles.

Banham Patent Locks

Marketing brand campaign

Our goal was clear: shift from a purely product-driven strategy to a brand-led campaign that would raise awareness, strengthen equity, and build long-term trust.

Protect Family

Banham Patent Locks

Marketing brand campaign

Our goal was clear: shift from a purely product-driven strategy to a brand-led campaign that would raise awareness, strengthen equity, and build long-term trust.

Protect Family

Banham Patent Locks

Marketing brand campaign

Our goal was clear: shift from a purely product-driven strategy to a brand-led campaign that would raise awareness, strengthen equity, and build long-term trust.

Protect Family

Banham Patent Locks

Lavish storybook

A lush, tactile brochure designed for a premium security brand, bringing warmth and prestige to high-end products and services.

A book on a table with sunshine highlights

Banham Patent Locks

Lavish storybook

A lush, tactile brochure designed for a premium security brand, bringing warmth and prestige to high-end products and services.

A book on a table with sunshine highlights

Banham Patent Locks

Lavish storybook

A lush, tactile brochure designed for a premium security brand, bringing warmth and prestige to high-end products and services.

A book on a table with sunshine highlights

Banham Patent Locks

Crafted in Britain

A campaign celebrating authentic British craftsmanship—close-ups, tactile shots, and rich visuals that make precision feel personal.

Hot stumping lock

Banham Patent Locks

Crafted in Britain

A campaign celebrating authentic British craftsmanship—close-ups, tactile shots, and rich visuals that make precision feel personal.

Hot stumping lock

Banham Patent Locks

Crafted in Britain

A campaign celebrating authentic British craftsmanship—close-ups, tactile shots, and rich visuals that make precision feel personal.

Hot stumping lock

Banham Patent Locks

Heritage rebranded

A sleek identity refresh and site redesign for a legacy security brand—marrying tradition with modern minimalism and digital polish.

Lock and cylinder

Banham Patent Locks

Heritage rebranded

A sleek identity refresh and site redesign for a legacy security brand—marrying tradition with modern minimalism and digital polish.

Lock and cylinder

Banham Patent Locks

Heritage rebranded

A sleek identity refresh and site redesign for a legacy security brand—marrying tradition with modern minimalism and digital polish.

Lock and cylinder

Avvio

Be direct, be clear

A bold visual update and streamlined site—built around the mantra “Be More Direct,” designed for clarity and impact.

Avvio logo

Avvio

Be direct, be clear

A bold visual update and streamlined site—built around the mantra “Be More Direct,” designed for clarity and impact.

Avvio logo

Avvio

Be direct, be clear

A bold visual update and streamlined site—built around the mantra “Be More Direct,” designed for clarity and impact.

Avvio logo

Banham Keyholding

Unlocked storytelling

From script to screen: a short animated explainer turned live Sky TV spot—crafted to captivate and convert in 30 seconds.

Animation in situ

Banham Keyholding

Unlocked storytelling

From script to screen: a short animated explainer turned live Sky TV spot—crafted to captivate and convert in 30 seconds.

Animation in situ

Banham Keyholding

Unlocked storytelling

From script to screen: a short animated explainer turned live Sky TV spot—crafted to captivate and convert in 30 seconds.

Animation in situ
Have a project in mind?

Book a short intro call to discuss scope, fit, and next steps.

Have a project in mind?

Book a short intro call to discuss scope, fit, and next steps.

Have a project in mind?

Book a short intro call to discuss scope, fit, and next steps.