Interbank is one of the largest banks in Peru. One of its benefit platforms is Shopstar.pe, an e-commerce site that allows customers to redeem credit card points for products from various marketplaces and small businesses.
In 2022, I took the lead in building a Design System in Figma to tackle collaboration challenges and design inconsistencies. This initiative resulted in a 75% increase in overall workflow efficiency and increased team engagement.
.png)
.png)
7 months (solo designer sharing project with other tasks in the sprint)
UX & UI Designer supported by UX and UX Lead
How might we build a Design System to improve team collaboration and design efficiency, ensuring consistent experiences throughout the platform?
When I first joined the Shopstar team, I noticed significant gaps between what was being designed and what was being developed.
Designers and developers, split between in-house staff and vendors, were each using different design kits and tools. As a result, there were multiple versions of the same components being used across the product.
.png)
As I got to know the mixed structure of the Shopstar team, I realized that understanding each member’s role, working context, and how they used components was key to identifying why these gaps were happening.
To ground myself, through interviews with team members, I created a simple diagram to map out how features were built. Thanks to this, I discovered that vendors didn’t had access to the Sketch library.
.png)
The first solution we considered was standardizing everyone on the Sketch and InVision design system. However, given the shifting nature of the team, this approach wasn’t cost-effective.
The second option was to migrate the existing Sketch library to Figma, a tool already in use across the team. We ultimately chose this route, as it better aligned with our evolving structure and needs.
.png)
Given the limited time and resources, I was entrusted with leading the project, with occasional support from the design team. As the sole designer on the design system, I knew efficiency was essential.
I defined a clear scope and divided the work into four stages, prioritizing the creation of the Figma design system over 12 two-week sprints (7 months). Since I was also involved in design and research for other projects, I dedicated part-time hours to the design system throughout.
.png)
When Shopstar was first created, the Interbank team developed a UI kit in Sketch. While it provided a solid foundation, it was no longer being used consistently. To address this, I audited components across Figma, Sketch, and the live product to identify the most commonly used elements and behaviors.
Following the Atomic Design methodology, I drafted a preliminary structure for the new system and pinpointed components that could be migrated from Sketch. I initially attempted an automatic transfer to Figma from Sketch, but many components rendered poorly, so I rebuilt them from scratch, inspecting each one individually in InVision.
.png)
.png)
Kit was created to quickly tackle styling and component inconsistencies. This served as a testing ground to see how the team applied styles, components, and variants, allowing me to refine naming conventions, usability, and accessibility.
.png)
The design team was not very familiar with styles, components, and auto-layout in Figma. To address this, short 1:1 sessions and shared Loom videos were organized to guide team members on how to use each item effectively.
.png)
During this process, various features were being designed. The design team regularly met with me for UI feedback and the development team for Design QA. When necessary, styles and components were updated. Here are some pages I had the opportunity to contribute in.
One example of this was my contribution to the final stage of the Home Page redesign. I refined styling, replaced and modified components, designed each component's states and behaviors, and ensured pixel-perfect precision.
.png)
Once styles and components were finalized, we began compiling and organizing them into a Figma file to make everything easily accessible and the documentation process enjoyable.
At this stage, we focused on documenting what was correct from a design perspective, while logging any inconsistencies found in production as Jira tickets for the future development backlog. We also captured different component states and style rules to ensure design consistency.
.png)
Before, our Figma design files were a bit confusing. Only the designer knew where to find certain states. Adding simple tags and clear structure made the files much easier to follow during developer handoff.
During the process, I noticed that the Product Manager frequently struggled to locate projects in Jira. I quickly solved this issue by creating custom component thumbnails for each project, making projects easy to find.
After 7 months, the first version of La Playa Design System, named for its extensive "shoreline" of components, was launched. Take a look at the file here.
.png)
I created a slack channel to keep the developing and design teams updated and ensure new components were added to the dev backlog promptly.
Designers reported an increase in workflow efficiency by 75% comparing the average time taken to complete a task before and after implementing the Design System.
By the end of the year, La Playa Design System was recognized as the most impactful project internally, significantly improving team satisfaction and engagement.
What went well?
Despite being a UX Intern with no prior experience in building design systems, I took the initiative to self-learn and successfully launched a single source of truth in Figma that improved efficiency and team satisfaction.
What did I learn?
As the product grows, Design Systems become essential for enhancing brand identity and ensuring scalability. It’s an ongoing process that requires continuous collaboration between design and development throughout the workflow.
What can I improve on?
I wish I’d had more time, experience, and coding skills back then to build a Code Design Library using Zeplin and Storybook. That way, all the Design System assets could’ve been easily accessible, both visually and in code. That’s part of what inspired me to later pursue a program specializing in both design and coding in Canada.
What would I do next?
I'd create a Code Design Library with Zeplin and Storybook. I'd create an Excel table to track the library of components to ensure alignment between Code Library and Figma. As well, I'd held meetings with developers, designers, and product managers to establish an efficient end-to-end framework for system updates in the Sprint cycle. This is an ongoing process as long as product keeps evolving.
