When working on a fast-paced web project different approaches are often needed.

Design typically works from a bottom up approach. This means they go through many iterations. Then through a process of refinement they get smaller and smaller subsequent sets of designs as the approach their final output.

Engineering often uses the opposite approach by using a top-down methodology. They start with the big idea of what needs to be done. Then they break it up into smaller and smaller subsequent parts.

This is where Design Systems Engineering can have the largest impact.

Not just at the project handoff where it is the most visible. But creating a common set of documentation is something that can help with the day-to-day maintenance even after the stress of an UX heavy build out is in the rearview mirror.

Ideally the systems that you create should engage and enable both teams to do what they do best. Engineering has a solid set of examples from which to build new functionality. Design has a solid foundation to build upon when they approach the next user story through the lens of empathy.

In my article “Preventing Developer Conflict in Web Design: An Everyday Guide” at UX Pin I give some ideas on how to approach this transition from design to engineering.

Here is a short excerpt from section #4 Clear, Concise Communication: Collaborative Prototypes.

“When I’ve worked on projects without a collaborative prototype, communication becomes a mess of meetings, phone calls, and scribbled notes (possibly with coffee stains). Not to mention, the documentation grows out of control as PMs and designers struggle to clearly convey their concepts.”

In the article I continue with some suggestions about how to get started.

Rather than try to build an entire encyclopedia of knowledge about your product it is important to start somewhere. You need something that is small, actionable, and achievable.

​It is important to think of this as a growing, living, and expanding knowledge hub. This will help everyone on your team, including the PM, to better understand how all the individual parts fit together.