Embedded Files
System design
ROLE: PRODUCT DESIGN, USER INTERFACE DESIGN,
USER EXPERIENCE ANALYST
Problem
There has always been this silo that occurs during the development lifecycle... it happens, I've experienced and seen first hand the pit-falls that happen from these types of initial perspectives on a new project or being 'being thrown into the trenches'! We identified that through the individual product initiatives that were being quickly stood up and ending abruptly after initial release. Why? Was it stakeholder buy-in, user frustration, or just a new approach to the same problem that had been the focus of 'solution-ing'.
Challenge
My role was to advocate in promoting the adoption of design systems and pattern libraries for the AI2C's portfolio of products. I focused the team on understanding the overarching Design Principles we would be pursuing; Consistency, Clarity, Efficiency, Accessibility, and Scalability
This gave me the opportunity to promote and adopt a Design System ecosystem; reinforcing design tokens, educating the importance of guidelines on brand usage, color theory, typography, layout, and components for products created by the incubator teams.
We identified a baseline of atoms, molecules, organisms – Color, Typography, Sizing/Spacing, Components, Guidelines
Reinforcing main components
The token cards, showcased within the color guidelines of the Design System, advocated for the purpose/use, accelerating development teams in identifying color, sizing, spacing parameters for products that were undergoing modernization efforts OR did not utilize Material's UI development framework.
(Light) Token Card
(Dark) Token Card
Creating custom variants + tokens
With the ever evolving use of components, variants, and the properties that make up those components, we aimed to create custom variant options for reuse within the other areas of the products being pursued at AI2C.
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
Who benefited from Design System
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) and established tokens, 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
Defining design principles (learned knowledge)
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
< Back
Google Sites
Report abuse