Design Bubble: A Smarter Way to Learn Design
A mockup of the Design Bubble interface, and how the Trending page would look.
Overview
Design Bubble is an AI-powered design encyclopedia that curates and presents high-quality design resources in an engaging and structured format.
The goal was to create a user-friendly platform for design students, beginners, and professionals who want to explore design principles, typography, UX/UI, and visual communication—without being overwhelmed by scattered, unstructured information
The Problem
Lack of Centralized Learning Resources: Design learners often struggle to find structured, reliable content in one place.
Too Much Information, Not Enough Context: Wikipedia is text-heavy, ChatGPT lacks visual references, and Dribbble offers inspiration but no structured learning.
Beginners Feel Overwhelmed: Many aspiring designers don’t know where to start, and complex jargon creates barriers.
User Persona created to better understand my target audience for Design Bubble.
Initial sketches for Design Bubbl'e’s interfaces.
Site architecture map.
Moodboard for inspiration for Design Bubble’s theme and aesthetic.
User flow map.
The Design Process
Research & Comparative Analysis
I analyzed four major platforms—ChatGPT, Wikipedia, Dribbble, and YouTube—to understand their strengths, weaknesses, and user experience gaps.
Defining the Solution
I envisioned Design Bubble as a curated, AI-powered design encyclopedia that:
Offers concise, AI-generated summaries for easy learning
Incorporates visuals and project showcases for practical application
Provides multimedia resources (videos, articles, interactive content)
Ideation & Wireframing
Using Figma, I created:
User Personas to define user needs and frustrations
Low-Fidelity Wireframes to test layout ideas
Navigation Maps & User Flows to ensure seamless interaction
UI & Interaction Design
Moodboard Inspiration: Bright colors (blue & pink) for a fun, engaging experience
Usability Testing & Iterations
Conducted think-aloud usability tests with two test users
Identified confusing elements, including:
Unclear call-to-action (“Let’s Go!” button caused confusion)
Icons lacked clarity (Users struggled to understand tab functions)
Overuse of screen space (Elements were too large, requiring too much scrolling)
Refined navigation, hierarchy, and UI components based on feedback
Low Fidelity Wireframe.
High Fidelity home screen for Design Bubble.
Mid Fidelity Wireframe.
High Fidelity article page for the topic “Helvetica.”
The Final Product: Design Bubble Features
Smart Search Functionality – Predictive search to find design topics instantly
Structured, AI-Curated Learning – Combines summaries, visuals, and video content
Tab-Based Navigation – Organizes information into Overview, Projects, and Videos
Interactive Overlays – Displays Dribbble, YouTube, and Design Boom resources in a streamlined way