Integrating teams by implementing a Design System

Mariana Bedran Lesche (~maribedran)


3

Votes

Description:

Abstract

In the software industry, developers, designers and stakeholders should be working together to achieve the same goals and deliver high quality products to the final users. To be actually able to work together in an efficient and harmonic way, though, is a whole other thing. In a team composed by developers and designers, we were able to mitigate the impact of communication flaws and concepts divergences in a continuous effort to cover the blind spots we found on every iteration we went through. In this talk I’m going to share some lessons learned about how to integrate both teams’ work with a solid management process.

Argument

To deliver a product that involves design - from research to screens and usability - and its implementation by a development team can be a big challenge for all parts involved. If we aim to really address users needs and deliver high quality products and meaningful experiences, it’s important to have a team aligned and fully integrated.

The interaction between stakeholders, designers and developers normally involve a lot of friction and divergence of concepts and vocabulary. The back and forth between development and QA normally take a lot of time and effort till things get quite right. Besides, people from different backgrounds tend to have diverging perspectives about the value and the challenges of implementing an interface. Developers get frustrated when faced with a non negotiable design, seemingly impossible to implement, while designers can be angry seeing their conceptions poorly executed and stakeholders impatient with a product that never gets done.

These problems can be mitigated by a solid management process and a conscious effort to create a common ground for communication. Following a path in the direction of the implementation of a Design System can be a powerful tool to achieve that.

In this talk I’m going to share the results of the gradual improvements adopted by our team in an effort to make these interactions smoother and to deliver a product with higher quality standards and more aggregated value to our client. I’ll explain how the processes we introduced to our interactions were able to impact our productivity while improving the team’s and the project’s health.

Outline

  1. Introduce ourselves
  2. Basic definitions of a Design System
    1. Why having a Design System at all? The advantages of having consistent and predictable patterns for design implementation
  3. What it means for a developer to implement a Design System
    1. Creating a common vocabulary between Design, Development and Stakeholders
    2. Reflecting the Design System structure in the project’s - components, files and variable names tidying
    3. Having predictable patterns to work with
    4. Being able to easily QA our own work before submitting it
      1. How making a QA checklist improved our validation process
  4. Quick introduction to the project’s scenario
    1. The redesign of a platform with lots of legacy code and unclear business rules
      1. Apesar de não conseguir fazer um design system DE FATO, conseguimos fazer um styleguide mais robusto e aplicar processos que tiveram grande impacto
    2. Today we are building our own design system with way more time and complexity
  5. Processes developed to improve our teams interactions
    1. The complete workflow and its transitions from first ideas to production
      1. The Planning Board and its rituals - ideas, research and specification for development
      2. The Design Board and its rituals - research, low and high fidelity prototyping, client and development team validation
      3. The Development Board and its rituals - development, code review, QA and delivery
      4. How it worked for the project
    2. The Specification Meeting
      1. Checking for available data
      2. Checking the feasibility of desired interactions
      3. Using available components or estimating the development of new ones
      4. Checking for empty and loading states
      5. UI elements states - don’t forget the hover and focus states
      6. Evaluating the effort to implement desired interfaces or thinking of more viable alternatives
      7. How it worked for the project
    3. Interacting with the Stakeholders
      1. Constant feedback from the first design ideas to the development challenges
      2. Keeping non technical people informed of the limitations encountered during implementation
      3. Proposing more viable alternatives when faced with technical obstacles
      4. Being clear about delays and tasks that will take a long time
      5. How it worked for the project

Audience Take-Aways

Attendees will learn the basic concepts of what a Design System is and it's advantages for the interactions between teams and stakeholders. They will receive an overview of the processes and good practices implemented on a real life project that can help them adapt their own work to achieve better communication and efficiency.

Prerequisites:

None.

Speaker Info:

Two people will be presenting this talk:

Daniela Falcone:

Feminist, crazy cat lady, vegetarian, and the office’s plant saviour. A UX Designer with a growing knowledge on Web Accessibility, Design Workflow, and Product Management trying to avoid prejudice bias.

Mariana Bedran:

Historian, books and arts lover with a fundamentally revolutionary heart. A Full Stack Developer that loves Python and keeps getting into front-end development.

Speaker Links:

Daniela Falcone:

https://labcodes.com.br/blog/articles/increasing-team-collaboration-using-design-principles.html

https://labcodes.com.br/blog/articles/card-sorting.html

Mariana Bedran:

https://github.com/maribedran

https://labcodes.com.br/blog/articles/configuring-django-with-react.html

https://www.youtube.com/watch?v=eUM3b2q27pI&list=PLY_che_OEsX3aZo5RttI6Fj2XZ7nTjhBu&index=9

Section: Web development
Type: Talks
Target Audience: Beginner
Last Updated: