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 Designer (me) supervised by UX Lead Designer and Senior UX Designer
How might we build a Design System to improve team collaboration and design efficiency, ensuring consistent experiences throughout the platform?
Interviews were conducted with the Senior UX Designer, Lead Designer, and Front-End Developers to uncover workflow issues.
The main problem was inconsistent access to the UI Kit in Sketch, leading to multiple versions of the same components—such as four different buttons—being created by different team members.
.png)
.png)
I documented my findings and scheduled a call with my Design Lead to propose migrating from Sketch to Figma. With her support, we arranged a meeting with the Product Manager and Owner to secure the Figma license for building a Figma-based Design System. They approved the plan!
Amid ongoing feature deployments with no clear UI direction, the team recognized the urgent need for a design system. It was decided that I would lead its creation in Figma, while the other two designers handled remaining tasks.
The project was divided into four prioritized stages. I would be building the system alongside several new design deployments and changes in the product.
When Shopstar was first created, the Interbank team developed a UI kit in Sketch. While this provided a strong starting point, automatic migration to Figma was unreliable at the time. Many components rendered poorly, so I recreated them from scratch, inspecting each one from Invision individually.
I created a UI Kit 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 and usability.
.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.
This proved valuable, as it allowed them to ask questions and experience the benefits of a Figma-based design system firsthand. For example: I walked team members through how I built the button component, explained its variants, and demonstrated how to use them efficiently in their workflow.
.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. File was organized following an Atomic Design structure.
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.
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*.
*Original document is in Spanish.
.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.
