Transforming PDFs
into seamless mobile experiences
Transforming A4 PDFs into seamless mobile experiences
Transforming A4 PDFs into seamless mobile experiences
UX/UI Design
Figma Trainer
Client:
Supermercados Wong
Year:
2024
UX/UI Design
Figma Trainer
Client:
Supermercados Wong
Year:
2024
UX/UI Design
Figma Trainer
Client:
Supermercados Wong
Year:
2024
Project Overview
The Challenge
The REAL Challenge
Solution
Wong Cencosud is the leading supermarket in Lima, Perú, known for their high quality products, from the freshest vegetables to the finest wines, yet they had a problem. Their beautifully photographed, meticulously designed PDF catalogs—created to promote their latest deals—weren’t being seen. Shared through ISSU links in social media ads, these catalogs were virtually invisible. Great content, wrong medium.
As the digital team, we knew there had to be a better way. Enter the idea of a mobile-first landing page: a user-friendly, smartphone-ready solution to showcase their products effectively. With 80% of Wong’s digital traffic coming from mobile devices, this was a no-brainer.
But how do you transform a static A4 PDF into a dynamic digital experience? And can you do it within the same tight deadlines? That’s where the challenge—and the fun—began.
Project Overview
Wong Cencosud is the leading supermarket in Lima, Perú, known for their high quality products, from the freshest vegetables to the finest wines, yet they had a problem. Their beautifully photographed, meticulously designed PDF catalogs—created to promote their latest deals—weren’t being seen. Shared through ISSU links in social media ads, these catalogs were virtually invisible. Great content, wrong medium.
As the digital team, we knew there had to be a better way. Enter the idea of a mobile-first landing page: a user-friendly, smartphone-ready solution to showcase their products effectively. With 80% of Wong’s digital traffic coming from mobile devices, this was a no-brainer.
But how do you transform a static A4 PDF into a dynamic digital experience? And can you do it within the same tight deadlines? That’s where the challenge—and the fun—began.The Challenge
Proposing landing pages instead of PDFs made perfect sense—until we dug into the details. We faced two major hurdles:
1. Too Much Content, Too Little Space: Mobile screens are small, but the product list wasn’t. We had to make the layout visually appealing without overwhelming users—or resorting to the dreaded infinite scroll.
2. Lightning-Fast Turnarounds: With 2–3 catalogs per month (plus seasonal extras), we needed a design system that was quick to implement and easy to maintain.
The goal was to create a scalable, mobile-first solution that delivered the same information while improving user experience and keeping deadlines realistic.
The REAL Challenge
At Wong, the area was divided into two teams:
• The Catalog Team: Experts in InDesign with print skills.
• The Digital Team: Focused on social media ads and on/off campaigns.
These teams collaborated occasionally, so when the landing page project landed on my radar, I stepped up to design it. I saw it as a chance to sharpen my Figma skills with a real, high-impact project. There was a caveat, though. After the first launch, the catalog team would take over ongoing updates and production of future landigng, even though they never used Figma before.
My task wasn’t just to design a user-friendly landing page but to create a system easy enough so print designers could pick it up as fast as posible. I was given just one day to train them on everything needed to meet the regular deadlines.
This dual focus—on external users navigating the landing and internal users editing it—added a unique layer of complexity to the project.
Solution
The solution was a modular, plug-and-play system built in Figma. Every element of the landing page—from product grids to banners—was designed as a reusable component. Key features included:
• Customizable Blocks: Easy to edit with just a few clicks, minimizing the learning curve for the catalog team.
• Scalable Design: Whether for a regular catalog or a special seasonal event, the system could adapt effortlessly.
• Efficiency Built-In: Pre-made templates ensured the catalog team could meet tight deadlines without sacrificing quality.
After a brief training session, the catalog team was ready to take over, armed with a system that streamlined their workflow and delivered better experiences for end users.
Project Overview
Wong Cencosud is the leading supermarket in Lima, Perú, known for their high quality products, from the freshest vegetables to the finest wines, yet they had a problem. Their beautifully photographed, meticulously designed PDF catalogs—created to promote their latest deals—weren’t being seen. Shared through ISSU links in social media ads, these catalogs were virtually invisible. Great content, wrong medium.
As the digital team, we knew there had to be a better way. Enter the idea of a mobile-first landing page: a user-friendly, smartphone-ready solution to showcase their products effectively. With 80% of Wong’s digital traffic coming from mobile devices, this was a no-brainer.
But how do you transform a static A4 PDF into a dynamic digital experience? And can you do it within the same tight deadlines? That’s where the challenge—and the fun—began.The Challenge
Proposing landing pages instead of PDFs made perfect sense—until we dug into the details. We faced two major hurdles:
1. Too Much Content, Too Little Space: Mobile screens are small, but the product list wasn’t. We had to make the layout visually appealing without overwhelming users—or resorting to the dreaded infinite scroll.
2. Lightning-Fast Turnarounds: With 2–3 catalogs per month (plus seasonal extras), we needed a design system that was quick to implement and easy to maintain.
The goal was to create a scalable, mobile-first solution that delivered the same information while improving user experience and keeping deadlines realistic.
The REAL Challenge
At Wong, two teams worked on catalogs:
The Catalog Team: Experts in InDesign with print skills.
The Digital Team: Focused on social media ads and on/off campaigns.
These teams rarely collaborated, so when the landing page project landed on my radar, I stepped up to design it. I saw it as a chance to sharpen my Figma skills with a real, high-impact project. The twist? After the first launch, the catalog team would take over ongoing updates. But they’d never used Figma before. My task wasn’t just to design a user-friendly landing page but to create a system so intuitive that print designers could pick it up easily. I was given just one day to train them on everything needed to meet the regular deadlines.
This dual focus—on external users navigating the landing and internal users editing it—added a unique layer of complexity to the project.
Solution
The solution was a modular, plug-and-play system built in Figma. Every element of the landing page—from product grids to banners—was designed as a reusable component. Key features included:
Customizable Blocks: Easy to edit with just a few clicks, minimizing the learning curve for the catalog team.
Scalable Design: Whether for a regular catalog or a special seasonal event, the system could adapt effortlessly.
Efficiency Built-In: Pre-made templates ensured the catalog team could meet tight deadlines without sacrificing quality.
After a brief training session, the catalog team was ready to take over, armed with a system that streamlined their workflow and delivered better experiences for end users.
About the catalog
We chose ‘Dias W’, Wong's monthly catalog featuring discounts and promotions. Its simple design, combined with heavy content, made it the least viewed catalog—perfect for testing our new approach. By improving accessibility and engagement, we aimed to make it more mobile-friendly, visually appealing, and user-centered
Design System
Design System
Foundations
Luckily, we didn’t have to start from scratch. Wong already had a brand manual in place, so we only needed to adapt the existing colors and typography into Figma styles. We also converted key elements into components for easier editing.
To enhance the catalog’s digital presence, we created a few new elements not found in the manual, tailored to the landing page format. This approach ensured the catalog maintained its brand identity while offering a better experience for mobile users and aligning with the digital-first design.
Luckily, we didn’t have to start from scratch. Wong already had a brand manual in place, so we only needed to adapt the existing colors and typography into Figma styles. We also converted key elements into components for easier editing.
To enhance the catalog’s digital presence, we created a few new elements not found in the manual, tailored to the landing page format. This approach ensured the catalog maintained its brand identity while offering a better experience for mobile users and aligning with the digital-first design.
Colors
We adapted Wong's signature red into a flexible color scale and introduced a gradient to add a more modern, stylish touch suited for digital media. This gave the catalog a fresh, dynamic look while staying true to the brand.
Typscale
Given the mobile-first approach, we kept the typescale simple yet effective, ensuring readability and clarity across various screen sizes without overwhelming the user.
Grid
After experimenting with different layouts, we settled on a 7-column grid. This structure worked well for displaying a large number of products in carousels while keeping the content organized and easy to navigate in limited space.
Customer Loyalty Program Brands
For loyalty program brands, we created separate mini style guides to fit their specific brand guidelines, as we didn’t have control over their pre-existing assets. This ensured consistency across the entire catalog.
icon set
To improve navigation, we introduced custom icons for each category. This made it easier for users to quickly find what they were looking for, enhancing the overall browsing experience and helping drive engagement.
Colors
We adapted Wong's signature red into a flexible color scale and introduced a gradient to add a more modern, stylish touch suited for digital media. This gave the catalog a fresh, dynamic look while staying true to the brand.
Typscale
Given the mobile-first approach, we kept the typescale simple yet effective, ensuring readability and clarity across various screen sizes without overwhelming the user.
Grid
After experimenting with different layouts, we settled on a 7-column grid. This structure worked well for displaying a large number of products in carousels while keeping the content organized and easy to navigate in limited space.
Customer Loyalty Program Brands
For loyalty program brands, we created separate mini style guides to fit their specific brand guidelines, as we didn’t have control over their pre-existing assets. This ensured consistency across the entire catalog.
icon set
To improve navigation, we introduced custom icons for each category. This made it easier for users to quickly find what they were looking for, enhancing the overall browsing experience and helping drive engagement.
SPACER
SPACER
SPACER
Design System
Design System
Components
The base module
The heart of the landing page is the 'Llamado'—a product description component with all key product details. We simplified editing by dividing it into five smaller components, each controlled with straightforward properties. This modular setup made training the catalog team easier, focusing on editing side panel properties without needing to master advanced features like autolayout or component properties.
The heart of the landing page is the 'Llamado'—a product description component with all key product details. We simplified editing by dividing it into five smaller components, each controlled with straightforward properties. This modular setup made training the catalog team easier, focusing on editing side panel properties without needing to master advanced features like autolayout or component properties.
SPACER
SPACER
SPACER
Here are the additional modules that complete the landing page. Each one is built around the main ‘Llamado’ component, making them easy to place and update. Thanks to component properties, the catalog team can quickly modify content with minimal effort.
This modular structure ensures that even with frequent updates, the team can maintain consistency across the landing while staying efficient and on schedule. The goal was to simplify the process and make the workflow as smooth as possible for everyone involved.
Here are the additional modules that complete the landing page. Each one is built around the main ‘Llamado’ component, making them easy to place and update. Thanks to component properties, the catalog team can quickly modify content with minimal effort.
This modular structure ensures that even with frequent updates, the team can maintain consistency across the landing while staying efficient and on schedule. The goal was to simplify the process and make the workflow as smooth as possible for everyone involved.
Takeaways
This task went beyond revamping a catalog; it involved tackling a problem by using strategic planning and teamwork skills effectively even though I wasn't a product designer then. I took on the role of spearheading a user focused mobile change by utilizing design principles and streamlining processes for better scalability resulting in a solution that satisfied user needs as well as business requirements.
The lesson I learned highlighted the significance of considering not the end users. Also the teams overseeing the products management process. It demonstrates that, by adopting an approach and effective problem solving strategies it is possible to attain outcomes even in uncharted waters.
This task went beyond revamping a catalog; it involved tackling a problem by using strategic planning and teamwork skills effectively even though I wasn't a product designer then. I took on the role of spearheading a user focused mobile change by utilizing design principles and streamlining processes for better scalability resulting in a solution that satisfied user needs as well as business requirements.
The lesson I learned highlighted the significance of considering not the end users. Also the teams overseeing the products management process. It demonstrates that, by adopting an approach and effective problem solving strategies it is possible to attain outcomes even in uncharted waters.
Next
Project
Next
Project
Next
Project
POPCOM SPACER
POPCOM SPACER
POPCOM SPACER
AC SPACER
AC SPACER
AC SPACER
Thanks for looking
at my project!
Want to dive into the details? Drop me a message!
I'm happy to talk more about it!
Thanks for looking
at my project!
Want to dive into the details? Drop me a message!
I'm happy to talk more about it!
Thanks for looking
at my project!
Want to dive into the details? Drop me a message!
I'm happy to talk more about it!