The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.
Consequently, we have decided to not include support for IE in the Design Library website.
Green is SEB's design system for building products and digital experiences for SEB.
The design system includes a coded component library, design assets and user interface guidelines. At its core, Green adheres to a well-defined set of principles and methodologies aimed at optimising accessibility, code quality, brand consistency, user experience, and the overall efficiency of designers and developers
A design system is a set of standards to manage design at scale. In Green Design System this set of standards consists of a collection of reusable coded components, documented design patterns and user interface guidelines. At SEB, we streamline the development process by consolidating the essential building blocks (components) of digital applications into a single, shared system accessible by all product teams. Utilising pre-built components and assets from this design system not only reduces design and development time but also ensures adherence to SEB's latest digital design and accessibility standards.
Green consists of three core areas and eight areas of excellence. The three core areas are: Design, Code and Guidelines.
The design part resides in the design tool Figma where components are designed and constructed in such a way that they can be reused in Figma design files within the SEB organization. When components in Figma get an updated design, this will propagate to all Figma design files. This is done with Figma libraries. You can read more on how we work with Figma libraries here.
Our guidelines consist of user interface guidelines, component documentation and common design patterns. This information is documented in the Design Library and Storybook.
In the process of developing reusable components, numerous considerations must be taken into account. To ensure no crucial aspect is overlooked during component creation, we have devised a comprehensive checklist encompassing eight distinct areas of excellence.
The eight areas of excellence are:
Green is built by everyone at SEB and for everyone at SEB. Having a decentralized design system where components are contributed by teams avoids speedbumps when building products since you can create needed components within the team and then contribute them to the design system. If all components were built by the design system team and every other team would have a dependency on this team, it would create a bottleneck slowing down the whole organization since the design system team would not be able to keep up with demand. Read more about how the Contribution Process works here.
The development teams at SEB know its product better than anyone else. They also know their user/customer better than anyone else. All this knowledge is crucial to create the best solution and component for the job. A design system team is good at building reusable components but does not have all the insights to create the best solution. That is why components need to be contributed by the ones who have the knowledge and can create the solution.
As multiple teams contribute to a shared system, it is essential to uphold uniformity and quality in components, documentation. The Green Core Team's governance function addresses this need by fine-tuning contributions to ensure compatibility with the design system's architecture and facilitating component reusability for all teams within the bank. The Green Core Team also maintains the processes around contributing to the design system, life cycle management as well as support functions like coaching meetings, co-pilot initiatives and our teams' channels.
Do you have a question? Have you found a bug? Scroll further down for our contact information.
A process for contributing features and components to Green Design System
To keep things structured and make it easy for contributors we have created a five-step process for contributing new features or components:
The first step in the process starts with a need from an end-user or a team for a specific feature or component. This need should be defined by the contributor in a couple of sentences so it can be communicated to the Green core team for further discussion.
In this step we assign a Co-pilot from the Green core team to help the contributor through this whole process. Creating features in a design system is complex so having a co-pilot to guide you around and ask questions when needed helps a lot. In this step we also hand out a checklist that helps you during implementation.
Introduction to the Green Design System and to a Co-pilot is done during a Green coaching meeting. A slot based support meeting for users of the design system. You can book Green coaching in the Book a session channel in teams. Check the tabs at the top of this channel.
This is the big one. Creating a component is not for the faint-hearted and creating reusable ones in a design system even less so. In this step design, development and accessibility testing goes back and forth. The Co-pilot is here to help keeping things aligned with the design systems structure while the team is solving a problem for an end-user.
During this step you can get support from Green core team members through Green coaching or from CX coaching which another slot based meeting aimed to support teams with UX expertise.
To verify that the implementation meets the requirements of our areas of excellence the Green core team reviews the feature before it is merged into the design system.
If the component meet the requirements it's merged into the design system and communicated to everyone that it's available for designers and developers to use.
To get started with contributing, define a need for a feature and book a Green coaching slot in Teams.
Have a question regarding our design system? The Green core team is here to help you. But before you send us a message, be sure to check out our resources and see if we've already covered your topic.
The Green core team governs the design system and supports users of the design system. If you have an issue, suggestion or contribution find a link below that most closely matches your need for the quickest response.
For internal SEB users only.
The Green core team maintains the following channels and will provide support there on as time permits. Please search Teams, Github or Figma to see if your questions have already been addressed before posting in the channel.