Introducing a time-saving tool for Zeplin, and the lessons I learned from building it
I’m probably not the only one who has realised that even the best projects can reach a certain point when they require a tremendous amount of repetitive tasks. Although we are not fond of these tasks, they can serve as an inspiration for lazy people who would go far just to discover an easier way to finish them.
Well, this is why I created a Google Chrome extension, called Notes, which organises comments and accelerates design iterations on Zeplin by:
- Collecting all the comments from a project and listing them in one place (so clicking through hundreds of screens to find a long forgotten comment is no longer needed)
- Listing by date or screen order
- Filtering the results by color, username, screenname and @mention
- Exporting comments and screen catalogs and more features to come!
Download the extension from Chrome Web Store »
You can follow me on Twitter for future updates »
Keep reading if you would like to know the story behind it.
Signs you are wasting too much time
Imagine the frustration of having to do something very important in your work, but in an unnecessarily complicated way. Imagine the burnout you feel when you have to repeat this dozens of times every day. Ultimately, you become so used to repeating the same task that you don’t even notice its drawbacks and opportunities for improvement.
At Supercharge, we use various collaboration tools to make our job easier, but when it comes to presenting designs or writing feedback, we typically use Zeplin. We are constantly analysing the uploaded screens as well as the feature requests from the comments (UX/UI questions, clients’ notes, copywriting, etc.).
Since Zeplin doesn’t have an overview for comments, the only way to find the one comment we need is by clicking through hundreds of screens one-by-one. Currently, we have several projects with more than 400 screens and each of them has at least 1000 comments…
Yes, it hurts, but not only my fingers.
And though Zeplin offers different types of notifications, they require a similar amount of work to reveal the desired information:
If something repeatedly takes a very long time to finish, there’s a good chance it has room for improvement. One mistake I will never make again: overlooking the opportunities to rethink my time-consuming habits.
When I recognised that the above-mentioned process required more effort than needed, I couldn’t stop asking myself questions:
“Why am I doing this?”
“How could I make it better?”
“What if I developed a dashboard which could collect all the comments and display them in a filterable list?”
“Oh, looks like I have found a side project!”
To cut a long story short, I decided to take on the role of Product Owner, UX/UI Designer and Developer, and extend Zeplin’s functionality with the above mentioned features.
Challenge accepted!
Setting a goal — Deciding which mountain to climb
One important takeaway of such a relatively complex project was that I became much better at seeing the bigger picture and defining realistic goals. Instead of focusing on the details, it was much better to begin with the basics:
- What is the main goal of the project?
- What kind of skills are required? What are the limitations?
- How much can the original idea be simplified while still reaching the final goal?
- When is it “done”?
Above all, I had to consider the technical limitations, and it became obvious that adding something new to existing software comes with a lot of restrictions — especially when I’m not the owner.
As a designer, I already had a good understanding of UX principles, though my lack of programming skills made it almost impossible to plan ahead properly.
I spent an insane amount of time just to find out that I can’t extend Zeplin’s desktop application and instead have to work with the online version by creating a Google Chrome extension. Because some people prefer other browsers, this isn’t the perfect solution, but it can still come in handy for them if they are having trouble.
After two weeks of experimenting and investigating, I was finally able to specify the core features of the first version:
- Downloading and storing data
- Listing and sorting comments
- Basic filters for narrowing the results
Considering the frontend development challenges, a lot of important functions were pushed into a later version in order to make the development time more reasonable (auto-update, advanced filters, multi-select filters, search box with suggestions, just to name a few).
It ain’t over till it’s tested
A few months and thousands of Google searches later, my creation achieved the expected goals. Apart from the spaghetti code and minor bugs, it was ready.
Before investing more effort into the project, it was time to collect some feedback for further improvements and, more importantly, to reveal if it had any conceptual issue.
The time had come for usability testing.
In order to get a wider perspective, I interviewed some of my colleagues who were working on the same project, but in different positions: a Project Manager, a UX Designer and a UI Designer. This way I was able to collect more realistic ideas and learn about an entire team’s daily habits and different needs.
Surprisingly, everyone was much more enthusiastic than I expected when they learned about the extension’s intention, and that it might help them to shorten some of their daily routine.
As it turned out, I focused so much on the main features, I didn’t pay enough attention to onboarding, and the testers had a hard time finding the new dashboard. To address this problem, I implemented visual clues which can now lead the users in the right direction.
This was the first time when I was responsible for copywriting, and as could be expected, I failed a couple of times before I got a handle on the basics. When the user tests had ended, most of the content was rewritten in order to better describe its actual purpose. The following questions helped me to write cleaner labels and descriptions:
- What’s important to know from the user’s perspective?
- How does the user feel at this point?
- Where do I want to guide them? What will happen next?
A few more lessons
- I underestimated the importance of shortcuts — they can be extra time-savers and enhance usability.
- I overestimated the need for additional filters. Although they could boost the searching experience, the plugin already offers the most-used filters (colors, names), so extending this will be a lower priority.
- In contrast, the search box was intentionally missing from the first version because of its complexity, but most people tried to find one. It will need to be added in the near future.
- Everyone mentioned that the extention’s visual style fits Zeplin’s, which makes it easier to use. By the second time, using the extension’s main tab happened instinctively. Users began to click on it almost without looking.
- The “XY days ago” format didn’t prove useful for a list which contains a lot of older dates, so I changed them to exact dates.
- The overall statistics seemed more useful than I thought. They can show which stage the project is in, and help to estimate the amount of work remaining. For example, the product team tend to use the green marks as “done” and yellows as “to-do”. I’m planning to add more details, such as stats by color, tag and section.
How to stay calm on a sinking ship
While I was developing the plugin, we found ourselves in a very delicate situation at work: the deadline for modifying a project was the following day, but we also had to submit a catalog of all the uploaded screens from Zeplin (containing the screens’ names, statuses and links).
Although we already had a similar catalog, it was so outdated that we would have had to recheck all 400–500 screens and manually update the list. It would have taken a whole day, while we still had a lot of other important things to do.
I got the idea to implement a new feature into the plugin and, instead of focusing on comments, it would be able to export a screen list. It was so rewarding to work on a side project while I actually solved a daily work problem.
It is still one of the extra features in the extension and we have used it several times already. What’s more, the extension was quickly integrated into our daily workflow, and we now start every meeting by collecting all the notes and reviewing the unresolved ones.
The most important lesson: Just ship it
When it comes to starting a side project or asking for feedback, stop being a perfectionist! Perfectionism will make you waste a lot of time and opportunities because of absurd reasons: “I’m not sure if I can do it properly”, “It’s not good enough yet”, “I have to add just one more thing before …”.
No one will care if you haven’t used the best possible way to solve the problem as long as it works. Do your best for now, and you can improve it later. The sooner you launch it, the sooner you will learn from it. If it isn’t possible, at least show it to others to validate your ideas! Don’t hide them for good or you can easily find yourself in the following situation…
When Murphy’s Law shows no mercy
Fun fact, Zeplin just announced in one of their last blog posts that they will be working on a similar overview for comments. It happened just when I wanted to release my own.
It’s too bad that my favourite side project will be obsolete before it could have a chance to shine, and yet, so awesome that a large company still puts effort into satisfying their users’ needs.
In the following months, I will by all means continue to improve the extension and see if it can co-exist with the upcoming updates.
The next step would be to add more features, starting with the ones that would most significantly improve the user experience (e.g. some UI tweaks, the auto-update feature and the search box).
As you are reading this article, Zeplin may have already replaced the plugin with their own features and made my extension obsolete. Anyway, if that’s not the case or you would like to try another implementation, here is a link to the extension.
Let me know what you think!
You can follow me on Twitter for future updates :)
