Setting the development team up for success with effective designs

Our team at Ballast Lane Applications is full stack, full service, meaning we are experts at completing everything for our clients from product discovery to design to development, testing, launch and support. Our preference is to engage one of our cross-functional teams to make sure we maximize efficiencies and ensure that nothing falls through the cracks. However, if a client already has some inhouse resources or they have preferred partners they want to use to fill some of the roles, we are happy to work with them. In this article we will focus specifically on the relationship between design and development teams, and highlight some recent learnings from working with external designers.

As part of our process we have checks in place to ensure that designs are “development ready”, including having a component library, style guide, and ideally a prototype to help the development team. The designs should be reviewed by the developers and testers, with their feedback being addressed prior to the start of development. Our designers are involved throughout the development phase to:

• Address unexpected inconsistencies, unplanned corner cases and error states
• Update interactions, components, and flows based on any changes that come up (due to client, tech, or timing)
• QA the work from a visual and interaction point of view an effective handoff and continued collaboration ensures that the dev team can focus on building components, interactions, and layouts, without the need to guess at requirements and where components can be reused, as the design team has already done this for them.

When working with external designers, we use all or some of the following steps:

Clearly define the roles and expectations at the beginning of the project

The design resources need to be able to:

• Design how it works
• Design how it looks
• Collaborate with the dev team

If these roles are going to be divided between Ballast Lane Applications resources and external resources, it is important to ensure that responsibilities are defined and expectations aligned. Particularly when it comes to collaboration during the development phase, the designers need to be available to quickly answer questions and/or respond to changes that are needed.

Establishing a Design System

This should be a top priority when moving into high-fidelity designs. It ensures uniformity and clarity, reducing the likelihood of inconsistencies as the project progresses. The design system consists of:

• Component Library: All projects should have a complete component library. During a recent audit, we found several opportunities for improvement, particularly regarding the consistency in the use of components throughout the project. For example if external library components are being used, it's ideal to detach them and link them to the local library instead. This way, when the time comes to edit or modify these components, the process is faster, more efficient, and consistent across the project.
• Style Guide: The style guide should be easy for developers to use, be inline with client expectations and requirements, and be complete.
• Clear and detailed documentation and user flows: It's also crucial to have a clear user flow in place to help everyone involved understand the project better. This will guide decisions and ensure the user experience is coherent.

Complete a design audit

To ensure a proper handoff and to make sure nothing has been missed, the following should be reviewed:

• Design System
• Consistency within pages/screens - The final product should have a coherent design that is easy for people to use, therefore components and visual elements should be consistently used across the experience.
• Edge/corner cases and error states to make sure they are all addressed and accounted for.
• Prototypes to showcase complex interactions and workflows so the dev team can first hand how the experience should work for users

No matter how our clients want to work with us, we have the tools, processes and checklists to ensure a smooth transition between the different teams.