The DevUx Manifest

Introduction

We are France Wang and Yu Ling Cheng, a duo of a lead designer and a lead developer who have been working separately and together on many projects. We believe that by understanding each other's motivations and problems, designers and developers can work more happily and build better products.

This manifest explains what the DevUx Culture is as we envision it. The purpose is to setup collaboration fundamentals between the product, the design and the development teams:

  • What the mindset it takes to grow a DevUx culture
  • The four levels of DevUx collaboration

Requirements

Anyone can spark the DevUx culture in their team and grow it.

To begin, you must have the right mindset to create team spirit. When is the last time you had lunch with the whole team, or that you had a beer?

Team building and retrospectives are precious moments where you can build empathy and understand each others motivations and problems.

Each role has a part to play. We'll explain what each should keep in mind when trying to reach greater levels of DevUx collaboration.

As a Developer 👩🏻‍💻...

  1. Designers can’t guess what you need to work properly: tell them!
  2. Call the designer when you have questions, they’ll save you time because they’re used to finding solutions to these problems.
  3. Details are there for a reason, use the styleguide as a reference when you doubt (colors, size, margins…).
  4. Show that you care about the product, so the designer and PO involve you when they make decisions.

As a Designer 👩🏻‍🎨...

  1. Mockups are not development-ready material 😉. Ask your developers what they need!
  2. Developers are used to spotting errors, edge cases and can provide you with real data.
  3. To avoid everyone’s frustration, design features with technical insights.

As a Product Owner 👨‍✈️...

  1. You are the one who knows the product and the users best, provide the designer with all use cases and edge cases you know about.
  2. When you have a doubt on the project direction, check with your stakeholders, but also rely on the designer and developer to help you.
  3. Involve developers in the product design because they know app from the inside out, and can give you good insights.
  4. Involve developers in the user research phase so that they understand decisions made on the product and feel appart of the team to build a greater product.

The four levels of DevUX collaboration

From our compiled experience on projects (around twenty), we've mapped out 4 levels of DexUx collaboration:

  • Level 0: Dysfunction
  • Level 1: Basics
  • Level 2: Efficiency
  • Level 3: Symbiosis

We'll describe here for each the common problems and solutions to reach the next level.

Problems and solutions are categorised under the three moments of a product iteration:

  1. Product definition
  2. Mockup creation
  3. Development

Level 0 - Dysfunction 🤦‍♂️

At this point there is no common language between the product, designers and developers. The team is regularly blocked and cannot deliver the product.

Very often the design team and development team work separately in a linear flow: designers make the mockup, then developers integrate them.

Product

⏳ Mockups are not approved in time

Design

🚫 Mockups are not shared / impractical for development

🔍 Assets are missing

Development

🤔 Developers are on their own to find functional solutions / interpret mockups

Level 1 - Basics 🤝

To get the basics and reach Level 1, you must overcome Level 0's common issues. Here are the guidelines you need to follow in order to achieve it.

Product

⏩ Define a process that involves the right people at the right moment

Design

📋 Define what needs to be delivered alongside mock-ups

📬 Centralize mockups and assets with a design handoff tool

Development

👭 Designers and developers work close to each other and their roadmaps are synced

Example of DevUX Level 1 workflow

Example of DevUX Level 1 workflow

Don't forget involving stakeholders during validation steps if you need approval. Invite the designer during planning so they know what mockup needs to be ready, warn if they are not so you can adapt, and answer questions on upcoming tasks.

Level 2 - Efficiency 🙌

When you reach level 2, the common friction points in the delivery process are addressed. Congratulations! It's already quite an achievement 🥳Do not forget to celebrate with your team 🍹

Product

📊 Provide real data for basis of design

👩‍💻 Involve developers in features definition to challenge feasibility

Design

🧩 Provide a styleguide for behaviour and states of common components

📬 Define break points and provide screen layouts for each, use a userflow to explain the navigation

Development

🧩 Learn to use the tools provided by the designer (styleguide, layout, userflow, handoff tools) 

Example of DevUX Level 2 workflow

Example of DevUX Level 2 workflow

Involve developers during the features definition so they can give technical insights and help provide real sets of data before mockup creations.

Level 3 - Symbiosis 🚀

At level 3, the team designs and develops hand in hand to iterate very fast. The product is also more polished and more consistent.

If you get there, YOU ARE AWESOME.

Product (Bonus)

🧪 Involve developers before feature definition (user interviews, usability testing…)

🔬Team spend as much time as possible on the product to suggest improvement

Design

🍻 Involve developers during mock-up design and find solutions together

📚 Designers and developers share common design patterns (designers know basic code pattern when making mockups)

Development

💺 Sit down with designer and implement minor corrections on the fly

📚 Designers and developers share common design patterns (developer know basic design patterns when developing)

Example of DevUX Level 3 workflow

Example of DevUX Level 3 workflow

At this stage, designers and developers work hand in hand throughout the product development process. They find smart solutions together during mockup creations and polish the app together during development. All these synchronisation moments don't have to be meetings. You can pair-program, have an informal conversation at the others desk or around lunch/coffee break. You can exchange asynchronously through your favorite chat or design handoff tool.

How to start growing a DevUX culture?

Depending on your context, set up your target.

Are you in a very siloed situation? Do you work in a team but don’t get along ?

If that's the case, aim for Level 1: Basics

Does your team have delays? Lots of back and forth?

In that case, focus to reach Level 2: Efficiency

Do your user have high expectations on your product’s UX? Do you want to have fun working in a multi-profile team?

The answer is clear, target Level 3: Symbiosis

Note: If you are starting to grow a DevUX culture from level 0, you might want to consider having a team building to create trust within the team and start having contructive discussions. If you are struggling with building trust within your team, we recommend you read The Five Dysfunctions of a Team by Patrick Lencioni (or checkout this summary from Talentsquare) and check the Tools section for example of ice breaking games and more.

Tools to help you

Check out the Toolbox to help you solved common problems on each DevUx level.