Spectrum is now read-only. Learn more about the decision in our official announcement.

Product Design

Are you a product designer working in tech? This community is for you.


Closing the gap between implementation and design

November 25, 2020 at 1:12pm

Closing the gap between implementation and design

November 25, 2020 at 1:12pm
Hello designers!
I've been freelancing for the past several years and I kind of always stumbled upon the following scenario:
  • I work with a client on a new project
  • We go through all of the design phases (research, prototyping, design, prototyping, etc)
  • We proceed to handoff where we explain in details what we expect from the flow and devs have access to handoff tools (Zeplin, Figma, Avocode, Marvel, Invision, Abstract, etc)
  • Devs proceed to implement
  • Client comes back to me with something of the sort: "Hey so the devs have not correctly implemented the mocks you designed, can you please point out to them what they need to do"
Now starts screenshots hell. I need to audit whatever the devs have view every single page and point out what's wrong with it and I actually have to do it 2x to account for mobile.
For bigger apps this takes me a day+ of work.
What I also realized over time is that I can't simply annotate the screenshots and send them to the developers because there are going to be push backs on certain things ("changing this spacing takes 1 week so we should deprioritize") but also sometimes I'm not clear enough on my comment (that's my fault though) so they ask for clarification.
I developed a system where each screenshot would actually be put in a tool like dropbox or slack where people can have conversations around the issue and the team can decide whether to move forward or not. However, this has effectively increased the time this takes me.
I've also realized that since some of these bugs are actually quite time consuming for developers, they should be prioritized alongside the rest of their tasks. To me this would mean integrating with their project management system (github, jira, etc) which again adds that extra step.
If I summarize this was how I started doing it:
  1. Take a screenshot
  2. Annotate screenshot
  3. Put in a giant list
  4. Repeat 1 to 3 for desktop and mobile
  5. Send giant list for devs
It evolved into:
  1. Take screenshot
  2. Annotate screenshot
  3. Upload to dropbox
  4. Write the actual comment in dropbox (to enable conversation)
  5. Repeat 1 to 4 for desktop and mobile
  6. Share all links with developers
And now into:
  1. Take screenshot
  2. Create issue / ticket, whatever on jira, github, etc
  3. Comment the issue / ticket with the information necessary
  4. Add correct tag to ticket / issue (if relevant)
  5. Repeat 1 - 4 for desktop and mobile
  6. Share all tickets links with developers
Now this is not over yet. Often times I'll receive an update on one of these issues as being fixed and I'll need to double check it. When I do I get 20% of the issues not actually being fixed (mainly misunderstanding on the issue or sometimes human mistakes). At that point it's still annoying because since the app has been updated I usually need to go through the flow again.
I've looked into alternatives and I saw a few out their that solved that exact problem. I started using some of them and realized quickly they had massive shortcomings. One app required me to use their project management system (which doesn't work because devs wouldn't want to switch). Another app had a great interface, looked similar to invision but wouldn't let me leave a comment on anything that's behind a login. To make a long story short, it's because they put the website you want to view in an iframe and that causes a security concern which will prevent you from logging in.
Now that's a massive deal breaker for me as 90%+ of the projects I'm working on have some sort of credentials. I've looked also into "screenshot apps" but found that they just make step 1 of my process easier, everything else I still need to do.
I hate the idea of time wasted (especially on something that doesn't seem that complicated) so I created my own alternative that I think some of you will also find useful.
It's called Greenlight and it's available here:
We have a fully functioning product that will essentially cover all the steps I've described above. Once you installed Greenlight as a chrome extension, you visit any URL you want. This can even be a freaking IP address. Once you've landed on the page you want to comment, you open the Chrome Dev Tools and you select the Greenlight tab. From there you can add a comment to any HTML element on the page. You can invite other teammates to comment inside Greenlight or you can also connect it to Jira, Github, Slack, etc and it will automatically create an issue / ticket for you with a screenshot.
Here's how it looks like in Github:
This is a massive time saver for me and hope it will be to other people as well.
I'm looking for beta testers to test out the app. We think it's already very robust but want to get a bigger a sample to test it out. The app is entirely free while it's still in beta.
Sign up on the website to participate:
No messages yet