Designer & Developer Workshops
Prudential November 2021 - PresentThe Design Systems team plays a unique role within any organization. They have a level of expertise in both design and development. They can see how the relationship between the two plays out in real time.
For years our team had been the defacto link between designers and developers. We would assist both in how to work better with each other, but how could we use our new design system to truly improve how both worked together?
- Workshop facilitation
- UI development
- UI design
- JIRA
- CSS best practices
- Adobe XD
- Storybook
- Chris Alexander
- Andrei Ivanov
- Antonio James
- Joon Yi
By the Numbers
Background
At Prudential, the relationships between designers and developers were prone to misunderstandings. Whether in prototypes provided by designers or pages built by developers, there were always some issues to iron out.
The launch of the new Evolution Design System gave the DS team an opportunity to help create understandings and more effective communication between the two groups and leadership.
Problem
- Discrepancies between UX prototypes and final developed pages for various projects
- Lack of involvement for developers in initial design process
- Lack of communication between designs are developers on expectations and constraints
Goal
Improve the quality and efficiency of the workflow between designers and developers, by creating a culture of transparency and communication.
My Role
Process
Discovery
Compile examples of common issues that come up in designer developer hand-off. Find the source of the issue, and ways to prevent it from happening.
Workshops
As a trusted group in both design and development we used the position of the design system to lead workshops with groups of developers and designers. On an ad-hoc basis we would set up small group meetings with dev or design teams.
With designers, I discussed how developers thought throught problems, and what their mindsets were. This lead into a guide on how to clean up their prototypes in the hand-off process.
With developers, I focused on trying to reframe their relationships with designers. I pushed them to bring up questions they had more often, and gave them the trust that designers wanted them to be more vocal about things they saw.
Design + Dev QA Assistance
Be involved directly with a designer in the review of a developers work. Help the developer understand what needs to be changed, and give them the easiest way to use the design system to achieve the needed fixes.
Outcomes
- Design prototypes that more effectively propvide developers the information they need
- Increased communication between designers and developers at all phases of a project
- Establishing the design system team as a source of knowledge on designer-developer hand-off
Learnings
Issues that occur between designers and developers are usually due to a lack of understanding and communication between the two sides. The more closely the two work together both in the design phase and the development phase, the more efficiently the process will go.
A design system team’s role isn’t only to establish rules for designers and developers to follow. It has to make their jobs easier, and help them work with each other.
