PROJECT: USER INTERFACE DESIGN, PRODUCT DESIGN, SYSTEM DESIGN
"Create a collection of reusable UI components and patterns, including both functional and perceptual elements."
PROBLEM
To effectively integrate cutting-edge AI capabilities into Army operations, the Army AI2C must develop a product portfolio that addresses the specific needs of its users (AI/ML engineers) by incorporating successes from the broader AI community, adopting flexible open-source frameworks, utilizing human-centered design principles, and employing a cohesive system design approach.
CHALLENGE
My role was to advocate in promoting the adoption of design systems and pattern libraries for the AI2C's portfolio of products. I focus the team on understanding the overarching Design Principles we would be pursuing; Consistency, Clarity, Efficiency, Accessibility, and Scalability
📢 Call to Action! This gave me the opportunity to promote and adopt a Design System ecosystem for consistency in the previous brand elements, establishing guidelines on brand usage, color theory, typography, layout, and components for products created by the incubator teams.Â
We identified a baseline of properties – Color, Typography, Sizing/Spacing, Components
REINFORCING MAIN COMPONENTS
The token cards, showcased within the color guidelines of the Design System, benefited the purpose/use, accelerating development teams in identifying color, sizing, spacing parameters for products that were undergoing modernization efforts / did not utilize Material's UI development framework. Â
(Light) Token Card
(Dark) Token Card
Our team set out to streamline the process and create...
Simplified Component Library, grouping variant sizes and states into a organized container
Faster Customization of new and existing components utilizing the properties panel
Reduced redundancy using variants to showcase different states, sizes, or styles within a single component
Users - Improved user experience (UX) and product understanding through cohesive styles and patterns
FE Dev. Team - Able to understand design files, quickly obtain code snippets from (Design System), develop new features
Design and Analysis - Streamline of product workflows/features and promote internal collaboration and innovation within product(s). It helped reinforce the need for Agile methodologies to be pursued amongst team members and design sprints sessions
Principle #1: Systems solve the easy problems so Products can solve hard problems more easily
Principle #2: Include what’s shared, omit what’s not
Principle #3: Products own their destiny, systems equip them to realize that destiny
Principle #4: Balancing Needs and Expertise
Principle #5: Favor elegance of simple things over flexibility of complex things
Principle #6: Make documentation first as a tool to use, then as pictures to show, then – if needed – as words to read
Principle #7: Measure success on dependency