SOOT is a visual-first filing system that organizes files in 3D space based on visual properties like color, shape, and texture—replacing traditional folder hierarchies with an intuitive spatial canvas.
Role: Product Designer, Design Systems
Duration: 4 weeks (September - October 2024)
Tools: Figma, Storybook, Illustrator
BACKGROUND
SOOT's product team was composed of graphic designers with limited Figma experience, resulting in fragmented design files as their beta launch approached.
The founding team built a beautiful 3D spatial canvas for organizing files visually. But the design system behind it was chaos—no components, inconsistent styles, and confused engineers trying to build features 30 days before launch.
PROBLEM
Figma files were disorganized with multiple variations of the same design elements but no reusable components or documentation.
Button sizes ranged from 32px to 52px with no pattern. Color and typography were applied inconsistently. Custom icons existed in 8 different variations. Storybook implementations diverged from designs, creating discrepancies in the final product. Engineers and designers spoke different languages.
OPPORTUNITY
How might we create a cohesive design system that supports SOOT's unique spatial interface while enabling rapid development before launch?
SOLUTION
A complete design system overhaul
Working under the head designer, I audited the entire product, mapped the UI architecture, and built a scalable component library from the ground up. The system needed to support SOOT's unique constraint: no rectangles allowed—everything uses rounded corners and organic shapes.
Key deliverables:
Unified color, typography, and spacing systems
20+ reusable components built with auto-layout
Navigation system for layer-based 3D interface
Icon library with 9 custom vectorized icons
Complete Figma-to-Storybook documentation
COMPONENT LIBRARY
Built a complete component library including buttons, forms, modals, and navigation elements—all adhering to SOOT's organic aesthetic. Each component uses auto-layout for responsive behavior and includes documentation for proper usage.
ICON SYSTEM
Translated custom icons from Illustrator to Figma, creating a searchable icon library with consistent sizing and documentation. Built a system where designers can type "icon:Name" to instantly swap icons across the product.
DESIGN FOUNDATION
Established foundations missing from SOOT: A color system, typography scale, spacing system, & button variants
