CASE STUDY
Maneuvering in a Design (Eco)System in Figma.
CLIENT:
Major Fintech Bank (NDA)
MY ROLE:
Experience Designer, UX Writer
Project Focus & Role Impact
Team
Entire UX TeamTools Used
Figma, Sketch, InDesign, Box, JIRAOur enterprise client has an extensive design system that forms the foundation of 500+ modules to support dozens of partners and impact millions of users on the web. The vastness of this ecosystem called for an intricate use Figma’s features. Collaborating with my UX team, I utilized Figma’s features like hierarchy and versioning control to maintain the integrity of each module during UX sprints. We leveraged the power of Figma to navigate through a meticulous design process that models and preserves our Agile workflow.
Project Overview
1. Our Need
2. Our Workflow
3. Our Design Ecosystem
4. Our Figma File Workspace
1. Our Need
My team specialized in doing quick updates to our client’s live site. We worked in 2 week agile Sprints. Our solutions typically shipped twice. After a solution is shipped for the first time, we acquire legal approval and translations, and then we can ship it live to production. This meant that we had ensure the design system:
1.
Reflected the methodical and hierarchical nature of our Agile workflow.
2.
Promoted synchronized work for product updates and site maintenance.
3.
Preserved the integrity of the live site until updates were production ready.
To keep up with industry, we were commissioned to migrate our old Design System to Figma. Figma’s features enabled us to build and utilize a Design System that solves for our needs.
2. Our Workflow
Two-Week Agile Sprints
Figma Branches
We needed to have a design system that supported the efficient development and shipment of these small design updates for approval while maintaining the integrity of the main live file.
Figma’s Branch feature gave us the power to do this. At the start of a Sprint, we made a branch out of what was currently live in our production and completed the updates to that branch. Once the development team shipped the code to the live site and once we have the go ahead from the client, the product team, and legal, the Figma branch is merged into the live file.
The first half of a two-week Sprint.The second half of a two-week Sprint.3. Our Design System
a. The Primary Layer
Figma Teams Level
The Teams feature in Figma depicted the highest hierarchical level in our Design System.
This Major Fintech has a lot of ecosystems their partners utilize. Dependent on the type of user, i.e. customer vs. commercial, acquisition vs. servicing, users interacted with different service environments.
Major Characteristics:
Used for holding the projects and files specific to a particular service environment.
Portrays the processes and flow that align with the client’s work streams.
Includes the purpose of the Team, Team-specific libraries, and links of other relevant content.
b. The Secondary Layer
Figma Project Level
Within the team's level, we have the projects level. This is the second layer in our Design System.
A Figma Project is a group Figma files. These files are the modules within that specific Figma Team, or service environment.
Major Characteristics:
Depending on the partner, users see different versions of the same module.
So, the Figma projects are organized by modules.
In those projects you have the different versions of those modules.
For example, a service environment could have one module.
However, this module has two versions: one that is consumer facing and one that is commercial facing.
So, in this specific module project, there are separate Figma files that have the designs and documentation of the different versions of this specific module.
Figma Files are the lowest level in our level in our Design System hierarchy.
Major Characteristics:
Files live with in Figma Projects and are separated into consumer and commercial UX documentation.
Within the Figma File are pages, and these pages are divided into collections:
introduction, which includes cover page, overview, and user flow
the final documentation given to the client
the workspace
research and ideas
archive
c. The Final Layer
Figma File Level
4. Our Workspace
The Cover Page includes the name of the module and quick guidance of the purpose of the file. The cover page differs depending on the type of work and states of modules
These mobile-specific art boards displayed the UX annotations, lo-fi wireframes, UX interaction notes, and any additional notes for the dev team. Majority of my work was completed in these pages.
The UX interaction notes call out the functionality of the module. Each note aligned with a number annotation that was on the lo-fi mockup of the module.
The User Flow Page contains user flows for all the variations of that Module. Each Screen and Modal on the user flow is linked to the corresponding Spec Board.
These art boards are desktop specific. Both the mobile and desktop UX annotations art boards are placed in the Handoff Specs and the Work In Progress sections of the file.
Our Figma files also housed our hi-fi mockups of the module.
Designing in Figma Files
Our workspace contained many pages. I’d like to highlight the pages I frequently edited in our design process, as well as additional pages.
Conclusion
We moved our Design System from InDesign, Box.com, Excel, and Sketch to Figma by the end of June 2023. The Design System transitioned to our client’s design team. The migration process was a great opportunity to learn about Figma’s special features. I learned that Figma is a perfect tool to use for our meticulous design needs.