Navigate back to home screen
SVG image of tape
NCR card
Navigate to design systems contentNavigate to content about my cross-functional work
Design Systems introduction
Design Systems introduction
Designed and coded for all iterations of NCR design systems, with combined 100k+ component insertions for both Figma and NPM libraries
Used React, TypeScript, and MUI frameworks to code, test, and maintain whitelabel components for usage across our products
Designed, documented, and coded data visualization library components for React and React Native implementationsSaved 20+ hours of development work by designing and coding design patterns into NPM packages
The thing about failures is that it's the greatest teacher
While I noted the my accomplishments at NCR, I also faced a lot of failure.
NCR’s design systems were adopted and replaced three times. We observed both failures and successes within the lifespans of each of the design systems.
While we saw all three systems used in retail, hospitality, and finance systems (like Walmart and Chick Fil A POS systems), I also saw that each library would be suddenly deprecated and then replaced by a new design system library that demanded immediate adoption.
This resulted in mismatching components from each of the libraries across various repositories, poorly maintained components and libraries, and virtually no backwards compatibility.
Whitelabeling is not the same as scalability
White labeling is an NCR business model that works to make each of our products as flexible and scalable to different brand identities as we can. The most common fallacy at NCR is that white labeling guarantees scalability.
This fallacy prevents all products from being truly scalable, and traps clients into using products that quickly gridlock them to NCR’s ecosystem, without the benefit of ever getting better, stronger products that keep up with the pace of the industry’s changing standards.
True scalability comes from knowing how system architecture can be changed, why system design might have to change in the future, understanding and implementing design patterns, leveraging documentation to allow new developers to easily understand and add to the library, and more.
Real world constraints are real
“Blue sky thinking” is a great way to create unique solutions. However, when the constraints of the real world aren’t considered, the final product can never withstand the constantly changing world.
NCR’s design systems never took into account the fact that adoption of each design system would cause a domino effect across all their products. My team was always being reconstructed with new teammates, with each iteration of teammates expecting their prospective iterations of the design system to be immediately adopted across all our clients. My constantly changing team never took into account the lengthy adoption process for legacy products, the amount of tech debt that increases almost exponentially every time a new system comes to be, or the importance of streamlining the tech stack to industry standards.
Decision making is important
Team brainstorms are important, but strategic decision making is just as important. A team can come up with a thousand exciting ideas, but if that team cannot make a final decision, those ideas are unusable.
Decisions should be made by prioritizing scalability and by knowing what solutions work best with the given real world constraints that face the team.
Decisions should also be made with ego set aside. Team success should always supersede individual egos.
Cross Functionality introduction
Cross Functionality introduction
I was an active participant in the evolution of design components, from creation to production to testing.
I built Figma plugins to assist and validate the design efforts of my peers, including plugins that generate accessible color palettes and typography calculators that generate modular type scales.
I built demos and wrote documentation on how to use all React components, data visualization library components, and general TypeScript style libraries.
I participated in design and accessibility reviews, to ensure all components followed client expectations.