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

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
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
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
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.
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.
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.
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