Date
July 2, 2021
Share

What does it mean to create a good design system? Product design consultant Mario Maruffi walks us through his career path and processes. 

Based in Barcelona, Italian product design consultant Mario Maruffi is helping companies build better digital experiences and scale design capabilities that drive growth.

Having worked in the fields of digital product design, user research, and project management as an experienced facilitator and designer, Maruffi has been able to influence products and services used by millions. Through this interview, Mario Maruffi tells us how effective design approaches can drive business growth and lead to consistent user-centered products and services. 

Mario Maruffi - Maruffi website
Mario Maruffi is an Italian product design consultant helping companies build better digital experiences – 2020, Maruffi.co, personal website

Who is Mario Maruffi? 

Mario Maruffi: “I’m an Italian product designer. I always enjoyed helping people and complex problem-solving. Designing and facilitating the creation of digital things has allowed me to combine these two interests.

Since 2009, I have worked in the fields of digital product design, user research, and project management. As an independent contractor, I partner closely with product teams to co-create better digital experiences, systems and scaling design capabilities.

During my career, I have had the privilege of influencing products and services used by millions, ranging from startups to Fortune 500 companies.

When I’m not working, I like to volunteer, run, practice yoga, and cook healthy food for my family and little dog.”

Mario Maruffi - Maruffi website
Maruffi has worked on products and services for renowned companies following his personal motto “User problems are design opportunities”  – 2020, Maruffi.co, personal website (selected work)

How did the journey for Maruffi product design consultant begin?

Mario Maruffi: “From an early age, my foster parents were both good small business owners; they ran B2B services and a hotel. So, I grew up living in a hotel, observing and learning how to deliver a great customer and employee experience. As a designer and consultant, I think that growing up within a business service was highly influential to me.

Informally speaking, my design journey started around 19 years ago. I’m saying informally because I was still a teenager at that time, who struggled in school and was building digital things as a freelancing hobby.

Aged around 12 or 13, I liked to build websites by customizing HTML templates and published everything on free hosting services. My first website was about free flash files and games so that my friends could play them. At 15 years old, I found myself helping my parents and other small local businesses with their company websites as well as doing digital marketing for them.

I had the opportunity to help my parents increase their hotel bookings. This was achieved through creating an online booking system and using SEO strategies and Google campaigns to promote the website. I learned all of this on my own, by reading tutorials and experimenting. Even though I’ve never been a real developer, I managed to make prototypes and build web apps by customizing ready-made scripts.

Later on, I started providing professional UX/UI design services (the digital product design label was not so popular yet). During my university years, I was working whilst studying and was able to build significant partnerships with small and large international brands. I designed custom systems, themes, and plugins for different platforms and devices. At the same time, I simultaneously managed a small, yet trustworthy, freelance team to help the projects progress.

In 2015, these experiences led me to a leadership role at Elegant Themes (San Francisco), where I served as a Product Design Lead. Together, with our talented team, we launched several digital products, including a visual page builder for WordPress that powers millions of websites.”

Mario Maruffi - Maruffi website footer
“[…] a good design system is like a systematic approach to product development” – Mario Maruffi – 2020, Maruffi.co, personal website (footer)

Scaling design capabilities that drive tech companies’ growth, why do you focus on user-centered design systems, and design facilitation?

Mario Maruffi:I focus on design systems and design facilitation because both can offer real benefits for organizations of any size. These benefits include fostering cross-functional collaboration and scaling design practice, which can ultimately help you to save time and money.

In my experience, a good design system is like a systematic approach to product development. Therefore, it should include evolving parts such as custom processes, tools, guidelines and principles that can help cross-functional teams to co-create consistent user-centered products and services. At scale and over time.”

Mario Maruffi - Heavy shopping post
Heavy’s shopping post – 2018, ©Heavy.com

In partnering closely with product teams to co-create better digital experiences, which design process do you usually follow? 

Mario Maruffi:Design processes may vary from company to company, and from project to project. Depending on my role, I help teams to adopt, create and evolve processes based on their specific needs and goals. Still, there are commonalities that we may observe among effective design approaches that drive business growth.

From lean-agile and beyond, I observed that good design processes are collaborative, iterative, and research-based. These processes can help teams better understand the market, uncover user insights, iterate and learn through rapid prototyping, understand technical constraints, and more.

Ultimately, I do believe that a good design process focuses on solving the right problems and delivering desired results.”

How can digital products be more inclusive? Head to What design for everyone truly means – Interview with Marie van Driessche.

Mario Maruffi - Heavy research pan
UX research plan for Heavy.com – 2018, ©Heavy.com via XWP.co

Can you tell us more about the prototyping stage of digital products?

