MERCADO PAGO
There was a need to have a place that could contain standard components of the UI used by our team: Insurtech. Insurtech is a new business unit inside Mercado Pago, whose main objective is to expand Mercado Libre's financial services. It’s not an insurer, it’s a digital insurance producer. We solve eventualities 100% from the app: users are just one click away to report a claim.
Insurtech
Research
Design system
Asigned role
SSr. UX Designer
Team
1 UX Designer, 1 Project Leader, 1 Technical Leader, 4 Developers
Timeline
Sep. 2021 - Oct. 2021 // 8 weeks
Tools
⚠️ If you're not prepared to read in detail, review this brief summary instead.
Let's star the journey with some information
Insurtech team
As the months passed, new products were added and the size of each team grew to address the growing needs. We transitioned from a team of 3 UX/UI designers to a team of 15, and from 50 developers to 150 within a year.
Like a startup
Insurtech began as a modest project but has been steadily expanding day by day. Our goal is to sustain this growth while upholding quality and consistency.
As the project advanced, our approach to problem-solving gradually shifted from a purely visual standpoint to a more functional and purpose-driven one. We began asking ourselves: Why do we do what we do?
Outcome
How can we help our UX and Development teams work together to create simple, scalable, and consistent experiences for our users? I established a design system, produced high-fidelity mockups, and collaborated closely with developers.
Customer Platform (Web & App)
Interaction Design
Interdisciplinary Collaboration
Information Architecture
Product Strategy
Prototyping Tools
Team talk (Presentation)
User Research
Visual Design Principles
Wireframing
+150
DEVELOPMENT TEAM
people part of the FE and BE team using Pandora
16
CONTENT + DESIGN
UX team using Pandora to design seamless experiences
3
PRODUCTS
active products with more than 800.000 sales in 1 year
Started with Research
Here's what I did before diving into the actual work: I chatted with different folks involved and got their feedback to make the end result even better.
Building bridges
So, why create a design system?
Shared language
Powered by People and Serving People (DCU).
Strategy
UI is also part of a product's strategy: it defines hierarchies and identity.
Freedom
We could be more focused on the vision and user experience of the product.
We developed not just a library ensuring visual consistency, but also a comprehensive guide detailing parameters and the usage of each component.
This is how birth:
Cheap and fast to deliver experiences
A Design System isn't just about organizing and standardizing screens; it's about saving invaluable resources—particularly time, which directly impacts production metrics. By streamlining processes, we're able to save time for a team of over 200 people, ultimately saving money.
FOUNDATIONS
Elementary rules for definition of UI taken from Andes.
Colors
Typography: Proxima Nova
Layouts & Spacing
COMPONENTS
Specifications were crafted in Figma from the UX side, while the FE team established a GitHub storybook for step-by-step testing. Figma enables seamless collaborative work.
SPECS
We meticulously documented every aspect of component construction, including paddings, margins, element arrangements, variables, do's and don'ts.
Pandora is here to stay
Presenting our Design System was just as vital as building it. Successfully conveying its purpose and the benefits it brings to our business unit to the rest of the team (development, product, business, etc.) was a notable achievement. I participated in a UX session, engaging with UXers from other departments within the company. During this session, I shared our insights, leaving behind the entire work process as a legacy.
Bonus track
In 2022, Pandora was introduced during the Figma event: Config
Ger and Facu from Andes' team shared the daunting task of migrating, updating, and maintaining the Andes library, Mercado Libre's design system, utilized by one of Latin America's largest UX teams.
Pandora was highlighted as an outstanding example of a sub-system within Andes. Check out the video!
Final thoughts
My first independent project at InsurTech was an experience I thoroughly enjoyed. I eagerly embraced the challenge of exploring design systems and mastering the Figma tool, expanding my design skillset.
Beyond the technical aspects, this project allowed me to flourish as a team player. I forged strong relationships with the development team, collaborating closely to ensure a seamless design-to-development process. This collaboration not only fostered a supportive work environment but also provided me with valuable insights into the broader development process.
Pandora holds a special place in my heart as it marked a significant milestone in my professional journey. It was an experience that not only challenged and honed my UX/UI design skills but also emphasized the importance of teamwork and effective communication in achieving project goals.
Shoutout to Marcela Cardoso (Content Partner), Diego Reyneri (Senior Designer), and Leonardo Baraldi (Team Lead) for their invaluable support. Lastly, I want to emphasize the close collaboration of the entire development team.
Figma
Design System
Storytelling
Teamwork
