/ PORTFOLIO

/

VNG_

BUILDING A GLOBAL
DESIGN SYSTEM

SUmmary

Increased the maturity and scale of The Vanguard Group’s design system through new components, tokens, and patterns.

Improved the quality and speed of design deliverables through new processes and templates for design, QA, and documentation.

Facilitated meetings, working sessions, and workshops with designers, developers and product owners to strengthen collaboration and teamwork across the team.

responsibilities

UI & UX Design
Component Delivery
Technical Documentation
Design Strategy
Meeting Facilitation
Project Management

VNG_

BUILDING A GLOBAL DESIGN SYSTEM

SUMMARY

Designed, documented, and shipped 25+ new Figma-based components and patterns for the client’s design system.

Facilitated multi-disciplinary meetings and working sessions to create new processes, templates, and standards.

Increased org-wide adoption of the component library through documentation, collaboration, and socialization.

responsibilities

UI/UX Design
Technical Documentation
Design Strategy
Accessibility QA
Meeting Facilitation
Project Management

VNG_

BUILDING A GLOBAL
DESIGN SYSTEM

SUmmary

Increased the maturity and scale of The Vanguard Group’s design system through new components, tokens, and patterns.

Improved the quality and speed of design deliverables through new processes and templates for design, QA, and documentation.

Facilitated meetings, working sessions, and workshops with designers, developers and product owners to strengthen collaboration and teamwork across the team.

responsibilities

UI & UX Design
Component Delivery
Technical Documentation
Design Strategy
Meeting Facilitation
Project Management

VNG_

BUILDING A GLOBAL DESIGN SYSTEM

SUMMARY

Designed, documented, and shipped 25+ new Figma-based components and patterns for the client’s design system.

Facilitated multi-disciplinary meetings and working sessions to create new processes, templates, and standards.

Increased org-wide adoption of the component library through documentation, collaboration, and socialization.

responsibilities

UI/UX Design
Technical Documentation
Design Strategy
Accessibility QA
Meeting Facilitation
Project Management

SECTIONS

OBJECTIVES

1

CONTEXT

2

PROCESS

3

design

4

specifications

5

documentation

6

OBJECTIVES_

During my year working on the Constellation Design System, we were focused on three objectives to improve the design system and increase the adoption and buy-in by our product feature teams.

improve our deliverables

Along with a shift from Sketch to Figma, we focused on:

Improving the overall quality of both our design and documentation deliverables

Increasing our efficiency and the rate of our updates and releases

Leveraging the latest and greatest Figma features for components and libraries

Improving the organization and usability of the system for both designers and developers

update our process

With a growing and maturing team, we also needed to improve our internal processes for scoping, designing, speccing, and delivering new components to the system.

increase collaboration

To support the new processes and higher quality deliverables, we invested in deeper collaboration with our developers, content strategists, and stakeholders, as well as the CXD teams consuming the system.

CONTEXT_

Business landscape

The recent expansions of the Customer Experience Design department revealed an increasing need for a robust and well-supported design system to support the speed and delivery of new products and features.

Working with design system guru Nathan Curtis of EightShapes, our team was rebuilt with a focus on the deliverables, process, and collaboration. The end-goal was to increase the maturity of the design system maturity, create better ways of working for our team, and provide more value to the design department, and org as a whole.

Our team

The Constellation Design System team itself was split into two sub-teams, 'Features', and 'Infrastructure'. I worked on the Feature team, focusing on deliverables, process, and socialization, with Infrastructure maintaining our tech stack, documentation sites, and libraries.

“A system's value is realized when teams ship features using the system's parts.”

- Nathan Curtis, EightShapes

PROCESS_

Overview

As the component library grew and we transitioned from Sketch to Figma, we updated our internal processes to support our growing team and lean into a more agile ways of working.

We created the process framework below to formalize the steps needed to deliver a new component to the system, and created new opportunities for collaborative and parallel work.

This structure helped us scope and roadmap future sprints and quarters, allowing us to work on multiple components at once, and encouraged flexible planning.

It also increased collaboration across the disciplines by bringing stakeholders and developers into the design process earlier, to help define or clarify technical and business requirements, and created parallel workstreams with well-defined touch points.

Propose

To improve our process in the 'Propose' phase, I created this template for scoping new components. The document would define and outline the core functionality, use-cases, accessibility considerations, business values for the component, and include visual references and examples.

Gathering all of this information in one place created opportunities for collaboration, feedback, and sign-off with all disciplines, stakeholders and product owners before committing to the work, helping us avoid making major changes later on in the process.

DESIGN_

Exploration & research

To improve our deliverables created in the 'Design' phase, we would start by experimenting and iterating on interactions and visual solutions based on the information outlined in the new proposal document.

We would look at how competitors designed and documented the component in their design system to understand the interactions and the problems it solved.

We’d also look at other components in our system, and our brand guidelines, to ensure consistency across the library and to avoid breaking conventions and standards.

This step was highly exploratory, and varied wildly depending on the component and functionality required.

