Swedbank is one of Sweden’s and Europe’s largest banks, with over 7 million private and 600.000 corporate customers. Swedbank Pay is one of Swedbank’s brand and offers online payment, card redemption and card terminal solutions used by many large retailers around the nordics.
The Swedbank Pay Design Guide is a comprehensive design system that encompasses UI components in Figma, coded React components, and design guidelines. Swedbank Pay sought assistance in updating the existing design guide to align it with the new product branding, integrate components seamlessly, and include content about the brand identity. This content would cover various aspects, such as accessibility, imagery, logotype, colors, and copywriting, among others. Additionally, the request involved reviewing the structural layout and ensuring the fundamentals of building an intuitive, scalable, and accessible design system for end-users were met.
To comprehend the necessary steps, we started by initiating discussions with the primary end-users of the current design system, the developers. Our objective was to map out their user journey and identify the pain points they currently encounter. In addition to conducting in-depth qualitative user interviews, we observed new developers using the design system for the first time. This approach allowed us to gain insights into how to enhance their user experience. Furthermore, we conducted a thorough examination of other design systems currently available, in order to compile the best practices and patterns.
Working in a cross-functional team and iterative manner. We prioritized the most important features and functionalities to tackle based on the value and effort mapping. To prioritize the least effort and most value features first. We worked in weekly sprints where at start of every week we would go through the backlog and prioritize what should be done that week. This was important as it allowed us to work in shorter intervals and make changes based on the continuous feedback from our users. We had both re-occurring user tests and a slack channel where developers who used our design system would provide feedback to us.
The first page an user interacts with is of course the front page of the design system, with the redesign I focused on updating the design to follow the new brand. Creating a feeling of openess and inviting for the user. Besides welcoming the user, we also provide the context of what the design system is and entrances to the various categories available on the site.
Besides the redesign of the front page, I worked on various improvements across the site. First is the new “get started” section which was heavily requested by our users: here both new developers and designers can read about what the design guide is and provided with step by step tutorials on what they need to do to get the design system running on their machine. For designers we also provide all fonts, image bank, links etc.
The second new category introduced were the “Identity” category, here I wrote about the brand guidelines. The values that Swedbank Pay strives for. In addition to this, I also wrote, introduced and updated many different guidelines which were missing from the old design system. This included: Accessibility, color, copywriting, grid, spacing, iconography, imagery, logotype, page layout and typography guidelines.
Lastly and perhaps mostly importantly I also worked on both creating and updating the components in the design system. An new components overview page was introduced where the user could easily find the components they were looking for. We also overhaul the component page and introduced an interactive component builder (see figure on the right) where the user can dynamically adjust the component as they want and copy the new code instantly. In addition more guidelines around do and don’ts were also introduced to ensure that the components are being used correctly in projects where a designer is not present.
In order to provide an example of the changes in the visual updates of the components, here is a before and after of the card component. You can clearly see the outdated design language on the card to the left. I went through the whole design system library and updated each component to feel more modern, clean and aligned with the new branding.
When I updated or created new components for the design system site, the design process started first and foremost in Figma. At this time Figma has just introduced smart layout and variants. So this was the perfect opportunity to both learn about building smart components but also create a design system that will last.
During my time at Swedbank pay I also introduced new ways of working within our figma files. An issue I saw during this time was that since the design system team was about to be scaled up, with new designers joining us soon: We did not have a good system of tracking what has been done, changed and updated. We also didn’t have good ways to show the status of the various components. Here I proposed the addition of progress status, which would be added to the thumbnail of the component files and a changelog that are built with smart layout and can keep track of who did what and when.
Another process I was involved in was the ways of working between the design system and product teams. Especially the focus on contributing to the design system. As a design system never stops evolving. Here is how we defined the harmony in-between. One aspect of this process is the introduction and the guidelines around the handling of “Snowflakes” which are specific solutions to a specific problem which a component from the design system doesn’t cover. These snowflakes can eventually be turned into component if there are a common need for it. Otherwise it will stay as a snowflake used for the specific project.
During this project I had the opportunity to learn everything about redesigning a design system from ground up, by listening to the needs of the users. The launch and subsequent updates of the new design system was met with a lot of positive feedback from the developers and stakeholders using the design system. Besides bringing the visual aspect of the design system website to align with the new brand, the real value was created by solving the pain points of the user.
The developers mentioned that they really appreciated the transparency and involvement through out the whole process. I think this in turn eased the transition and the adoption rate of the new design system across the organization. Later on, the updated design system was also used as the basis to create the design system for Swedbank Pays sister company: PayEX.
