Backbase Design System
A redesign of the guest itinerary component for multi-day Adventures.
Summary
Discovery
Ideation
Design
Usability testing
Challenges
Improvements
Challenge
How might we create a unified photo viewer
experience that helps guests easily get an
overview of listing photos or view photos
in detail?
My Role
UX Researcher
Year
2020
Tools
Figma
Summary
As Backbase grew, its design teams faced an increasingly challenging task: maintaining consistency, efficiency, and collaboration in their design process. Initially, Sketch served as the foundation of our design system, but as the organization expanded and collaboration became a priority, the limitations of Sketch became apparent. This prompted a strategic migration to Figma, resulting in a more streamlined, efficient, and collaborative design process.
This case study will explore the migration journey, the pros and cons of the transition, the challenges faced, the creation of a new design system in Figma from scratch, and the valuable lessons learned along the way.
The challenge: why migrate?
Single User Editing
Design team
Manual labor
Version Control Issues
Stakeholders
Functionality
Objectives
Migration: Successfully migrate the existing design system from Sketch to Figma with minimal disruption.
Creation: Establish a robust, scalable design system in Figma that serves as a single source of truth for all designers, developers, and stakeholders.
Optimization: Implement workflows that would enhance efficiency, collaboration, and consistency across projects.
Problem Definition
User problem: For the UX team, 50 + designer
Business problem:
Phase 1: Evaluating the migration from Sketch to Figma
Why Figma?
Real-time Collaboration: Unlike Sketch, Figma offers real-time collaboration, enabling multiple designers to work on a file simultaneously. This was crucial for our geographically dispersed team.
Cloud-Based: Figma's cloud-based nature eliminated the need for managing file versions manually. This meant no more outdated files or version conflicts.
Design Systems Support: Figma’s robust support for shared libraries, styles, and components made it ideal for creating a centralized, scalable design system.
Prototyping and Handoff: Figma’s built-in prototyping and developer handoff capabilities reduced our reliance on third-party tools, streamlining the design-to-development workflow.
Pros and Cons of Migrating from Sketch to Figma
Aspect
Pros - Collaboration Real-time, cloud-based collaboration Transitioning required training and onboarding
Prototyping Built-in prototyping and animations
Limited advanced prototyping (compared to Principle)Developer HandoffSeamless, with built-in code snippetsRequires developer buy-in and familiarityDesign System SupportCentralized, scalable, and component-basedComplex migration process for existing assetsCostSingle subscription includes all featuresCost may be higher if previously using Sketch's one-time fee
Migration Process
The migration process consisted of four main steps:
Asset Audit: Analyzing and auditing all existing components, symbols, and libraries in Sketch.
Component Mapping: Creating a mapping plan to identify how existing components would transfer to Figma’s structure.
File Transfer: Using Figma’s Sketch import feature, we transferred assets, followed by manual adjustments to maintain fidelity.
Optimization: We restructured and optimized the imported components to align with Figma's design system model (e.g., nesting, variants, and auto-layout).
Design
Phase 2: Evaluating the migration from Sketch to Figma
Crafted design Kits for all product lines.
In our design workflow at Backbase, we support the industry standard method for delivering UX.
We leverage Figma, a versatile and collaborative design tool, to accelerate implementation projects.
With its cloud-based platform, our designers can work together in real-time, enabling seamless collaboration and efficient iteration
We … using lean and agile methodologies
Phase 3: Usability testing
Aftermath
You can write here as much as you want, this text will always look nice, whether you write longer paragraphs or just
a few words. Click here and try it out.
Phase 4: Impact
Just like buttons, I've build more than 100+ components in this library including Web, IOS and
Android.
Increased efficiency: process and communication between departments
Lower Workload, removing duplicate work and clear handovers result in less friction between designers
and developers.
Cost, switching to Figma will decrease the cost from 87k to 27k = 70% decrease in cost/year
Documentation, a shared space where you can keep track of the system development, and guide others
on how to use the design system.
Visual language, guide to what the brand feels like.
Brand guidelines, includes principles, tone of voice, writing style, and more.
CSS Framework, front-end code that developers use to build a productHow did you get to creating the design system?
Designers time efficiency
And although Figma is the new cool kid in the block, migrating from Sketch it is extremely important to
ensure consistency, accessibility and the same efficient work flow.
How do we achieve that? Add product design thinking to constantly improve the system, in order to get
ongoing feedback from all teams.
200h
Studying and analysing design system components
120+
Componets were created
35
Individual workshop sessions with designers and stakeholders
250+
Screens were generated with the new design system library
Learnings
The single signee flow was built during the testing sessions due to time constraints. I made some
improvements based on feedback from usability testing to improve the user experience. However,
I was unable to complete all the improvements before being laid off.
Choose signing methodWe need to maintain both the original "Sign a PDF" (which places the
eSignature at the end of the document) and the one I'm developing as a separate signing method
until this feature is fully developed. The reasons for doing this are:I wanted to experiment with
removing unnecessary features from the editor.It's easier to use a feature flag and slowly roll out
these new PDF signing features to users in this way.This helps manage user expectations before
they invest time and effort, in case this isn't what they need.