<div>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*50D5LMQMHrS4j4Vd7NibPA.png"></figure>
<h4>We set out to connect design teams to dev guys. We launched&nbsp;SPECs</h4>
<h3>We picked from what you told us.&nbsp;&#128587;&#127995;</h3>
<p>A designer comes to CanvasFlip to create a prototype of this designs, share them to get feedback and conduct user testing on&nbsp;them.</p>
<p>Once there is enough discussion on the designs and it is all set to be implemented, the designer shares the same prototype with his developers to give an idea of what was to be coded. But was it enough for the developers?? Uhmmm lets&nbsp;see..</p>
<p>I was talking to a designer Ema about her time distribution with the projects she had. I am sure every designer reading this has already guessed what it would be like..&#8202;&mdash;&#8202;she spend more than 60% of her time handing off the designs to the development team and revisions on the design &#128563;&nbsp;. Just the next week I rolled out this survey to the designers in my vicinity.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/939/1*n5Nf-3m_o6QJvmkitC88xQ.png"></figure>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/900/1*HlIq3r63d0crWmM6wIpyPg.png"></figure>
<p>Clearly, this survey result was an eye opener to the <strong>need of a hand-off tool</strong> for the designers.</p>
<p>We saw these results in the Monday meeting and immediately decided to push limits from just allowing designers to share and test prototypes. The designer&rsquo;s workflow doesn&rsquo;t stop there and so we couldn&rsquo;t stop at&nbsp;that.</p>
<p>I still have a snap from our meeting&nbsp;then..</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*YotOf65CrarH3lPEYOviow.jpeg"></figure>
<h3>Deciding on what features are quintessential</h3>
<p>There are a list of stuffs a designer passes on to his/her developer. How much ever we would love to plugin all of that in the design hand-off tool, he had to prioritise features for the first release. And how did we decide on that?&nbsp;&hellip;&hellip;Ummmm, well we asked you!&nbsp;&#128521;</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/929/1*XSANVTWhwUmZkdu32bQjvg.png"></figure>
<p>The answers in the &ldquo;Others&rdquo; section were&#8202;&mdash;&#8202;Interactions, CSS code and all of the above. So we were pretty much on the right track. Based on these priorities, the SPECs we developed for version 1 has the following features&nbsp;&mdash;</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*ZJbh6Su5ld80Dr1uOZBgFg.png"></figure>
<p>These includes element positions, measurements, colours and font style used, export design assets with ease&#8202;&mdash;&#8202;all at once or individually, typography and style&nbsp;guides.</p>
<h3>Solving the biggest pain point in&nbsp;hand-off</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/990/1*ddk944w-irlj7oEdhL238w.png"></figure>
<p>We now knew which button to press now&#8202;&mdash;&#8202;Comments/discussions on the design. The design of comments was crucial in creating the experience. It had to be present yet not interrupting all the&nbsp;time.</p>
<p>Comments weren&rsquo;t just about the layout and hierarchy of static information, but rather, it represented a much more complex system in which large streams of discussion were funnelling from one end to another, triggered by various queries from the developer. A lot of conclusions had to be drawn from those and a lot of annotations had to be fed into the&nbsp;system.</p>
<p>We realised the need to move pretty quickly to prototyping various options for the comment section, in order to fully understand the way in which the designer and the collaborators could behave in a real scenario.</p>
<p>We tested on our assumptions of having &ldquo;a sticky comment section&rdquo; against &ldquo;a comment mode which could be enabled or disabled&rdquo;.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Pn4F1KAXSOnlm0kXh-TJNg.png"><figcaption>(A/B testing design options&nbsp;: Sticky comment section vs Comment mode enable-disable)</figcaption></figure>
<p>We had a clear winner in the situation, and we went ahead with a comment mode which could be enabled on or&nbsp;off.</p>
<h3>The &ldquo;final&rdquo;&nbsp;SPECs</h3>
<p><strong><em>We are glad to develop SPECs, just the way you told us!</em></strong>&nbsp;&#128515;</p>
<p>After nearly months of work and weeks of testing and survey, we&rsquo;re really excited to be launching SPECs and learning more about your experience with the tool. We&rsquo;re hopeful that everyone in your team loves&nbsp;SPECs!</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/60/1*OPU92BdwLjNoNuomKFWDJg.png"></figure>
<figure><a href="https://www.canvasflip.com/specs-the-design-hand-off.php"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*7z5eY-ewsXEUMwNK22viuw.png"></a></figure>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=a354bf45c6be" width="1" height="1"></p>
<hr>
<p><a href="https://blog.prototypr.io/developing-specs-based-on-your-feedback-a354bf45c6be">Developing SPECs based on your feedback!</a> was originally published in <a href="https://blog.prototypr.io">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>
</div>


Developing SPECs based on your feedback!

We set out to connect design teams to dev guys. We launched SPECs

We picked from what you told us. 🙋🏻

Top Stories