Tweet
Tweet

Slide 1

Slide 1 text

Empowering product growth with a Design System Celeste North, Lucie Agolini, Rayana Verissimo

Slide 2

Slide 2 text

Celeste North Senior UI/UX Designer for Wealth Management at Backbase. Filmmaker in recovery, guacamole connoisseur and pug enthusiast. [email protected] Rayana Verissimo Lead UI/UX Engineer for the Design Systems team at Backbase. HTML & Sass lover, hardcore emoji user and ultimate cat lady. [email protected] Lucie Agolini Lead UI/UX Designer for the Solutions Engineering team at Backbase. Scottish yoga lover, and international advocate for deep-fried mars bars. [email protected] The Design Team

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

We empower financials to accelerate their digital transformation

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

The Research & Development Team

Slide 8

Slide 8 text

As Product Designers, we are responsible for the development of the core Backbase solutions.

Slide 9

Slide 9 text

R&D Solutions Engineering Professional Services

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

The Professional Services Team

Slide 14

Slide 14 text

We are the intersection of the product and the client. Backbase Clients Somewhere here!

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Design implementation in the Wild Wild West, also known as “before the Style Guide”

Slide 18

Slide 18 text

But what does a Design System mean for Backbase?

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

How to create so many things for everyone?

Slide 23

Slide 23 text

“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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

How we are doing it

Slide 26

Slide 26 text

Build a team of proactive, cross-functional people Cross-functional teams provide multidisciplinary perspectives on all project ideas, which lead to better design solutions.

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

https://avocaventures.com/ux-design-and-agile-software-development-design-mashed-up/

Slide 29

Slide 29 text

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.

Slide 30

Slide 30 text

Define core goals and principles Find the existing pain points, define goals and principles. They are as important as having an action plan.

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

https://giphy.com/gifs/waiting-patience-gif-k4f872ae7u5ji

Slide 39

Slide 39 text

R&D Solutions Engineering Professional Services Backbase Design System

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Continued challenges ● Collaboration cross-departments ● Documentation ● UI/UX Discussions

Slide 43

Slide 43 text

Next steps ● Automate design consistency ● Build new interactions and document patterns ● Release the Online Styleguide ● Mature the system ● Alignment with Mobile team

Slide 44

Slide 44 text

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!

Slide 45

Slide 45 text

Q&A

Slide 46

Slide 46 text

Thank you! Celeste North linkedin.com/in/celestenorth [email protected] Rayana Verissimo linkedin.com/in/rayanaverissimo [email protected] Lucie Agolini linkedin.com/in/lucieagolini [email protected]