Streamlining Digital Product Design
Integrate Sketch, InVision, Zeplin and Slack to streamline the efficiency and collaboration of design teams.
Why streamlining product design is a big deal?
Collaboration between artists, designers, developers, and clients have always been cumbersome.
The first obvious problem is that the tools designers use are not friendly for most developers and clients, and the majority of those tools completely lack collaboration features creating complexity for other parties to provide the continuous business and technical feedback that designing a product requires.
Traditionally designers used PDF files to share their work but keeping track of different design versions sent this way has been a nightmare since the minute someone came up with that idea.
On top of that, there has always been a significant gap between traditional designer deliverables and actionable assets that could be consumed by developers to do their job.
Creating those assets required by developers (like detailed graphical style guides and correctly scaled and sized logos, icons, and pictures) end up meaning big work overheads for designers, and not to mention the massive headaches they suffer trying to maintain them updated over time.
Also, even worse, some companies ask their developers to decode the styles from the high-resolution comprehensive layouts (aka “design comps”) received from designers and to cut logos, icons, and pictures from them. For obvious reasons, these tactics result in a poor quality implementation of the design in the actual product.
At our organization, we struggled for a long time looking for a way that could help us to solve those issues effectively and to deliver high-quality results.
Our approach
We had to wait until a new generation of tools not only appeared but got decently mature. These tools are Sketch, InVision, Zeplin, and Slack.
In the next few lines, I will explain how they can be orchestrated to make a team of designers and developers sound like a symphony for your clients.
It is fair to mention that not all the journey was a pleasant ride. In fact, the beginning of it was very challenging because these tools had lots of glitches and missing features (specially Sketch and Zeplin) compared to the professional grade tools we have being using in the past (like the ones from the Adobe suite).
Moreover, while they still today could have some issues at specific points, it is incredible how they improved in the last couple of years, and most importantly how they grew together in an amazing interconnected ecosystem.
Sketch and InVision, making design collaboration-ready
It all starts with Sketch, a tool that already replaced Adobe Illustrator as the “de-facto” standard for modern digital product designers.
The first thing that has to be set up for every project is the integration of Sketch with another tool called InVision (in our case we make this integration thru Google Drive).
InVision enables an amazing cloud-based reviewing and collaboration (feedback gathering) system for design comps. This tool makes easy to comment on specific design elements and to follow their evolution during the design iterations keeping the historical track record. It also supports scripting the interaction points on every view and the application flow between those views so that UX researchers can use it for basic UX user testing sessions.
The integration between InVision and Sketch keeps them in sync so every time the designer saves changes in Sketch, these changes are automatically updated in InVision, enabling clients and developers to review them based on the previous comments and always work on the latest version of the designs. All this design update in the cloud happens effortlessly for anyone, so now designs can iterate effectively up to ten times a day instead of just once or twice.
Connect InVision to the amplifier with Slack integration
To add another layer of magic, we make use of the integration between InVision and Slack, a great communication tool for agile teams. This integration enables Slack to notify people involved in reviewing the designs thru “slack channels” in real time. These notifications are great because each time a new version of the design gets published -or each time someone added a comment to it- the interested people is immediately notified, minimizing designers wait times for feedback and making very transparent to everyone the amount of work and progress made every day.
Allow a robot do the heavy lifting
The final layer of productivity boost comes with the integration of Sketch and Zeplin, a tool that makes the transition between designers and developers easier by automatically generating style sheets for the projects and a set of unique “Zeplin views” corresponding to the design views created for the product.
Those “Zeplin views” are massive time savers because developers will find every single asset or information they need to implement the design views in their code already embedded right there, including element sizes, graphical assets, text formatting details, colors, shadows specs details, distances between elements and more… It even creates basic CSS styles for web projects, so developers do not need to start their CSS classes from scratch.
Designers love it; developers love it. Simple as that.
These integrations have a tremendous impact because they maximize team efficiency and save tons of design and development hours per project, something with a radical impact on clients budgets and their success chances.
The benefits are significant for everyone because designers enjoy receiving real-time-like business and technical feedback that facilitates quick correction and minimizes wasted effort, and developers see how they are helped to deliver better quality on the final product by virtually eliminating all the guessing for the typically missing details from traditional design comps.
For any world class design and development firms like us, having a process like this is a must have because it boosts accountability on the billed hours and increases the visibility of our talent.
And we all know that every design firm CEO wants to have their clients saying how amazing their team is.
Are you looking for a passionate team that can help you envision, design, and build amazing products? Drop us a line.
About Ingenious
Ingenious is a distributed product design and software development agency with offices in Montevideo, Uruguay, and Denver, Colorado, and a team distributed in more than five countries. We create products and build software that people want to use for challenging industry segments like healthcare, education, and government.
