Please mind the gap between design and the frontend

Please mind the gap between design and the frontend

Product managers like myself have many responsibilities, tasks and areas of attention. We all strive to reach our business goals and KPIs, ideally in the most efficient way possible. We've done an excellent job in the last 100 years discovering new methodologies to translate goals and vision into tangible results in as little time as possible to beat the competition. 

And yet, the project triangle looks immutable: if we want to get a new product or feature in front of the customer faster, we need to either spend more money or build in smaller increments. 

What if you already have lean processes in place with a team of great engineers and designers. Is there still room for improvement? In turns out, there is a whole area that could be made significantly more efficient! 

At Skychute, we like to challenge the status quo. Our processes are not set in stone, as we are on the quest to find the best way to deliver our products and transform the property industry. 

We have recently identified a segment in the product pipeline that could be significantly improved.

The pipeline looks like this: 

Goal setting -> Research -> Design -> Development -> Launch -> Market feedback capturing -> Repeat. 

I want to focus on the Design -> Development piece today. The traditional process looks something like this: 

  1. The designer would take the inputs from the research and create layouts, components, interactions. Often there would be different versions of the design for different screen sizes to demonstrate the responsiveness. She may even create an interactive prototype if the team feels we need to test the user flow.
  2. Once the prototype testing is complete, the design team would hand over the design to the engineering team. Tools like Sketch and Figma do a good job making this process as painless as possible.
  3. Engineering team will then re-implement the same layouts, components and interactions that the designer has previously implemented in Figma or Sketch. Now, of course, they would do it in code with their favourite web framework. 
  4. Due to the nature of web development, the result would sometimes differ from the original well-tested prototype. Therefore the designer would need to sit down with an engineer, point out all deviations. As a result of this review process, they would together come up with the changes. The changes would then need to be implemented in both layers: the design and implementation.

Like me, you have probably already noticed a couple of things.

  1. The same assets are implemented from scratch twice in two different worlds: first in design/prototype and then again in development.
  2. If changes occur later, then again, we need to spend twice the time to apply them to both worlds.

Maybe there is a way to make this process more efficient? 

In the ideal world, we should only do the work once, and both designer and developer should live and work in one environment. Then there is no handover, no design reviews, no double-updates and better products released faster.

We live in the 21st century when everything is possible if you add enough smarts and tech to the mix.

I have good news for you. The ideal world is here. There are some fantastic products and techniques that allow us to bridge that gap between design and development finally. Join me this Thursday at  #techlikeapro #event where I'll be sharing the solutions that we employ for our clients to deliver exceptional user experience faster than ever.

The best news: you can get a free ticket here.

Florencia C.

Senior Software Engineer @ Mantel | AI | Typescript | React | Python |

5y

Looking forward to see your talk tonight! I really enjoyed the one you did at Muses. Gonna ask for the books recomendation again, since I didnt have my phone to write them down 😅

To view or add a comment, sign in

Others also viewed

Explore content categories