OVERVIEW
Quad is a Fortune 500 marketing solutions company stationed in Sussex, WI. As their UI Design Intern, one of my biggest responsibilities was updating and maintaining our growing Design System site and library in Figma. While we had several components designed, we needed many more to be built and updates made to existing ones.
PROBLEM STATEMENT
Quad had an existing Design System built, but it was unfinished and not being used consistently by teams.
UPDATING THE COMPONENT LIBRARY
In my time at Quad, I helped design over 15 components and updated several outdated ones.
Navigation: A big part of my role working on the design system required revamping Quad's main navigation bar. The navigation menu needed to be easily expandable/collapsible and responsive on mobile.
CREATING DESIGN SYSTEM PAGES
The second phase of updating the design system was building out the site pages and the educational aspect. Pages were designed to outline components and describe best practices for designing across Quad applications, including color do's and dont's, typography hierarchy, component states, and more. In my time at Quad, I designed over 10 pages for components and design practices and the page template for newly added pages.
Emphasis was placed on building out the design system since the old design system package was still being used by several sites, and UI inconsistencies were seen across Quad's platforms. Our UI-UX team's job was to educate teams on the new design system and help them implement changes.
Navigation Page
File Preview Component Page
