Library of reusable UI components

As a Sr. UX Designer at Topix, I worked with engineering and product teams in the design and conversion of static designs (Photoshop & Sketch) into interactive and re-usable React components, that are fully complaint with JS/HTML/CSS best practices.

UI components would range from simple color previews for SVG Patterns, to fully configurable modules with code examples ready to use for developers.

Benefits of this approach:

• All the component’s states and props can be directly previewed and tested.

• By having a stand-alone page for each component, unnecessary code dependencies are quickly identified.

• Immediate visual feedback reduces trial-and-error when configuring a component specific settings.

• In-page preview of different viewport sizes, reduces number of bugs and simplifies testing in large and small mobile devices.