Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Empowering Product Growth With A Design System

Empowering Product Growth With A Design System

Event: Ladies That UX Amsterdam

Digital products are becoming more complex. With that complexity comes more responsibility. Teams today are expected to ship products faster, at higher quality, across multiple devices, keeping brand consistency, while still solving the worlds biggest problems.

Design Systems help products grow and scale in a consistent manner, they have become increasingly popular in the past couple of years since a new myriad of tools and frameworks have become available for this purpose. However, finding the right system for your organization is no easy task, more so in companies with a stronger development focus than a design-oriented culture.

How do you decide what level of complexity does your Design System need? What level of technicality would this require? And, how do you get your organization on board?

These are some of the questions that ignited the Design System we are building at Backbase, a solution that caters to different stakeholders but strives to keep a cohesive user experience across our products and solutions.

In this talk, you will learn about our key insights including:
- How we kicked-off the Backbase Design System
- A case study of our UI Patterns library and how it was delivered across the company
- How defining core goals and principles helped us focus on the future
- Bring UX and UI Designers onto the team from the very beginning of projects

Rayana Verissimo

January 18, 2018
Tweet

More Decks by Rayana Verissimo

Other Decks in Design

Transcript

  1. Empowering product growth with a Design System Celeste North, Lucie

    Agolini, Rayana Verissimo
  2. Celeste North Senior UI/UX Designer for Wealth Management at Backbase.

    Filmmaker in recovery, guacamole connoisseur and pug enthusiast. celeste@backbase.com Rayana Verissimo Lead UI/UX Engineer for the Design Systems team at Backbase. HTML & Sass lover, hardcore emoji user and ultimate cat lady. rayana@backbase.com Lucie Agolini Lead UI/UX Designer for the Solutions Engineering team at Backbase. Scottish yoga lover, and international advocate for deep-fried mars bars. lucie@backbase.com The Design Team
  3. Over the last year we have • Kicked-off the Backbase

    Design System • Product Design Guidelines • Design Workflow • Redesigned the Backbase Widgets Collection platform • Started building a living Styleguide that can scale with our growing business
  4. We empower financials to accelerate their digital transformation

  5. None
  6. None
  7. The Research & Development Team

  8. As Product Designers, we are responsible for the development of

    the core Backbase solutions.
  9. R&D Solutions Engineering Professional Services

  10. None
  11. None
  12. Previous struggles without a Design System • Confusing way of

    working • Lack of long-term Design vision • Poor documentation and assets • Communication across departments was difficult • Inconsistent design deliverables create waste in software development
  13. The Professional Services Team

  14. We are the intersection of the product and the client.

    Backbase Clients Somewhere here!
  15. As consultants we aim to create an experience that fits

    both the client’s vision (and their user’s needs) whilst being feasible to implement and maintain in the future.
  16. As solo designers in an implementation team, we need: •

    Understanding of how our product is designed • Flexible UI components • Assets for rapid prototyping • Awareness of upcoming changes
  17. Design implementation in the Wild Wild West, also known as

    “before the Style Guide”
  18. But what does a Design System mean for Backbase?

  19. Design Kit UI Design Sketch Library Theme Developers Kit Components

    Library Style Guide Tool Sass Theme Development Guidelines Patterns UI/UX Patterns Guidelines Design Guidelines CSS Guidelines Voice & Tone Accessibility Prototypes Responsive templates Backbase Design System A modular accelerator to our Design and Product Development processes
  20. None
  21. None
  22. How to create so many things for everyone?

  23. “To deconstruct a large design into smaller pieces, it is

    essential to start with well-defined design goals and to understand the high-level design intent.” - Desirée Sy on Adopting Usability Investigation for Agile User-centered Design, 2007
  24. 1. Deliver an extensive set of UI components that are

    easy to reuse, access and extend 2. Provide comprehensive guidelines to support design and development teams 3. Accelerate the design and development workflow across the Company Goals
  25. How we are doing it

  26. Build a team of proactive, cross-functional people Cross-functional teams provide

    multidisciplinary perspectives on all project ideas, which lead to better design solutions.
  27. Bring UX and UI Designers onto the team from the

    very beginning of the project Together, we look at upcoming features to identify an opportunity to build new components and patterns, or enhance existing ones, so that they can be built in a holistic way.
  28. https://avocaventures.com/ux-design-and-agile-software-development-design-mashed-up/

  29. Take a collaborative, not a siloed approach to doing the

    work Designers working hand in hand with specialists and developers as they build a working version of our product.
  30. Define core goals and principles Find the existing pain points,

    define goals and principles. They are as important as having an action plan.
  31. None
  32. Build a Design Kit to streamline work process and improve

    the design workflow A single source of truth for the Design and Front End building blocks. Core visual styles such as colors, typography, iconography, mixins etc, are organized in an easy to customize Sketch library that lives in parallel with the Online Styleguide.
  33. None
  34. Deliver the Design System as a tool Our Design System

    is a collective effort and the result is a set of components, styles, guidelines and patterns for Designers, Developers, Managers, and Clients, accessible via a web page and a dev platform that can be used on PS and SE projects.
  35. None
  36. None
  37. Understand that a Design System will always be an ongoing

    process Get management and developments teams on board. The Design System now an essential part of our product development.
  38. https://giphy.com/gifs/waiting-patience-gif-k4f872ae7u5ji

  39. R&D Solutions Engineering Professional Services Backbase Design System

  40. How the design system has benefited the organisation: • 22

    designers working with a single UI Kit • Faster design & implementation • Universal guidelines • Increased alignment • Better communication • Reduced gaps • Happier designers and developers
  41. How the design system has benefited our clients: • Increased

    quality of product • A solid foundation that accelerates their own system • Increased understanding of UX and Design Systems • Increased belief in Backbase
  42. Continued challenges • Collaboration cross-departments • Documentation • UI/UX Discussions

  43. Next steps • Automate design consistency • Build new interactions

    and document patterns • Release the Online Styleguide • Mature the system • Alignment with Mobile team
  44. Top Learnings 1. Start small 2. Get a team of

    enthusiasts 3. Advocate for design 4. Define goals, vision and list existing pain points 5. Take ownership!
  45. Q&A

  46. Thank you! Celeste North linkedin.com/in/celestenorth celeste@backbase.com Rayana Verissimo linkedin.com/in/rayanaverissimo rayana@backbase.com

    Lucie Agolini linkedin.com/in/lucieagolini lucie@backbase.com