Switching Design toolstack to design at Scale

Scaling UX is a challenge many design leaders encounter. With limited resources, it’s often impossible to hire more designers. But even if you do have the resources, is hiring to scale a viable and sustainable strategy?

This article looks at how organizations can scale design simply by switching their tool stack. We also provide an example of how this strategy was successfully implemented at the enterprise level–meaning it can work for anyone, especially cash-strapped startups.

Scale design with the world’s most advanced component-driven prototyping tool.

When scaling design, we often think of hiring more people. Organizations consider increasing their designer-to-developer ratio, thinking that adding more designers and researchers is the best way to scale.

There are two problems with this approach:

It’s expensive and increases monthly overheadsIt doesn’t scale inefficient processes and workflowsHow PayPal Scaled Design by Switching Tools

In 2019, Erica Rider, Senior Manager for UX – Developer tools and platform experience at PayPal, was stuck with the challenge of scaling design without hiring new people. 

At the time, Erica had five designers (including herself), +-100 products, and over a thousand engineers working on PayPal’s internal product development projects.

They had many usability and consistency issues. As Erica says in her interview with UXPin, “no two products looked the same!”

Erica’s idea was to empower product teams to build and deliver projects. The problem was most product team members had little or no experience with design tools. Teaching them UX practices and new tools would be time-consuming and more expensive than hiring new designers!

Eventually, Erica came across UXPin Merge–a technology that syncs a component library from a repository to UXPin’s design editor. This technology meant PayPal’s product teams could drag and drop approved components to build new user interfaces. Erica could also set constraints via the React component’s props to ensure product deliveries met a high standard of cohesion and consistency.

By switching tools, Erica scaled design itself rather than her department. PayPal’s product teams complete 90% of their projects, with UX designers acting as mentors and helping when a challenging usability issue arises. 

Switching to Merge has also significantly reduced time-to-market. Product teams can create a one-page UI 8X faster (with substantially higher fidelity) with Merge than experienced UX designers could using an image-based design tool. 

You can read more about PayPal’s story here. And watch Erica’s Design Value Conference talk from May 2022, where she talks about educating the organization about user experience to hold everyone accountable for delivering user-friendly products.

The Evolution of Design Tools

Wireframing and prototyping for web design and usability testing began in the 1980s. In 1990, Adobe released Photoshop 1.0, the UX design industry standard for many years.

lo fi pencilIn the 2000s, we saw a greater emphasis on user experience design and the importance of prototyping and testing. While a wide range of design and prototyping tools were available, they were all iterations of Photoshop 1.0 that rendered raster graphics. 

The tools revolutionized UX workflows but matured very little to meet the fidelity and functionality of code. UX designers had to rely on engineers (and still do at many organizations) to build prototypes for solving complex usability issues.

Nowadays, we have tools for every stage of the design process, including design system tools for managing and scaling design systems.

The Code-Based Design Revolution

We also have a new breed of design tool–code-based design tools capable of building prototypes that accurately replicate code fidelity and functionality.

code design developerCode-based design allows designers to test user actions and functionality they could previously only achieve using code prototypes. Or, if they could build them in an image-based tool, it would take many hours (even days) and countless frames to achieve the desired result.

For example, with UXPin, designers can build prototypes that capture user inputs, perform form validation, verify a username and password, build a functional checkout flow with computational components, and more.

In 2019, UXPin released Merge, revolutionizing the prototyping and testing process. Merge allows designers to build prototypes using the same component library as engineers. You can sync React components via Git or Storybook for other front-end technologies, including Angular, Vue, Ember, and more.

This single source of truth eliminates drift, enhances user testing, improves cross-functional collaboration, and streamlines the handoff and development process.

As we saw in the PayPal case study above, Merge empowers non-designers to build, test, and deliver design projects. Organizations can scale design and its operations without hiring more designers.

Request access to UXPin Merge and see how powerful it is.

eSignature giant HelloSign created this six-step strategy for introducing a new digital tool to your team.

Step 1: Keep the initial introduction simple

Don’t overwhelm team members with an information overload about your new tool and how it works. Instead, design a strategy to educate and implement the tool slowly.

If you’re introducing a design tool like UXPin, perhaps you only get designers to use it for prototyping at first–since this is UXPin’s strongest advantage over image-based tools.

Step 2: Hear out your challengers (and find your champions)

Change is hard for many people. Even if you can demonstrate that your new tool will solve their problems, the overwhelming thought of change and learning a new system makes them reluctant.

We’ve seen this reluctance with organizations implementing design systems and new tools. Finding advocates and supporters who will help you convince others to adopt your new solution is crucial. 

In How to Evangelize a Design System? we outline some strategies for getting stakeholder buy-in and promoting adoption. Also, check out What is Design Advocacy? for techniques on engaging with and educating team members.

Step 3: Practice answering the hard questions

Sit with your implementation team to prepare answers for skeptics. Reluctant stakeholders and team members will always look for holes in your plan, so preempt and prepare for the hard questions.

team collaboration talk communication ideas messsagesIf you come across a question you haven’t thought of, avoid arguing your point and instead answer with, “Great question. I’ll have to research that more and get back to you.”

Step 4: Don’t just share features; share specific examples

Demonstrating what something can do is far more effective than listing the tool’s features. When PayPal switched to UXPin Merge, they used an experiment to demonstrate the tool’s capability to reduce a single page prototype design time from over an hour to under ten minutes.

Results like that are hard to argue against. Find examples to demonstrate a new tool’s effectiveness, and frame those benefits to your audience.

Step 5: Give team members the autonomy and resources to explore

Some people learn by reading documentation; others prefer to watch tutorial videos, and then you get people who what to learn by playing with the new tool.

Give team members the options to learn and discover through a medium that works best for them. Host demos and Q&As so people can learn first-hand and ask questions.

Step 6: Listen to (and use) feedback

Be open to feedback and be willing to try ideas and suggestions. People will be more inclined to reciprocate when you show that you’re flexible and open to ideas. It also gives team members ownership, thus increasing the likelihood of adoption.

You can set up a Slack channel, create a feedback form, organize Q&As, workshops, etc., to engage with team members and encourage feedback.

Get a taste of Merge technology. See how much more consistent and scalable your prototyping gets once you switch to using UXPin with Merge. Request access and start using it.