vintrace

Responsive MUI Web Design System.

“We need to build out a MUI inspired design system that feeds into the mobile app with foundations for consistency.”

To modernize vintrace's platform, we led the technical uplift from a custom-built Echo framework to a responsive Material-UI (MUI) design system. This comprehensive project involved re-architecting the entire visual language and component library from scratch, ensuring a consistent, scalable, and fully responsive user experience across all devices.

Key Focus: Technical Migration, Responsive Design, Scalability, Unified System.
Logo_Vintrace_Web_Dark.png
Specification for the vintrace Design System Colour Palette, detailing Primary, Secondary, and Neutral colors for UI elements like Links, CTAs, Error states, and Backgrounds with corresponding hex codes.
Detailed inventory of vintrace Design System Icons (Glyphish), categorized by size (Icon24, Icon32) and function (Navigation, Tables, Insights), demonstrating a comprehensive visual language for the web application.
UI/UX documentation for the vintrace Design System Typography (Web) page, defining standard styles for Headers (H1-H5), Labels, and Paragraphs with specifications for font size and weight.
Overview of vintrace Design System UI Patterns, specifically displaying multiple Card Frames (search results, reports) and structural Feature Frames (Dashboard, Bulk Wine, Setup) for consistent interface layouts.
Design documentation for the vintrace Web Application Navigation structure, showcasing responsive top-level menus and left-hand sidebars for MVP feature organization (e.g., Bulk Wine, Setup, Reports). Highlights component design AI Product Design and
Previous

Appen: Gig Economy Systems
Next

vintrace: native mobile systems