Two months with Zeplin.io
Since June, our design team has put Sketch at the core of our UX and UI tools. You don’t need to read it first (I’ll remind you again later), but my previous post “UX Confessions: Sketch app gave me a greater appreciation for visual design” addressed how it has affected our work between UX and UI. In summary, it is great.
Our next step as a Sketch-centric design team became understanding how it affects development. In other words, is what we’re designing being developed? I think there are three foundations to successful design in this way; speed, understandability and detail.
PNG exports
At first we exported designs in Sketch to PNGs and handed them over to developers. The problem with this (rather predictably) is functionality wasn’t clear. Often we were asked “What does this button do?”. We’d try and help with a verbal explanation but this would often result in us explaining the same thing again and again. Developers didn’t have enough detailed information about the visual design which caused visual inconsistencies and developer’s best guesses.
Speed = 9/10
Understandability= 2/10
Detail= 2/10
PNG exports + Axure prototypes
Our solution to this was to add Axure prototypes which explained functionality and this was successful for explaining interactions in detail. However, the problem we created from this approach stemmed from having multiple files at different fidelities. It created a learning curve for developers who hadn’t been briefed on our process. They had to figure out what the document (and our attempt at annotations) was supposed to be explaining from the fidelity. The developers thought “Does this Axure prototype have the right visual design?” or “Is it this PNG the designers want me to follow?”. Not only that, when things needed to change it would take duplication of work and re-communication to developers which created more work. It was clear having multiple types of files were difficult to connect in a meaningful way.
Speed= 7/10
Understandability= 6/10
Detail= 4/10
Zeplin.io
It has been about 9 weeks since we iterated to this tool/process. If you haven’t used Zeplin before, I’ll try to explain it.
Speed= 9/10
Understandability= 8/10
Detail= 8/10
You have your beautiful designs in Sketch which you’ve spent time making sure all the fonts, font-sizes, shape sizes and symbols are correct. Take your Sketch file and export it to Zeplin. Simply select the artboard(s) and press cmd + e. Zeplin communicates all the UI to the developers on your project. In other words, it is the automation of the visual design specifications process but with more detail. Other useful functionality includes; commenting on designs, mentioning other users, automated stylesheet building and sharing designs publicly with a link.
When it comes to the raw speed of Zeplin, it is as fast. Arguably it is slightly faster than the PNG export approach. Exporting things slightly faster from Sketch isn’t anything to write home about. However, where Zeplin really shines is the understandability and detail aspects. Being able to comment on designs (and include links to prototypes, code snippets and articles) has been excellent. The level of detail that Zeplin provides the developer is outstanding. I don’t see us turning back and using anything else.
The reason I haven’t given a 10/10 for everything is that including links to prototypes on the designs can make it difficult to associate those prototypes with the interaction design in a meaningful way. Interactive prototypes need to be built outside of Sketch making work duplicated. I think there is a way to deal with this, such as providing process flows, other ancillary documentation and doing design walkthroughs in backlog refinement and sprint planning. That said, I’m not convinced this is a problem documentation can solve.
In summary, Zeplin has truly changed the way UX and UI communicates with developers. It is faster, easier to understand and more detailed than any other methods we used. The lines between disciplines are blurring in many product teams and Zeplin certainly seems to be blurring those further. Here is a link to the previous article I wrote; “UX Confessions: Sketch app gave me a greater appreciation for visual design”. If you liked this article I’m sure you’ll like that one.
UPDATE: 2 years with Zeplin.io
It’s been almost 2 years since I published this article and plenty of people are still reading it! So I thought I’d give an update on my story with Zeplin.
Since moving to Zeplin two years ago, I’ve used it for communicating with co-located product teams, remote product teams, waterfall IT departments and marketing teams. Perhaps the only processes I haven’t tested with Zeplin are those you get from being at an agency (I’ve always been an in-house or freelance UXer).
Zeplin has worked excellently in all those situations. Also, Zeplin has continuously provided small features which improve our workflows. The best being the new “sections” feature which allows you to organise the screens in Zeplin. Also, the version feature has been a hit with developers.
The biggest change since over the last two years is others entering the market. Especially Invision’s new “Inspect” feature for the Sketch Craft plug-in. I’ve experimented with using Inspect and have given up. Simply put, the onboard process is just too confusing. It is confusing for me and for others. Whenever I set up a new team with Zeplin, I have to explain how it works only a little. I never have to explain it in detail to the developers. They can work it out for themselves. This hasn’t been my experience with Inspect. It just isn’t as seamless and intuitive.
I continue to recommend zeplin.io and look forward to its new features!