Exploration & research

We would look at how competitors designed and documented the component in their design system to understand the interactions and the problems it solved.

We’d also look at other components in our system, and our brand guidelines, to ensure consistency across the library and to avoid breaking conventions and standards.

This step was highly exploratory, and varied wildly depending on the component and functionality required.

Exploration & research

We would look at how competitors designed and documented the component in their design system to understand the interactions and the problems it solved.

We’d also look at other components in our system, and our brand guidelines, to ensure consistency across the library and to avoid breaking conventions and standards.

This step was highly exploratory, and varied wildly depending on the component and functionality required.

Team review

To improve our collaboration, we opened up our initial design reviews to members from all disciplines to discuss technical requirements, confirm the overall scope, and address any surprises that had come up in the exploration and research.

Close collaboration with the dev team would also start at this step, as aligning on the API structure and naming conventions allowed them to start building the infrastructure for the component, and begin prototyping as needed.

Team review

accessibility review

We also shared our designs proposals with the CXD accessibility team to ensure our components would be supporting AAA WCAG standards and accessibility interaction best practices. These conversations were incredibly valuable and eye-opening, increasing the knowledge of our team as whole and improving our work across the board.

accessibility review

Finalize

To ensure the highest quality of the final Figma library deliverable we would name all layers, utilize color tokens and nested components, account for all variant combinations, fine-tune the styling and spacing, and try to mimic the code structure (as best as possible).

All variations and customization labels were documented and named to match the taxonomy used in the API, ensuring alignment between libraries, and improving communication between developers and designers.

The final component would then be reviewed by both a designer and a developer, and a rigorous QA process would be conducted.

The component could then be committed to the library alongside documentation and release notes, making it available for other CXD teams to use in their projects.

Finalize

The final component would then be reviewed by both a designer and a developer, and a rigorous QA process would be conducted.

The component could then be committed to the library alongside documentation and release notes, making it available for other CXD teams to use in their projects.

Finalize

The final component would then be reviewed by both a designer and a developer, and a rigorous QA process would be conducted.

The component could then be committed to the library alongside documentation and release notes, making it available for other CXD teams to use in their projects.

SPECIFICATIONS_

Overview

For the 'Spec' phase of our process, I worked with our design lead and Nathan Curtis to create a new template that communicated the functionality and behavior of the component to our developers. You can see an evolution of this template used in the popular "Eight Shapes Specs" Figma plugin.

Standardizing this deliverable helped us use the spec as a source of truth, and communication tool. Designers and developers would work on this document together to align on technical feasibility, visual design and token alignment, API naming convention, animation details, and accessibility considerations.

DOCUMENTATION_

Overview

Before release, component documentation would be created and uploaded to our documentation website.

In collaboration with a content strategist, I would write the usage guidelines and best practices, describing and showing the various configurations available, and outlining any content and accessibility constraints or considerations.

This documentation was heavily socialized with the both designers and developers across the feature teams to encourage correct usage of new components, improve cross-discipline knowledge sharing, and reduce the amount of repeat questions in our support channels and office hours.

“Miles has slowly become an anchor for the design system team on Vanguard”

- Morgan Knepper, Lead Designer

CONCLUSION_

Outcomes

We truly embraced a "learn as we go" mentality and an "iteration" mindset, to create new tools, templates, and standards that helped us communicate, collaborate, and share knowledge.

By including team members from each discipline in each step of the process, we increased our ability to collaborate, and broke down the barriers between design and development.

With our new processes and templates, we improved the speed of delivery and overall quality of our components and updates, and created more opportunities to socialize and influence CXD as a whole.

One of the best improvements was setting clear agendas for clear and productive meetings, which helped us avoid wasting time, repeating work, and miscommunicating.

I’d like to shoutout my team members for their collaboration, mentorship, and camraderie, including Morgan Knepper, Sean Glenn, Wooyoung Song, Kristine Watkins, Ben Lee, Matthew Lewis, Andrew Parry, Steven Estrella, Alex Sauls, and many more.

Personal Feedback

I received feedback on my individual contributions and role in the team that I would like to share below.

“Miles has slowly become an anchor for the design system team on Vanguard. The team has added many new members recently and during that time Miles has continued to produce great work and be a stellar example for the other members. Miles has so much knowledge and expertise with building components and it's exciting to see him share that knowledge.”

“Miles has been speaking up more and being more assertive within the team. As always, I challenge him to lean into this more as I think the team and myself have more to learn from him.”

“Miles has become a strong designer on the VET team taking the lead on a large number of new components freeing up other team members to handle other work. He delivers strong presentations to the design and development teams when talking about specifications of components and patterns. He leads meetings in the UX critique channels, office hours, and collaborates closely with the development team to delivery proofs of concept that lead to production ready components.”

“Miles is a great teammate and excellent designer, he has some newer designers joining the team and he will be a mentor to them with his strong knowledge of everything in the project so I encourage him to push the new designers to own some of the new work and share that workload so everyone will benefit.”