How Toss Saves 15,800 Hours per Year by Standardizing Design

With more than 1000 employees and counting, Toss has revolutionized personal finance with a stunning all-in-one banking platform. The Toss design team switched to Framer to unify their tooling and design with production-ready components. The newfound prototyping culture, elevated mindsets, and money saved from productivity were just icing on the cake.

By the numbers:

• 120% increase in prototyping team-wide
• Increase in tooling Net Promoter Score from 60 to 85 points (by Toss designers)
• Nearly 15,800 hours saved per year

Toss app

From four tools to one

Finding the right design tool can be a challenge. You need something that fits your team’s needs, and unfortunately for many teams, this means adopting a different tool for every part of the workflow. Before Framer, the Toss team was using Abstract, Sketch, Zeplin, and Storybook to go from concept to production. With this toolset, designers and developers were spending far too much time:

• Deciphering development specifications in Abstract
• Recreating the same symbols in Sketch
• Making them look good in Zeplin
• Trying to see working component interactions in Storybook

SYK

“From now on, we won't use Storybook to check how the component works. Framer answers everything.”

— Sue Young Kang, Platform Designer at Toss

With the switch to Framer, Toss was able to streamline their entire process. No more moving from one tool to another, no more rebuilding, and no more time lost in translation.

An improved mindset, an improved product

Tools are the language of a team and can change the thinking structure of the people who use them. At Toss, this means that a mindset shift towards interactivity followed naturally with the adoption of Framer. Because digital products interact with humans, have context, flow, react, move, and sound, it is difficult to create complete creative solutions only using lists of words and pictures. In order to solve user problems more persistently and fundamentally, you need a tool to convey 200% of the attributes of your digital products.

Previously, when Toss tried to implement good prototyping workflows (which tend to require so much more effort), only a few product designers were available for the task.

SYK

“It's already a functioning component when I draw something in Framer since it is composed of code under the hood. It's a waste not to make a prototype as we have a design that works in code. So far the average rate of making prototypes is up 120% more than before and will continue to increase.”

— Sue Young Kang, Platform Designer at Toss

Framer enabled:

• Higher quality prototyping to solve user problems
• An increased rate of prototyping across the team
• Validation of solutions easier to ship designs faster

The true cost of productivity

Framer has increased productivity at Toss for designers as well as developers—no more time wasted inspecting design files and no more rebuilding components. Everyone has access to the correct production-ready components for all phases of design, prototyping, and building.

SYK

“According to our estimations, using Framer can save 15,800 hours yearly for our designers and engineers. That's worth 263,200,000 won (680,000 USD) per year.”

— Sue Young Kang, Platform Designer at Toss

And it’s all possible because Framer offers something that no other tool can do—making components with code. Toss uses a design system called TDS (Toss Design System). It doesn't have many components, but it has unlimited possible variant combinations.

For a List component, for example, more than 20,000 design combinations are theoretically possible. It was very difficult to implement design components with these characteristics into existing design tools. Because it didn't work properly with previous design tools, it was very difficult to get the team’s 350 developers to know what option was correct for production.

SYK

“When the text on both sides of the list gets longer, where is the abbreviation? Is it shortened? The developer would have to ask one by one to understand all of these things. Kinds of questions like this won't be necessary after we adopt Framer.”

— Sue Young Kang, Platform Designer at Toss

Framer's Code Components allow development and design tools to be completely 1:1 and maintain product consistency. Meaning less time wasted and more time spent on things that matter. Product designers have been able to focus on product design without spending time identifying TDS component specifications.

In addition to keeping the 1:1 consistency, Toss could also streamline animations and interactions right in the components. Before, most TDS components had no interaction options and remained static, so even if they were made with Sketch symbols, they could only be roughly recognized. With Framer, interactions can be standardized and processed into easy-to-use forms by designers.

Get your team started with Framer

Equip your team with an interactive design tool that can ensure you ship better products faster. Contact us today for a free demo.