PRODUCT DESIGN
Our tried and tested way to scale design with systems
How we use a systems-first approach to tackle design challenges in product delivery
One of the great benefits of Canva is the ability to publish your design in many different ways, from printing to Pinterest. On our Product Design team, we call these “publish endpoints” — the potentially limitless ways to take your design from the Canva editor out into the world. As the demand for more publish endpoints continues to grow, Canva product designer Iain Dowling shares how we use a systems-first approach to tackle design challenges in product delivery.
A fundamental principle of Canva is that, within the one platform, you should be able to create a design and then, with a single click, publish anywhere.
Whilst our design tool is well developed, it’s always been important to keep iterating our product to give our community access to a variety of new publishing options. We started off by handcrafting each new publish option, but we soon saw that this approach wouldn’t scale.
It soon became quite apparent to us that we needed a systems-first approach to avoid any design bottleneck. In this blog, I’ll share how we leveraged these systems in order to accelerate product delivery — starting from launching our visual design system, to communicating through a task flow diagram system, and then bringing it all together with our own approach to the double diamond design system.
Creating Systems
1. Launching our visual design system
Since our launch in 2013, Canva has grown from strength to strength, with over 10M users from all around the world. We used to be able to count our team on one hand; today we have over 350 people working across 3 offices, with a product design team of 12 and 100+ engineers working on delivering new product iterations every day. As the size of the team increased and the complexity of the product grew, inefficiencies grew alongside.
For our ever growing team to remain productive, we launched a new design system earlier this year. From having no standard rules for design resulting in slightly different interfaces for the same needs: varying styles for similar buttons, clashing element layouts, and differing interaction patterns within the same flow, any design changes were incredibly hard to execute — which was a constant headache for our design team, ultimately rearing its ugly head in our user experience. It also took longer to build things, as our engineering teams were maintaining code in multiple places.
Results
By introducing more consistency, the improvements were significant. With the foundation of a shared set of guidelines and principles, the team soon found ourselves speaking the same language regardless of what product we were working on, or where we were based — making it quicker for us to implement any changes so we can move on to bigger problems. In addition, we were able to create a consistent user experience across all platforms (web, iOS and Android), and ship new updates quickly and efficiently.
2. Building a task flow diagram system
My team are accountable for our publish endpoints, so it made sense to start with this challenge. We set out to launch a host of new publish endpoints for Canva, including Linkedin Company Profiles, Pinterest and Slack. As we planned to add more and more, it was obvious that we needed a simple way to communicate the growing feature set with the broader team of product managers, engineers and designers.
To do this, we had to simplify our processes to its core essence, leveraging a task flow diagram as a communication tool for the team.
Simplifying the design process to its core essence
In the past, every time our team identified a valuable endpoint to integrate, say for example, Twitter, it would be designed and implemented in isolation. Once complete, we would identify the next endpoint, say LinkedIn, and start the process again.
As a freelance consultant in a previous life, I saw many businesses, from small to blue-chip clients, facing a similar challenge. A steady pipeline of new features would be requested, designed and implemented one at a time, giving the false benefit of short-term progress, but in turn creating burdens of duplicate designs and code cruft.
The vision of an overall system and feature pattern was lost, and the wheel was reinvented each time a new feature was added.
There are many problems with this kind of process, such as:
- Resource-heavy: starting the design process from scratch for many endpoints is time-consuming, costly and inefficient.
- Legacy documentation: creating new design artefacts for every individual endpoint results in duplicate screens, making design updates a nightmare, increases the likelihood for mistakes and maintenance becomes a real problem.
- Code cruft: when designs are communicated to engineers one endpoint at a time, bespoke code is often created rather than leveraging shared components, thereby contributing to maintenance and performance issues.
Taking inspiration from the age-old manufacturing process, we looked into whether we could identify commonalities within our endpoints and design a universal ‘mold’, allowing us to rapidly ramp up production.
Handcrafted vs Mass produced
Many of us tend to think handcrafted equals best, but there’s also a time and place for mass production. Mass production involves making copies of partially completed products quickly to allow workers to tailor each product with various finishing touches, rather than having a worker create a whole product from start to finish. This process has helped many industries iterate and meet supply and demand on a whole different level. When adopting this mindset for the design process in a tech company, the same benefits ring true.
How we did it
Phase 1: Mapped out our user journey
The concept of being able to publish anywhere means different things to different people — some think online, others think hard copies. Some think anywhere in school, others, anywhere in the world. So before we started off by pulling together a list of potential endpoints to ensure we’re on the same page.
We set out to prioritise the biggest areas of impact based on:
- Feedback from our Customer Happiness Team;
- End-user interviews and surveys;
- SEO and analytics; and
- Identifying usage patterns in our platform.
Deriving insights from these sources helped reaffirm our plan to prioritize certain endpoints over others, so our decision making was effectively guided by market potential, influenced by how quickly and easily we could implement.
Phase 2: Identified patterns
The next step is to see if we can identify any similarities and commonalities between the endpoints.
Taking social integrations as an example. Pinterest and Tumblr are two different image sharing social platforms, with different users, different languages, different styles of engagement. By identifying similarities and commonalities between the two of them, we’d find that both are social media platforms where a user manages multiple boards/blogs, meaning that the path for a user to publish a Canva design on either platform could be the same.
Example:
- The user journey is not determined by a particular third-party platform, but by the user’s goals. We needed to design a system that allows users to sign-in to their social accounts through Canva, no matter their preference of social network.
- So the conversation stops being about how do we design an experience for integrating Facebook and another one for Twitter, but more on how to design a system that lets users connect to all their personal social media accounts.
By taking the specific features of each endpoint and finding the patterns that connected them, we aimed to abstract the problem and think about the idea of an endpoint itself at a higher level — not only in terms of specific API endpoints and integrations, but in terms of user goals and patterns of interaction.
Once we were able to understand the most important things users need in order to achieve their publish goal, our focus was redirected to solving a core, repeatable problem, rather than prematurely offering a solution.
Taking systems thinking to the next level
Approaching design problems from a systems perspective has helped us simplify other processes at Canva as well. When we created a design system to provide a shared language for our designers, engineers and product teams, we experienced a large improvement in productivity at Canva. With a new and improved design system, we were able to tackle bigger challenges — including a goal we’d set our eyes on from the very beginning: to empower the world to publish anywhere. Namely:
- Enabling our community to share their designs from within Canva, across different publish endpoints;
- Scaling effectively and efficiently to support the huge number of possible endpoints out there;
- Allowing for third-party API changes, or the emergence of new endpoints.
Building a design task flow
With this design task flow, it is now far easier to take action required by third-party API updates. For example, we were able to adapt quickly and seamlessly to Facebook’s comprehensive API and policy changes this year.
The task flow is one asset, and the following mockups provide another look into our process. There are tokens for dynamic content so that one mockup is representative of all potential possibilities, rather than having a new mockup for every introduction of a new endpoint.
Social is just one facet of publishing; this process translates to the analog world as well. Our Canva Print team were also able to use the same approach to create their own version of the system and other design artefacts specific to print endpoints, meaning we can now scale to include printing T-shirts, dresses, banners, or stickers one day — the potential is endless.
Results
Although it required investing more time upfront, our task flow design system has allowed us to rapidly integrate new publish endpoints. What this means for us is that in just 3 months alone, our engineers were able to implement with minimal direction — so much so that we increased our publish endpoints from 7 to 27 in rapid succession, including Tumblr graphics, Etsy shop icons and a Twitch banner. We managed to do this AND save hours of our engineers’ and designers’ time, which would have otherwise been spent on solving the same problem, over and over.
So what was once a laborious affair, the team now had a single reference point to kick off the process. Hypothetically, should a new social platform come to market and prove to be very popular, we can now integrate super quickly with close to zero design requirement and a codebase that borrows from a library of shared components — a testament to the future-proofing qualities of the system.
With this new design system, we now have the ability to scale quickly to reach more publish endpoints even faster than before.
2. Using a system for the overall design process
A commonly used system in the design process is what we know as the principle of the ‘double diamond’.
The double diamond design system is traditionally defined by 4 phases: discover, define, develop and deliver, where a number of possible ideas are created (divergent thinking) before refining and narrowing down to the best idea (convergent thinking), and then repeating the process so that the problem can be properly defined.
At Canva, we follow the same methodology — albeit with a few slight iterations, in which we take an idea and pass it through several design considerations before we land on a prototype that best fits our solution.
Whilst every project needs a nuanced way of working, what these guidelines offer is a checklist that we can use to make sure we’re ticking off all the right points before we land on a final design.
For example, when we used the task flow system during the Storyboard phase, we were able to help our engineering team visualize how much resourcing was involved, and give them the confidence that all edge cases were considered from the start, rather than becoming problems later in the process.
Getting these systems in place has helped us focus our creative efforts on the problem at hand, and ensuring our team is all singing from the same song-sheet.
Results
By adopting this design system, we’re ensuring that our time is spent wisely; that we’re defining the problem that needs to be solved right from the start, and that all functionalities of the final product is considered with the end user in mind.
Final thoughts
There is a common thread throughout all of our designs systems at Canva.
For us, the definition of a good system is one that is flexible and allows for its users to adapt it creatively for whatever challenge is at hand. It works best by acting as guide rails with moveable components that can be altered to help the team move forward with its goal.
Having the right systems in place will not only get us there faster, but it will also help us produce the right outcome every time.
The continuous challenge for us it to keep using our systems creatively to solve new problems, and always seeking for other processes that can benefit from a unified design system.
A design documentation cheatsheet
I mentioned earlier how design changes can lead to legacy documentation issues, different versions of designs floating around that can cause confusion amongst the team as to which design is “correct” or the latest. With this in mind, it’s important to have one source of truth, with a documentation style to which everyone is aligned. Read more about how we created a shared design system to help us ship our designs faster. So, if you haven’t had a sit down with your team recently to align on your documentation style, then chances are you might be all speaking a different language. The benefits of aligning on a carefully structured design doc are countless, but namely they:
- Improve cross-functional team communication and effectiveness;
- Offer a single source of truth for design requirements that are accessible to anybody in the business;
- Are feature-centric, rather than person-centric;
- Minimize the pain of changes and updates; and
- Give designers more freedom to design.
Here’s the anatomy we use at Canva which you may find helpful:
For more details on our current job openings, visit Canva’s careers page here .
Originally published at https://product.canva.com on October 11, 2018.
