Less Time Spec’ing, More Time Making
Visa distinguishes itself from other technology companies by being "everywhere you want to be". Whenever its customers need to make a purchase, regardless of where they are in the world or with what payment form factor they know they can rely on Visa to successfully facilitate the transaction.
Visa Inc. is an American multinational financial services corporation. It facilitates electronic funds transfers throughout the world, most commonly through Visa-branded credit cards, debit cards and prepaid cards.
We sat down with Jonathan Yap, Product Designer at Visa Design Studio, to find out how they used Sympli and what their workflow looked like. By simplifying workflow processes, Sympli Handoff helps Visa’s design team spend less time stressing about logistics and more time thinking creatively.
The Brandbooks feature is really valuable in bringing consistency to design implementation. Once I see my design in Sympli Handoff I can spot inconsistencies that would usually be picked up by our developers.
Jonathan Yap
Product Designer
How long have you been using Sympli Handoff?
Jonathan: I’ve been using it for four months now on a pilot, and soon heard great feedback from across multiple teams. We are now in the process of adopting it across the entire design team.
What do you like about it?
It’s amazing how the specs tools integrate right into IDE and Sketch. You guys came out on top of other tools thanks to nifty little layering tools and how easy it is to adjust font styles and coloring highlights in our designs. We actually not only use Sympli Handoff for specs, but for collaboration and discussion as well. Our other designers have also given some fantastic feedback on how easy it is to integrate right into our workflow in Sketch.
Sympli provides a single portal to retrieve the most accurate, up-to-date version of the design, which minimizes the possibility of inconsistencies.
Why do you use it?
The way Sympli Handoff makes collaborating with engineers and handling assets is such a breeze, it’s hard to not use it. Now I don’t have to worry about whether my designs have the right colors or asset size. The Brandbooks feature is really valuable in bringing consistency to design implementation. Once I see my design in Sympli I can spot inconsistencies that would usually be picked up by our developers.
I also like that it carries the "burden" of asset management. Sympli Handoff controls naming conventions and provides asset generation. When I complete a component whether it includes assets or not, I know that’s the last time I have to think about it after shipping to Handoff. It also helps limit human error eliminating QA bombarding me when a hex value is off by a letter or number. Reduced manual documentation has been a lifesaver.
What design and development platforms do you use?
We use Sketch for design and Android Studio/Xcode for development.
How is the design and development team set up?
Design teams are usually led by the product designer and supported by additional designers who work on multiple projects simultaneously. We have two development teams per platform with a single Dev leader.
What does your overall workflow look like?
Our workflow follows a four-step design process: discover → define → design/implement → evolve, which upholds the design thinking methodology. We usually start with a lot of research using offline medium (paper/whiteboard) before narrowing down a trajectory for the journey we’re about to undertake. Once we have finished most of the pre-work, we’ll design a quick prototype to test out internally and externally. The scale of the project will determine the fidelity of the prototype. Once we complete the prototype, we’ll incorporate the final visual design along with development before testing it. And then we’ll continue to evolve and develop the design in the next iteration based on feedback.
How have you integrated Sympli into your current workflow?
I’ve introduced Sympli after a deep dive into different spec tools. It works hand-in-hand with Invision which introduces the flow into a prototype, while Sympli acts as a source of truth to pass along the most accurate and latest design to the developers (and QA — recently requested a style sheet as a source of truth while testing) for implementation in our design/implement stage. Sympli is a mechanism to ensure consistency by providing developers with the most accurate and latest designs during the implementation stage. It also helps because it hosts comments, feedback, and notes in context within the design. It’s critical to our process to understand context clearly, especially when a lot of our teams are remotely spread across the world. The plugins also enable us to work efficiently within our own environment, be it in Sketch, Xcode, or Android Studio.
How has Sympli helped?
It provides a single portal to retrieve the most accurate, up-to-date version of the design, which minimizes the possibility of inconsistencies. Sympli has also eliminated a lot of the burden involved in passing the design over to developers. With less time speccing, there’s more time to spend on creative problem-solving with the support of Sympli spec automation vs manual spec documentation.
Hours previously spent manually documenting specs are now opening up time for designers to spend time on what they do best, design. Also, it is opening the door to explore new tools to further enhance our workflow.
