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 👩🏻💻...
- Designers can’t guess what you need to work properly: tell them!
- Call the designer when you have questions, they’ll save you time because they’re used to finding solutions to these problems.
- Details are there for a reason, use the styleguide as a reference when you doubt (colors, size, margins…).
- Show that you care about the product, so the designer and PO involve you when they make decisions.
As a Designer 👩🏻🎨...
- Mockups are not development-ready material 😉. Ask your developers what they need!
- Developers are used to spotting errors, edge cases and can provide you with real data.
- To avoid everyone’s frustration, design features with technical insights.
As a Product Owner 👨✈️...
- 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.
- When you have a doubt on the project direction, check with your stakeholders, but also rely on the designer and developer to help you.
- Involve developers in the product design because they know app from the inside out, and can give you good insights.
- 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:
- Product definition
- Mockup creation
- 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
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
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
🧪 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
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?
Here is an interactive quiz to assess your collaboration.
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.