BubbleMind
Mind-mapping product and website design, with colour-coded diagrams, light and dark workspaces and a playful visual identity.
View the screens- Project scope
- Mind-map UX/UI · Product website · Front-end development
- Project contact
- Tung Chan
- Design files
- View in Figma
About the project
BubbleMind gives ideas room to branch. We designed the mind-map workspace, account settings and product website, using colour-coded nodes to organise diagrams and gradient characters to give the product a distinctive personality. The front-end scope covered the website and product interfaces.
- Design
- Mind-map workspace, diagram layouts, light and dark themes, account settings, visual identity and product website.
- Front-end
- Front-end development for the website and product interfaces.
A website shaped like a mind map
A coloured path branches from the opening message into product features, video, examples and plans. The website introduces the product through the same connected visual language as its mind maps.
Connected ideas, with a clear visual hierarchy
Branch colours, node labels and image cards distinguish ideas within a map. Light and dark themes carry that hierarchy into the workspace, with a quieter layout for profile and account settings.
The character and the visual system
The bubble character and rounded wordmark introduce the product personality. A bright palette and the Nunito and Museo Sans Cyrl typefaces connect the identity to diagrams, interface controls and website content.
