Outcomes

I've created a figma plugin for design system teams that allows design and development to be closer in sync, allowing for a fairly optimized and automated process for syncing our design assets to our code assets through GitHub. Designers have control over which of their designed assets gets output from the tooling, developers have control over what gets checked into the codebase, site, and packages.

Utilizing bidirectional sync with GitHub based on versioning, design and development now have a dual turn key moment for releasing new changes in things like iconography, design tokens, and illustrations. Designers have the ability to see the status of their work, and developers have visibility into what changes are made instead of reaching blindly into the google folder to grab all icons and hope that nothing breaks again

By bridging the gap between design and code here, our design system team can now create, publish, and release new iconography from Figma to the team‘s codebase the same day. Much better than the 6-8 week turnaround due to meetings, backlogging tickets, and working around release schedules.

From the push of a button, and the approving pull request of a developer, our Figma library, our Web, Android, and iOS libraries, and our documentation site are all updated at the same time.

Outcomes

Me and my coworker Catalina Manea interviewed over 40 designers, 30 developers,and 11 project managers to understand the current landscape of design handoff and design/developer collaboration. We worked with them to identify strong key points along our product process that were critically broken, requiring some form of intervention and reeducation to fix.

Together, we set out to bring these pain points directly to the teams they partner with, like accessibility, content designers, development leads, the design system team. We worked with these teams to develop a list of key things they require when interfacing with them cross collaboratively.

Using this list, I and one other developer used this list to create a custom “Definitiion of Done” interactive Figma widget to be used as a companion that helps designers build good habits and file hygeine before interfacing with their partners during the product design lifecycle.

This tool helps build a standard of things we expect from our senior level designers, and helps teams build consistent habits across the organization.

Teams involved in our pilots have had a large reduction in bugs, and more efficient design handoff as opposed to teams outside the pilot

Outcomes

For our Nike foundations design system library, I created a figma plugin that takes the design tokens that are defined in one figma library and hoists them into other design system libraries managed by the different arms of our organizations. These libraries consume the base tokens in both design and code, while making sure their output from the organization level (enterprise, consumer, and marketing) allow their teams to best optimize their design system tokens and component libraries for their needs.

This work allows for smartly checking for changes, deprecations, and updating referenced tokens in the library, a feature that figma severely lacked during this phase of their product.

This tool augments the work we did for the foundations library, and helps keep design and development a lot closer together in code.

In late 2021, the Consumer, Marketing, and Enterprise leaders got together to figure out how to work towards an even tighter collaboration on design across our orgs. The result led to me and my lead developer on the enterprise design system to co-lead the effort with leads from each org to design a foundational library that feeds all three org-focused design systems.

To pull redundancy of designing the design tokens, base components, and overall codebases, I helped architect and build several internal tools that take the existing properties of Figma libraries, branching, GitHub, and the Figma plugin system and created custom tooling that outputs and links our foundational figma library to GitHub for our developers, and links the foundational library to other figma libraries.

This connection allows us to change underlying tokens in a turn key moment between design and development to ensure the updates to code and design can happen simultaneously with the correct values and little lag time.

Through this, I helped facilitate intense design system workshops, build incredible tooling, and solve a long standing problem in large corporate design systems

I worked for 18 months designing and building the enterprise branch of the Nike design system. Prior to me joining, Nike had several micro design systems focused on internal tools built by various teams because the current system did not support their use case. During the transition to a new internal design organization called Technical Product Experience Design(TPxD), myself and several other designers brought several changes to the way Nike designs for internal experiences.

Here I focused on creating a unified style that honors the consumer design library, yet crafts components and layouts for dense data, analytics, and form inputs. The system was served to several hundred teams and has garnered a high adoption rate across the org.

I was one of the first designers contracted with their team. It was a pre launch product gaining traction with early investors and together with the engineering, design, and product leads, put together a product outline for what they were pitching to our investors.

In this work, I had a lot of roles. I co designed the early product interface, while owning more of the systems level thinking. I led branding and identity workshops with our team, which then expanded into design systems, figma organization management, documentation, user experience process templates and docs, and building our library of assets to help accelerate our product design.

I worked on the Salesforce Sustainabilitu Cloud which functions as a carbon emissions tracker, analytics, and data reporting tool for companies focused on improving the emissions of their buildings and supply chain. This tool was enterprise focused and heavily relied on the ability to intelligently connect high quantities of data with related, relevant, and statistically interesting datapoints across a companies current organizational landscape.

The tooling required improvements in their overarching user experience, onboarding and setup flows, and data uploading and display interfaces. Together with my development team, we explored custom components designed and developed within our design system guidelines, integrations with Artificial intelligence, analytics, and the reporting features of the Salesforce system.

The work here helped push the product to launch ready, allowing Salesforce to open the tooling up for their broader customer list

My work with Edge was a mixture of branding, product design, and design process refinement. I had been onboarded to a pre launch product team that was focused on designing, iterating, and innovating experiences with our browser that set us apart from any chromium based browser. Microsoft had asked me to come in from my work with applying branding to digital products to help with features within edge on both the consumer and development personas.

I had several features I worked on with groupings of other designers on the team. Collections, a quick save tool that augments searching and saving web content for better organization, categorization, decision making, and storing.

After we were getting close to launch, I shifted focus to the development side of the platform to help improve the usability, accessibility, and features for our devtools developer tool. I focused on uniquely propositioned features such as intelligent font debugging, layers and z-index inspection from a 3d perspective, and creating a micro design system in figma for the developer tools.

This work helped grow out features that differentiate our product so when it launched it could garner interest and gain momentum for use as Microsoft transitioned to windows 12