HubSpot Figma Migration

HubSpot is a CRM platform used for inbound marketing, sales, and customer service.

During my 2022 internship with HubSpot, the Brand and Creative teams were in the beginning stages of their design system migration from Sketch to Figma with the goal of driving more design flexibility and collaboration across UX/UI Designers, PMs, Art Directors, and Developers.

To support this goal, I completed the following projects:

Synthesized findings from a Creative Solutions team workshop
Designed templates for Figma cover design and file structure
Created surveys to measure progress and satisfaction of the migration

Role / UX Research, Design System, Project Management

Task / Support a design system migration and reveal opportunities to improve the Brand and Creative teams' internal design process

Duration / 3 month internship

Tools / Figma, Sketch, Asana, Jira

Workshop Synthesis

Activity 1 /

I collated feedback from nine designers and combined individual workflows into a single design process to understand their pain points. Then I categorized each pain point as tactical or broad to inform the action plan for addressing their pain points.

Tactical - can be addressed within the Figma Migration; includes tools that designers need more urgently
Broad - can be addressed in the way teams work and collaborate; requires involvement from stakeholders and product teams

From all of these useful insights, I gave the team recommendations for next steps in the migration that will empower them to achieve the superior standardization, collaboration, and control they are seeking from Figma that Sketch cannot provide:

Expectations for the migration /

Documentation templates
Ability to design, prototype, and comment in one place
Ability to quickly and easily find everything related to a project in one place
Easier collaboration
Standardized feedback
Version control

What came next /

Figma cover designs
Standards and templates for Figma page organization
File saving system in Figma
Improvements to templates & documentation in 'Tactical' areas
More collaboration

Cover & File Structure Templates

A lack of standardized templates was a common pain point identified in the previous workshop, so I created templates for file covers and pages to improve discoverability.

I conducted a follow up workshop with the Creative Solutions team to better understand how designers want file pages to be organized and how they use thumbnails. This collaborative process enabled the UX and UI designers to contribute to the new Figma standards.

1 /

Design your own cover

I gave designers some sample data points (e.g. stage of file, Jira ticket, etc.) and a workspace to design a mock-up of their preferred Figma thumbnail.

These are samples of two of the nine mock-ups that were collected in this workshop.

Final Template /

Surveys

I measured the success of this migration through a survey for designers and developers.

First, I identified and defined the following metrics that the survey should capture:

Discoverability / average amount of time to find info
Collaboration / file sharing, comments, feedback for design reviews, and dev handoff
Efficiency / average amount of time to create designs
Satisfaction / net promoter score (NPS); specific to the internal design process
Engagement / amount of time to fully embrace Figma & stop using Sketch

Next, I consulted a UX researcher on the team who helped me fine-tune the Likert scales and survey language to avoid any biases.

The final step was creating a survey schedule. I decided that 3 rounds of surveys sent out 6 months apart would provide the best indicator of the migration's progress from designers' and developers' perspectives. This would ultimately inform whether more support was needed or if there were any missed opportunities for improvement in the migration process.

Here is a sample of Round 1 of the survey for designers & developers:

Designer version /

screencapture-docs-google-forms-d-e-1FAIpQLSf6Mu5OTy4Djp4DH0094FICfpDu5vF3MqjkZA6QdRrMcJL8

Learnings

Organization is everything

Using Jira and Asana, card sorting activities, and feedback categorization ensures that all details are captured during this transition phase.

Lean in to feedback

While receiving feedback and edits from stakeholders can be cumbersome, an open line of communication contributes to a better

end product.

Language

matters

Always ensure that surveys are free of biases and that workshop instructions are clear to avoid confusion.