How to maximise your Product Design delivery efficiency
More than 10 years ago, the Design world I started working in was very different. In France, the UX expertise was primarily in agencies, the tools were limited (I still remember updating illustrator layers until the middle of the night!) and the delivery process was very slow and waterfall.
Today, it’s another story, the time to market pace has drastically shortened with the raise of Agile adoption, the tools are more automated and therefore the UX design role has also changed. Below are my recommendations to set up an efficient and impactful product design team based on past experiences in start ups, agencies and in house set up.
START FROM THE END
- Define the UX style guide
- A good way to start is to start with a framework (i.e: bootstrap, react…), design the UI elements in Sketch and create symbols out of it (see here how to)
- Identify the gaps between the framework and your product specific style guide, they will require additional development work.
- Once the style guide is ready by design: UX principles, grid system, page templates, UI components, icons… ensure to share the specs with the dev team using InVision or Sketch app and closely collaborate with them to ensure the good execution of the style guide.
- A great way to align the stakeholders around the product style guide is to expose the component library into an internal website so everybody can have access to the “single source of truth”. a good example is the Westpack GEL.
2. Set up the Design <-> Agile delivery process
- Jeff Gothelf in his book Lean UX share about the dual-track Agile process from Marty Cagan.
- Product Discovery
- Spend time understanding your target users and what is/are the problem(s) to solve (no HIPPO syndrome!)
- Use Lean UX and Design sprint methods to get feedback based on a design prototype using your product style guide
- Once you got your design prototype validated, it’s time to break it down into the product backlog
2. Product delivery
- Your design prototype was pretty high level now your design team still need to work a sprint ahead of the dev team in order to prepare the relevant scenario & screens so the developers can start working with all the needed elements
- Once the design team is ahead of the dev team they can start doing QA and raise defects.
- How to share specs with the developers so the end product looks exactly like the design?
- Design and development teams have the style guide as the single source of truth therefore the team always re-use the same UI element for better delivery efficiency and user experience.
HOW TO TAKE DECISION ON ADDING OR NOT A NEW COMPONENT IN THE STYLE GUIDE?
Once the product is live the usual negotiation topic with the product team is when to add a new component into the library. The quick fix is alway to overwrite a component however it ALWAYS bite the team back later for various reasons: not scalable, incompatible with the latest core component once it gets updated etc
- You need to first balance the cost/benefit of having the team focusing on building a new component VS building a new feature
- The team should always look at value delivered to customers
- Is this new component aligned with the design principles? Can another one do the job instead?
- The contract with the team should be to always revisit the trade off done early during delivery later and enhance the UX.
I have worked on product style guide for 5 companies, 2 using bootstrap and 3 using react.
