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.
When I joined the Shopstar design team in 2021, they were split between using Sketch and Figma. This situation led to collaboration challenges, design inconsistencies, and lengthy delivery times.
In 2022, I took the lead in building a Design System in Figma to improve efficiency, ensure consistency, and elevate the overall visual design. This initiative resulted in a 75% increase in overall workflow efficiency.
How might we build a Design System to improve team collaboration and design efficiency, ensuring consistent experiences throughout the platform?
I conducted interviews with the Senior UX Designer, Lead Designer, and Front-End Developers to identify their needs and challenges with the existing workflow.
🚩 Challenge 1: Designers spent excessive time recreating components because half the team had access to the UI Kit in Sketch, while the other half didn't.
🚩 Challenge 2: Developers weren't using pre-built components, leading to rework and inconsistency.
I conducted an in-depth research on design systems, gaining insights into their business value, implementation timelines, and the best approach for integration. I accomplished this in a dedicated two-week sprint, developing a personalized approach to applying this knowledge to the workflow needs.
🌱 I was still an intern with no prior experience managing design systems at the time, so I’m very grateful to my Product Manager and design seniors for trusting me with this responsibility.
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!
I formulated a strategy to support the design and development teams in an efficient, structured way. Given the limited time and resources, I divided the project into four stages, prioritizing the creation of the design system in Figma.
.png)
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.
The design team was not very familiar with styles, components, and auto-layout in Figma. To address this, I organized short 1:1 sessions, guiding team members on how to use each item effectively.
This proved valuable, as it allowed them to ask personalized 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.
During this process, various features were being designed. As the Design System Lead, the team regularly met with me for UI feedback, and when necessary, I updated styles and components.
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.
Once we had finalized the styles and components, I began compiling and organizing them into a Figma file, which later became the Figma-based design system, "La Playa."
Once I set up the Figma file, I began documenting the styles while managing other sprint tasks. To streamline the process, the Product Manager help allocating sprint time for each designer to help me document the remaining component behaviors. This allowed the team to better familiarize themselves with the system.
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 with:
I created a slack channel to keep the developing and design teams updated and ensure new components were added to the dev backlog promptly.
By the end of the year, La Playa Design System was recognized as the most impactful project internally, significantly improving team satisfaction and engagement. Designers reported a 75% reduction in prototyping time, boosting overall delivery efficiency.
I transformed an outdated web experience into an engaging one, balancing business strategy and customer needs.
Read Case Study
I crafted a brand identity, user interface, and hand-off materials for an educational escape room.
Read Case Study