Mario Maruffi:There are different types of prototypes, depending on our specific needs and research/testing goals. They range from feasibility prototypes (e.g., made to address technical risks) to low and high-fidelity prototypes for rapid learning and usability testing.

Also, there are live-data prototypes, which can be very useful to access real data sources, test assumptions with real users, and generate qualitative and quantitative data (e.g., analytics). 

Thanks to today’s low-code technology, producing live-data prototypes is cheaper than in the past. These coded prototypes allow us to test at a statistically significant scale so that we can better understand the overall value and risk of our ideas. Of course, creating live-data prototypes may require developers and extra resources, but depending on budget and goals, we may get limited solutions that can collect data in a couple of days (or more). In conclusion, different types of prototypes can be used to test different things.

And more generally, prototyping can help teams test ideas and iterate quickly and affordably. This continuous iteration is done to reduce the risk of building the wrong thing.

In fact, by testing ideas, we can learn. Then by learning what works, what doesn’t, and why — we can evole, improve, and create feasible solutions that benefit both users and the business.”

What is the hardest aspect of the prototyping phase for your projects?

Mario Maruffi: “Sometimes, one of the most challenging parts of the prototyping phase is to choose the right type of prototype for what we need to test. This is achieved by maintaining the right balance between the user, business, and tech needs.”

Mario Maruffi - Drops app prototype
High-fidelity prototype of Drop App’s search function – 2018, ©Drops App

Which are your vital tools, resources and methods for prototyping?

Mario Maruffi: “From paper to digital prototypes, I utilise many different kinds of vital tools, methods and resources, which I try to adapt or recommend depending on the circumstances and the needs of the team. Figma, Sketch, Marvel App, and Proto.io are great options for simple rapid prototyping. On the other hand, Framer, Origami, Webflow, and Bubble.io can be considered for advanced no-code or low-code prototyping. Still, depending on circumstances, there are even more available, including “writing codes with engineering” and user research tools.”

Mario Maruffi - Trainline guest booking
Maruffi helped Trainline improve its platform for guest bookings – 2017, ©Trainline

You had the chance of working with great companies like Adobe, Heavy, Trainline, Virgin. What about your first client, how did you get it and what was the project about?

Mario Maruffi:In my career, I have worked both full-time and as an independent contractor. At the beginning of my professional journey, I was attracting clients by helping people on technical forums, building quirky web apps, and selling ready-made solutions on marketplaces such as Themeforest and CreativeMarket.

My first client project was an internal tool (platform plugin) for a small Italian eCommerce that needed to edit its website images in bulk. I designed the UI and managed the product development from end to end. I also hired a trusted freelance full-stack developer to help me with the coding element.”

Mario Maruffi - Trainline wireframe
The initial wireframes for Trainline’s contact center software – 2017, ©Trainline

What are the main trends and future directions within digital product design and what do you think of them?

Mario Maruffi:It is complex to predict future events – it is all so uncertain. But, I’m interested in observing the emerging trends, opportunities, and technologies. For example, the democratization of digital design tools and the evolving understanding of the business value of design would probably bring more product designers to focus on strategy and design operations.

Additionally, more and more designers may start to help organizations use design methodologies across different types of challenges in order to create and evolve business processes and operations.”

Mario Maruffi - Fluent sketch
The initial sketches for Fluent’s employee handbook software – 2020, Fluent

What can we expect next from Mario Maruffi?

Mario Maruffi: “On a professional level, I’m thrilled to announce that I’m joining the mission-driven X-Team.com. Since 2006, X-Team has provided the world’s leading brands with high-performing, on-demand teams of developers. In this new chapter, I’ll be working with the founder and other team members to build a global design service and community, within the X-Company.com Group.

At X-Team, we’re committed to making our companies more inclusive and the world a more just place. Everybody belongs here, regardless of skin color or zip code. You can learn more about the company here, and if you are a (UX, product, visual) designer and are interested in joining our company and community, you can submit your application on the website. I’ll continue to share more on my LinkedIn profile.

More personally, I’m now writing about design and helping my wife to build her new portfolio website. She’s a talented icon designer and founder of Xicons.studio who recently helped the Mozilla Team build and evolve the new Firefox Icon System. In my spare time, alongside my wife and a friend, we all lead a local community initiative that provides free practical support to refugees in need, around Spain. Furthermore, in collaboration with a non-profit, we’re planning to help provide transitional housing to those most in need.”

What is the role of Service and Experience Design amid the COVID-19 pandemic? Head to the Conversation with Adam Perlis & Antonio Iadarola.

Mario Maruffi - Fluent UX flow
Fluent’s employee handbook software’s wireframe and UX flows – 2020, ©Fluent
200 top design sources