large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p>Published on <a href="https://blog.prototypr.io/optimizing-your-design-workflow-when-working-with-multiple-designers-38519a79ff9d?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Nazli Kaya <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*giIy0FmZ-ljiwfiQHU5MkA.png"></p>
<p>Recently I’ve been experimenting with different design workflows to improve my productivity when working with other designers in the same project. Today, I want to talk about my experience working with another designer in two different projects using two different design workflows.</p>
<h3>Projects</h3>
<p>Both these projects were redesigns of existing websites and both were mostly focused on UI work. So I will be mostly talking about UI here, however almost everything is completely valid for UX flows as well.</p>
<p>The first project was for a client so I won’t be able to share much about the content of the design. However, the second project was a personal project, where I redesigned Amazon Prime Video, so you will get to see the final result as well.</p>
<p>The most important part for this story is, both of these projects were done in collaboration with another designer so we had to find a good way to work on a single screen at the same time.</p>
<h3>First workflow</h3>
<p>Sketch has been the go to design tool for both of us for quite some time now. So when we were beginning this project, we thought Sketch would be the right tool.</p>
<h4>Separation of work</h4>
<p>After having an initial discussion about how we want to proceed with the project and aligning our vision, we have started separating the work between the two of us.</p>
<p>Depending on the type of the project, this process can be very difficult or relatively simple. Trying to split the work equally to make the best use of all designers in the project while making sure the parts do not overlap too much to avoid duplicate work can be really challenging.</p>
<h4>Individual designing</h4>
<p>When we both knew which part of the web page we were supposed to be designing, we just started designing in our own corners with minimal communication between us.</p>
<p>From time to time we have felt the need to sync up and share some components that were required by both of us. This involved sending back and forth several sketch files, and interrupting our work to make sure we weren’t spending effort for already existing components.</p>
<h4>Putting it back together</h4>
<p>After everything was done, it was time to combine our individual work to get the final design. For that, we have gathered all the files in one computer and paired up for a bit to make sure everything works well when we put them back together.</p>
<p>This was the first time where we took a detailed look at each other’s design drafts and had a chance to see the overall picture. And we naturally had feedback for each other which varied from very small details to larger changes in the layout. That made us do additional changes at this point and we even went back to our corners to polish a few more things. Additionally some parts of the design which worked well by itself, didn’t work as good when combined.</p>
<p>Overall this part took longer than we expected and required us to do several iterations to get right.</p>
<h4>Looking back</h4>
<p>After the project was done, we had spend some time discussing what we can do to improve our workflow as it felt cumbersome to both of us. These are the main pain points we have identified:</p>
<ul>
<li>Sending around sketch files is not fun, and can get messy when done excessively.</li>
<li>Separating work between designers is very challenging and sometimes even not possible.</li>
<li>We had inevitably spent the time to design very similar components when working alone, as we were syncing up not as often. Using a shared component library might be able to improve this but still you would need to constantly check what components the other designer has added before you draw anything.</li>
<li>The feedback you get from the other designer is very late, results in too much wasted time. Having a shorter feedback cycle would have improved the workflow greatly, yet it comes with the cost of getting interrupted more often.</li>
<li>Merging the designs is not a trivial task, and might require additional changes that you might have missed when working alone.</li>
<li>Experimenting with different styles/layouts/colors is more difficult as you either need to sync up with the other designer, or you end up with a useless half-redesign.</li>
</ul>
<p>Overall we both enjoy working alone in our workstations but the cost of reduced productivity is too much in my opinion.</p>
<h3>An improved workflow</h3>
<p>Following our dissatisfaction with the first project, we have decided to try some new tools and find a way that helps us work better collaboratively.</p>
<p>We decided to use Figma to redesign the interface for Amazon Prime Video and see for ourselves how two designers working in one file would work.</p>
<h4>Designing naturally</h4>
<p>This time the beginning of the project was a lot different. We were able to jump straight into Figma during our brainstorming session to make quick sketches to test ideas.</p>
<p>Later we started playing with the color palette and we were just putting some colored rectangles on top of each other to see how they work together. That sketch naturally evolved into the first draft of our design. While we were discussing we were able to easily demonstrate our ideas in the design, and also modify each other’s sketches to come to an agreement.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Tb2lMFEK1dM1v6tVFGtPsQ.png">Grid/Layout settings in Sketch</p>
<h4>Learning a new tool</h4>
<p>For most of the time Figma doesn’t feel like a new tool to a Sketch user. It works as you would expect it to work. All the keyboard shortcuts you know from Sketch just work in Figma. And personally I’ve found the grids and component constraints of Figma to be more intuitive compared to Sketch.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*I2MF5hhpNZwaaBuE-J2REA.png">Figma supports having multiple grids in one screen</p>
<h4>It’s all in the browser</h4>
<p>This is one of the great things about Figma, is lives in the browser which means that you get access to your design environment from any computer that has access to the internet. Yes, it could be a downside for some as you need internet access to load your files, but personally I always work in places with internet connection so that didn’t really affect me.</p>
<p>Another positive side of this is, it allows your design team to be able to span across different operating systems. So everyone gets to decide the operating system that they want to use. And if you want to do some collaboration with developers or managers, there is no barrier of entry as it works on any computer and for most of the features free to use.</p>
<h4>Remarks</h4>
<p>Overall, my experience with Figma was very satisfying and I look forward to using it in my next project. I believe real time collaboration brings a lot of advantages while designing and improves the quality of the work you create, and also decreases wasted time. You get feedback way faster on your ideas and you always get to have the overall picture in front of you, which allows experimenting more with the overall design.</p>
<p>Here are the final screens from our redesign of Amazon Prime Video</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*4ZiUHYFBmXpSdmRRsFhbTQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*XtNQWaVp8P6h5tvAER8Wqw.png"></p>
<p>I would also like to hear how you work in collaboration with other designers and what kind of tools/workflows do you use. Let me know in the comments or ping me <a href="http://twitter.com/nazlikayadesign">@nazlikayadesign</a> on Twitter.</p>
<p>You can find me on Twitter <a href="http://twitter.com/nazlikayadesign">@nazlikayadesign</a> and have a look at my projects at <a href="https://nazlikaya.design">nazlikaya.design</a></p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=38519a79ff9d" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/optimizing-your-design-workflow-when-working-with-multiple-designers-38519a79ff9d">Optimizing your design workflow when working with multiple designers</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Optimizing your design workflow when working with multiple designers

Optimizing your design workflow when working with multiple designers

Top Stories