Design Systems are coming, is your team ready?

Great designs don't ensure great execution and integration. Whether you are accomplishing a comprehensive site redesign/rebrand, consolidation exercise, platform conversion, site acquisition, or other project, the organizational tactics are going to be of paramount importance. This session is geared towards those managing development teams and the work involved with executing design in Drupal, and will leave with ideas on how to organize their projects and teams to reach greater efficiency.

Design systems have emerged as a way to sync design across an organization and execution, while giving greater flexibility to implement innovative and consistent user experiences across all properties within an organization. However, the design system isn't just a living style guide that is shared on a wiki or on a website. This session will explore the emerging trend of design systems and their organizational challenges that ScrumMasters, Product Managers, PMO office, and senior leadership face when managing and implementing a design system that works well with Drupal (and beyond).

Treating the design system as a product allows for an increased understanding and organizational efficiency that will keep the development teams moving forward and continually improving. We will review management of organizational portfolio roadmap planning, day-to-day team needs and challenges, and workflow across Design / UX / Front End / Drupal teams. Team roles and management options will be covered, with a focus on agile and hybrid organizational hierarchies.

Follow along with original transcript notes here: http://bit.ly/D4DTeamReady

Originally presented at Design4Drupal Boston, June 27 2019.

Transcript

1. © 2018 Pegasystems Inc. CONFIDENTIAL Design Systems Are Coming, Is Your Team Ready? Organizing and Executing Design Systems as a Product - a “Field Manual” June 2019 | Margo Romanowski, Bolt Design System Product Owner
2. •You work on a team that works on/will work on/are exposed to a Design System •You are curious about Design Systems and want to know all the details about working with them •You are wondering if the Design System hype is all its cracked up to be (tl;dr it is!) •You hope to get some real life examples of product management and team organization that you can learn from to use yourself Why are you here? What will you learn? 2
3. • RIT Alumni – BS Marketing, Mass Media Communications – MS Project Management, Marketing Technology • Certified ScrumMaster since 2016 • RIT Adjunct Professor in the School of Individualized Study – Developing Agile Project Management Certification coursework • Former Program Manager at Genuine (IPG digital agency), former Global Systems Manager, Digital Marketing at PUMA • Current: Bolt Design System Product Owner at Pegasystems • FIRST TIME DESIGN4DRUPAL SPEAKER (yay!) Who am I? @margo_romo
4. So Design Systems are a thing now. If you don’t know what they are, here are some highlights 4
5. Nathan Curtis and Design Systems Image courtesy from Nathan Curtis https://www.slideshare.net/RosenfeldMedia/beyond-the-toolkit-nathan-curtis-at-enterprise-ux-2016 @nathanacurtis
6. • Codified front end system that allows websites to make use of a common design language, can be agnostic of any back end system • NOT just an HTML (or “living”) style guide for people to copy/paste HTML/CSS values – But should have one for reference and education! • Built to serve – Morningstar, Hudl, Material Design, the list goes on! Check out https://designsystemsrepo.com/design-systems/ Design Systems - What are they and what do they solve? https://www.slideshare.net/RosenfeldMedia/beyond-the-toolkit-nathan-curtis-at-enterprise-ux-2016
7. • Visual Designers who are familiar with digital and accessibility needs and work with everyone • UX Designers who can work with designers to create meaningful UX patterns, and work with QA and Development (as well as rest of team!) • QA Team who help write tests for the UI and test the finished work • Developers who complete the front end code and who integrate the code into the back end (like Drupal!) • Managers who help organize the day to day and deliver on objectives - I recommend a Scrum Master! • Stakeholders who care about the design system and want to contribute ideas and support it at the leadership level. They should care about what goes into the design system. • Product Owner who shepherds the design system and helps it evolve and adapt over time to the needs of the stakeholders and users. But remember, anyone can contribute to the design system! Design Systems - what roles make up the team? Designers UX Designers Stakeholders QA Team Developers Product Owner Scrum Master
8. Characteristics of a Project • Time-based • Clear definition of the desired result • Supports or creates a product/service • Represents a finite need for a moment in time, which will be added to the product Managed by: Scrum Master / Project Manager Coordinated with: Stakeholders & Product Owner Design Systems - Is it a Project or Product? Characteristics of a Product • Life-Cycle • Satisfies a want or a need for an audience • Can have multiple projects that support the product • Audience needs change over time, and the product must change with them Managed by: Scrum Master / Project Manager Coordinated with: Stakeholders & Product Owner
9. Product Roadmap Process
10. • They can make or break the product/project • They can provide valuable insights – And participate in the process • They care about the outcome just like us - I promise! – They just have different goals and reasons… • We can co-exist, just need to communicate differently • They don’t want unnecessary work on their plate, and neither do we Stakeholders… Can’t live with them, can’t live without them? Not quite? Stakeholders
11. Ensuring Stakeholder Engagement 11 Set Strategic Goals Gather Initiatives Document, and Organize Prioritize Initiatives Roadmap Proposal Roadmap Communication Stakeholder Engagement
12. Got it…. So what was the process? Product Vision Product Goals Stakeholder Interviews Research & Organization Documentation into Versions Final Approval Development Begins September 2018 October 2018 November 2018 December 2018 January 2019
13. Product Vision Product Goals Product Roadmap Release Plan & Backlog Creating the Product Roadmap 13
14. Focusing on the Product – Bolt Design System
15. Bolt’s vision is to create a living, unified design system to power best-of-class digital experiences. Bolt supports this vision by designing the system in a way to deliver high quality UI components, visual styles, tools, guidelines, and services that are easily accessible and usable by technical and non-technical users while reducing implementation time spent, cost to market, brand inconsistencies, and duplication of resources. Bolt Vision (The North Star) 15 https://boltdesignsystem.com/
16. 1. Maintained, Stable, Extendable Platform 2. Fast, Code-free Authoring Experience 3. Robust, High Quality Solutions 4. Increase Design System Adoption, Satisfaction, and Utilization 5. Optimize Resources & Velocity 6. Competitive Differentiation 7. Evangelize Through Thought Leadership Bolt Vision Goals by Priority 16
17. The Stakeholder Interview 1. What are the stakeholders trying to support? • Events? • Campaigns? • Initiatives? 2. Are there any current pain points that they are experiencing? 3. What do they want to see in the design system? Capture these, they will make up the backlog and roadmap! Record session / keep notes for future review
18. Mapping Observations to Goals – Working Session Framework
19. Internal Roadmap Development Working Session 19 Product Goal Group similar features to support Goal Prioritize for Development
20. Grouped Element that supports Goal • Record Success Measurement – which include any supporting metrics which lead to the creation of this goal that can be used as a benchmark (i.e. long publish times for authoring) • Identify Target Customer / End User – Conduct needs assessment, compile existing customer feedback – Outline Benefits • Perform competitive analysis • Locate current options in owned ecosystem or external • Understand and document overall differentiators of this element (Template) Goal - Insert Goal Description Here 20
21. QA (design AND interactions) of components once in Drupal • Record Success Measurement – Bugs reduced in UAT – Implementation of automated testing • Identify Target Customer / End User – Needs assessment, compiled existing customer feedback: – Describe for dev how components should work and then review them once built. We run into a common issue of “it’s not in Drupal? It’s in Bolt” – Outline Benefits – Reduced time to completion of an item – Drupal Developers as integrators, End Users as content authors • Additional Information – Timeline - Q1 2019 – Priority level in relation to additional projects – Ongoing and parallel path within process improvements (Example) Goal: Robust, High Quality Solutions 21
22. Backlog Elements not Categorized by Goal 22 Recycle Archive Trash
23. Thinking like a Product Team 23
24. Create work spaces and organization 24
25. Create work spaces and organization 25
26. Create work spaces and organization 26
27. Task Types Bug, Code Review, Task, Story, Epic Issue Facets Component (Swimlane) Epic (Metadata) Label (Classifications) How we write our tickets Modal | DOC | Write new best practices for image zoom Modal | QA | Jest test writeup for new create function Modal | CR | Review PR 2127 Modal | FE | Apply approved design styles Naming conventions and organization
28. Agile@Pega Sprint Artifacts - Feedback/Working 28 Developer Grooming • Twice a Sprint • Talking through complex problems • Tickets are added to backlog or future sprints Stakeholder Grooming • Twice a Sprint • Reviewing work, obtaining new requests • Roadmap is edited, priority levels adjusted Designers UX Designers QA Team Developers Product Owner Scrum Master Product Owner Developers Scrum Master Stakeholders
29. Every two weeks for the rest of existence 29 M Sprint Planning T Dev Grooming W R Stakeholder Grooming F M T Dev Grooming W R Stakeholder Grooming Demo Prep F Demo Retro
30. Many stakeholder requests, one component 30 Stakeholders Stakeholders Stakeholders
31. Design System Status Board - Checklist for Components 31
32. Recognize This Workflow? Stakeholders Make me an image modal!! Designers UX Designers Developers Scrum Master Let’s make this super specific feature! QA Team Stakeholders Great, now can it do… Looks and works great!
33. Simple Workflow for Component/Feature Product Stakeholders Make me an image modal!! Designers UX Designers Developers Product Owner Scrum Master Let’s make modals! ! QA Team We need modals! ! Stakeholders It’s everything I ever wanted! Looks and works great!
34. Simple Workflow for Component/Feature Product Stakeholders Make me an image modal!! Designers UX Designers Developers Product Owner Scrum Master Let’s make modals! ! QA Team We need modals! ! Stakeholders It’s everything I ever wanted! Looks and works great!
35. Atomic Design Interface Inventory 35 http://bradfrost.com/blog/post/interface-inventory/ @brad_frost
36. q Use Cases q Click image to open up a modal view of the larger version of the image (Main Use Case) q Click thumbnail to open up a modal that plays a video q Sign-up form q Log-in form q Notification/Alert/Status q Event-Driven q Animations q Open / Close q Submit q Auto-open / Auto Close q Loading q Change Content q Testing q Visual Regression Tests q Automated Testing q Functional Testing q Cross-Browser Testing q Device Testing q Interaction with other components q Component Dependencies q Schema / Configuration Options q Data feeds q State Management q Documentation q Use Cases q Testing Results q Integration Instructions (hai Drupal!) q Best Practices q Demos q Accessibility q Acceptance Testing q Stakeholder q QA q Production q Release Notes q Feature Announcement Because it’s not always easy…. What goes into a Modal? 36
37. S M L XL Small, Medium, Large, Xtra Large (and above) T-Shirt Sizing Example (Basic) for those “SWAG” needs
38. Fibonacci Sequence Example (Complex) Running The Project 1, 2, 3, 5, 8,13 Where 1 is the least effort and 13 is maximum effort
39. Fibonacci In Practice 1 Task is quick and easy to do - very little time involved (~2 hrs) 2 Task is easy to do, however tedious and possibly manual (~4 to ~8 hrs) 3 Task is a bit complex, no new code needed but will take time to complete (~4 to ~8 hrs) 5 Task is more complex, some new code needed and will take time to complete (~8 to ~16 hrs) 8 Task is very complex, new code needed, and will take significant time to complete (~16 to 24 hrs) 13 Task is extremely complex, carries a lot of risk, and will take significant time to complete (~32 to ~48 hrs)
40. We aren’t just spokespeople, we’re clients! 40
41. FE DES QA BE UX Implementation Process
42. Trial Implementation Process - implemented v2.5.0 Design Front End Front End QA Deploy Drupal Team Ticket
43. Mapping to Strategic Governance
44. Template Options 44
45. Our Roadmap 45
46. • Take it all in. • Think about your own team and what works for your workflow • If you walk out and forget everything, just try to remember ”transparency with communication” without it, none of this works. • Simplify • Future-proof using technologies and process that allows you to scale - think ahead, years even! @Pega - we are looking to be better at the Lifecycle of Bolt, making sure we are staying true to the vision we defined, and getting everyone excited about what is to come. What can you do now? What’s next for Pega 46
47. Questions?
48. • Slide PPT with transcript notes: http://bit.ly/D4DTeamReady Resources