Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Design Systems: Designing out Waste, Designing in Consistency

52 Aufrufe

Veröffentlicht am

Design Systems help modern innovative companies build new software quickly without waste and with a consistent look and feel.

They are the single source of truth to allow the teams to design, realise and develop a product.

From our work with Design Systems for Equal Experts' clients we have many learnings to share about benefits and risks and what needs to be overcome to get a system live and adopted.

SPEAKER: David Hawdale. Product and UX person at Equal Experts.
Contact www.equalexperts.com
Contact David: david.hawdale@hawdale-associates.co.uk

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Design Systems: Designing out Waste, Designing in Consistency

  1. 1. Design Systems: Designing out Waste, Designing in Consistency David Hawdale 13th January 2020 - Equal Experts, North, Leeds
  2. 2. Ideas and lean experiments, behaviourally biased, customer- centred
  3. 3. Agenda ● Design Systems - Background ● Design System - Case Study ● Learnings ● The Bigger Picture? DesignOps ...
  4. 4. They have been built by many, many companies to help them design consistently and with less waste
  5. 5. A component design explosion ... In 2011, my UX team at The Times... ● … were each designing UI components - e.g. small forms - to their own preference, afresh each time! So much variation … so much waste … designing multiple times ... ● Colour, font, styling, label position, punctuation, input field shape, label in or out, label naming, help, error cues, error handling patterns ….
  6. 6. Each new and repeated component design was waste Each new and repeated component development was waste There should be one design to rule them all!
  7. 7. ‘Live Style Guides’
  8. 8. And … patterns ...
  9. 9. A pattern is a way of doing things ... At Westminster, we had simple repeatable patterns we could use from GOV.UK, we didn’t have to waste time thinking about what we needed to do afresh
  10. 10. Case Study
  11. 11. Design System A Case Study
  12. 12. Our global client was innovating at speed, using small teams and multiple platforms with embedded expertise to satisfy customer need. But this rapid rate of change had led to apps being not recognisably branded, and had created much rework with the same UI components and patterns being made and made and made again. How could we help our client: ● Have a consistent look and feel to fully leverage the prestigious brand ● Get many products to market quickly ● With many differently skilled and sized teams across multiple locations The Brief
  13. 13. Design Systems Design Systems can help modern innovative companies: ● Build new products quickly; ● Without waste; and ● With a consistent look and feel A Design System is a way of working and an agreed set of standards for components and patterns, so once you’ve designed and developed, say, an input box or a set of buttons, you can share them across teams so the next team doesn’t have to redo all that thinking, designing and developing again for
  14. 14. ● Gov.uk - provides components and patterns across the public sector ● Material Design provides guidance to make Android Apps ● AirBnB, Shopify, Mozilla, BBC, Salesforce, Mailchimp, NHS, Spotify.. Once GDS had created their Design System, all GOV properties followed conferring a high quality consistent experience and a massive reduction in waste and cost. Design at Scale Many established companies have Design Systems:
  15. 15. How we built a Design System A Design System is not just the technology - the tech is relatively simple - so we used an open source front and back end at no cost The key to success was achieving consensus and creating trust across the traditional company silos - in this case Brand and Marketing, Product and IT. Our starting points were: ● To build on an existing component library that had been built one of the platform teams ● To evangelise and talk about benefits, to gain trust and interest, and followers ● To set up a cross-functional, cross-silo working group to direct an approach
  16. 16. Our Approach A Thin Slice ● Be driven by business/product need ● Agree a small number of sample usable components ● Agree one sample understandable patterns ● Put basic agreed brand foundations in place ● Make everything visible as soon as possible ● Put basic governance in place that speeds not hinders To enable: ● Growth - evolving through collaboration ● Adoption - as teams get increasingly involved
  17. 17. The Numbers ● Kick off to Live in 90 days ● 4/5 person team ○ Product Owner - bringing people together, getting consensus, creating content and ensuring governance ○ User Experience Designer - UI design, visual design, content creation ○ Front End Dev - component design, accessibility, site build, CMS wrangler ○ Tech Lead - (for first 30 days) - site architecture and CMS design ○ Delivery Lead - executing governance, service transition, release gates, team wrangler, planner ● Cost just into 6 figures
  18. 18. Impact ● Adopted across Product and Marketing Teams ● Design System guidance; ○ Executed in full on React Platform ○ Executed partially on Low Code Platform ○ Executed partially on Marketing Platform ○ … and growing according to need... ● Active collaborations across platforms in the Component Guild ● Joint governance established between Product and Brand ● Third party team using the Design System, and React component libraries
  19. 19. “Starting from scratch makes no sense” “The choice is made I don’t need to express an opinion” Innovation Manager “I expect banners, components, how text is positioned, CTAs and responses” MarTech Manager “The more you can copy and paste, and not have to choose, the better” Innovation Product Owner “I see patterns that have been agreed with brand I can use” UX Designer “A single source of truth" “A platform to contribute and consume” Frontend Developers Quotes
  20. 20. Summary Our client is now moving more quickly, creating better customer experiences aligned to their prestigious brand The Design System has helped them scale design where the problem is hard - lots of teams, locations, platforms and third parties. Where brand is critical, or where budgets are tight, a Design System should be a fundamental part of any big company's design strategy. Every big company should have one.
  21. 21. Some Learnings
  22. 22. ● Get everyone on board product, tech, marketing, brand ○ it won’t fly unless you address all the needs ● Build it as a product ○ create thin slice priority content and iterate ● Split up Product and Marketing ○ very different needs - persuasion vs clarity & usability ● Be crystal clear about the promise ○ designs and guidance, or built components, or both? Learnings from building ...
  23. 23. DesignOps
  24. 24. Is the answer DesignOps? Because it’s not all about the tech...
  25. 25. Thank you! Any questions?
  26. 26. Design Systems: Designing out Waste, Designing in Consistency David Hawdale 13th January 2020 - Equal Experts, North, Leeds