Hi, I'm Patricio Mas,
Designer
Located in Santiago, Chile, building digital experiences
and visually telling stories.
Portfolio
DesignOps implementation
As Product Design Lead at uPlanner, I spearheaded the implementation of a DesignOps framework that involved creating a collaborative “constitution” to standardize design processes across my team of four designers, who were integrated into product teams. This approach helped me address inefficiencies and inconsistencies in our design workflow, enhancing team ownership while improving consistency, efficiency, and scalability. It also made onboarding new designers easier. Although I faced challenges such as balancing collaboration with efficiency and keeping the constitution updated, the overall impact has been transformative, fostering a strong, cohesive team dedicated to delivering high-quality educational products.
The Need for DesignOps
With the growing complexity of our digital products and the diverse needs of our user base, it became evident that our existing design processes were not scalable. Designers often found themselves reinventing the wheel, leading to inconsistencies in the user experience and inefficiencies in our workflow. Moreover, the lack of standardized processes and documentation made onboarding new team members challenging. It was clear that we needed a cohesive system to streamline our design operations and ensure consistency across all products.
The Constitution: A Collaborative Approach
Inspired by an article from Nielsen Norman Group on DesignOps, we decided to create a “constitution” for our design team. This constitution would serve as a living document, outlining our DesignOps processes, principles, and best practices. However, rather than dictating the rules from the top down, I chose a collaborative approach where every team member could contribute to the constitution.
The process was simple yet effective:
- Identification of Problems: Whenever a designer encounters a problem or inefficiency in their workflow, they bring it to the attention of the entire team during our weekly design workshops.
- Discussion and Solution: The team then engages in a collaborative discussion to explore possible solutions. This open dialogue allows us to consider different perspectives and arrive at a consensus on the best course of action.
- Creation of a New “Law”: Once a solution is agreed upon, the designer who identified the problem drafts a new entry in the DesignOps constitution. This entry details the issue, the solution, and any relevant guidelines or processes.
- Peer Review and Edits: The draft is shared with the entire team for review. Everyone is encouraged to provide feedback and suggest edits, ensuring that the final document reflects the collective wisdom of the group.
- Finalization and Adoption: After incorporating all feedback, the new entry is officially added to the constitution. The team then adopts the new practice in their daily workflows.
Benefits of the Collaborative Constitution
The implementation of our DesignOps constitution has brought several key benefits to our design team:
- Consistency Across Products: By documenting our design processes and standards, we have achieved a higher level of consistency across all our products. This has not only improved the user experience but also reinforced our brand identity.
- Increased Efficiency: The standardized processes have reduced the time spent on repetitive tasks and allowed designers to focus more on creative problem-solving. This has led to faster design iterations and a more efficient workflow overall.
- Enhanced Team Morale and Ownership: The collaborative nature of the constitution has fostered a strong sense of ownership and inclusion among all team members. Designers feel empowered to contribute to the evolution of our processes, knowing that their insights are valued and respected.
- Scalability and Onboarding: The documented processes have made it easier to onboard new designers, as they can quickly familiarize themselves with our established practices. This scalability has been crucial as our team continues to grow.
Challenges and Lessons Learned
While the implementation of DesignOps has been largely successful, we encountered a few challenges along the way:
- Balancing Collaboration and Efficiency: Involving the entire team in the creation and review of each new entry can be time-consuming. We had to strike a balance between thorough collaboration and maintaining an efficient workflow.
- Keeping the Constitution Updated: As our products and processes evolve, it’s essential to keep the constitution up to date. We established a quarterly review process to ensure that our documentation remains relevant and reflects our current practices.
Conclusion
The introduction of a DesignOps framework through our collaboratively developed constitution has been a transformative experience for our design team. By fostering a culture of participation and inclusivity, we have not only improved our design processes but also strengthened our team’s cohesion and sense of purpose. As we continue to grow and innovate, our DesignOps constitution will remain a cornerstone of our success, guiding us in delivering exceptional educational products to our users.
Centralized Style Sheets
As Product Design Lead at uPlanner, I led the efforts of our team through a critical evolution in our UI design process. We moved from using inline styles, which created inconsistency, redundancy, and limited reusability, to implementing centralized style sheets for greater efficiency and uniformity. Initially, we transitioned to centralized LESS files during our Angular phase, integrating them with the Bootstrap framework to establish a consistent design language, improve maintainability, and enhance modularity. Later, as we shifted to Vue.js, we advanced to SASS, leveraging its more powerful features for better reusability, scalability, and efficiency, while also updating our Bootstrap integration. This transition to centralized styles has significantly improved our ability to maintain, scale, and collaborate on UI design across all our digital products at uPlanner.
Challenge
Initially, our UI design approach involved using inline styles directly within the HTML of our views:
- Inconsistency: Different developers applied different styles, leading to an inconsistent look and feel across the application.
- Redundancy: Repeated use of similar styles across various elements resulted in a bloated codebase.
- Limited Reusability: Inline styles lacked the ability to be reused across multiple components, making maintenance and updates labor-intensive.
Objective
Our objective was to create a more efficient and consistent styling system by centralizing our styles. This would involve transitioning from inline styles to centralized style sheets to achieve the following:
- Ensure a consistent design language across all views and components.
- Minimize redundancy by defining reusable styles in a central location.
- Enhance scalability and maintainability through organized and modular style management.
Process
1. Initial Implementation: Inline Styles
In the earliest phase of development, we relied on inline styles embedded within HTML elements. This approach was simple but soon revealed its limitations:
- Hard to Maintain: As the application grew, maintaining inline styles became increasingly difficult. Updating a single design element required finding and changing styles in multiple locations.
- Lack of Consistency: Different developers often applied different inline styles, leading to a fragmented and inconsistent user interface.
- No Reusability: Inline styles were tied to specific elements, making it impossible to reuse them across different parts of the application.
2. Transition to Centralized Style Sheets with LESS
Recognizing the limitations of inline styles, we transitioned to a more structured approach by adopting LESS, a CSS preprocessor, during our development with Angular. Key changes included:
- Centralized LESS Files: We created centralized style sheets using LESS, which housed all the styles for the application in a single, organized structure. This allowed us to define variables, mixins, and reusable styles that could be applied across different components.
- Bootstrap Framework Integration: We based our style sheet architecture on the Bootstrap framework, customizing it to align with our specific design requirements. This integration allowed us to leverage Bootstrap’s responsive grid system and predefined styles while maintaining our own branding.
- Consistent Design: By centralizing styles in LESS, we ensured a consistent design language across the entire application. All developers used the same set of styles, reducing inconsistencies.
- Improved Maintainability: Centralized LESS files made it easier to update styles. Changes made to a single value in the LESS files automatically propagated throughout the application, reducing the time and effort needed for updates.
- Modularity: LESS allowed us to break down styles into modular files, each representing different aspects of the UI (e.g., typography, color schemes, layouts). This modularity improved both the organization and scalability of our styles.
3. Advancement to SASS with Vue.js
As we moved from Angular to Vue.js, we saw an opportunity to further enhance our styling approach by adopting SASS, a more powerful CSS preprocessor:
- SASS-Based Architecture: We structured our style sheets based on SASS, taking full advantage of its features like nested rules, inheritance, and more advanced functions. This provided even greater control and flexibility over our styling.
- Updated the Bootstrap Framework: We kept our style sheet architecture on the Bootstrap framework, upgrading to the next version and customizing it using SASS variables and functions to align with our specific design requirements.
- Enhanced Modularity and Reusability: SASS’s advanced features enabled us to create highly reusable and modular styles. For example, we defined global variables for colors, fonts, and spacing, ensuring consistency while making it easy to update the design across the application.
- Efficiency and Scalability: The combination of centralized SASS files and the new version of Bootstrap’s customization capabilities allowed us to scale our design system efficiently. We could easily add new styles or modify existing ones without disrupting the overall design consistency.
Results
Overall, transitioning from view-specific styling to centralized style sheets brought several significant advantages:
- Consistency: Centralized styles ensured a uniform design across all components, reducing the likelihood of design inconsistencies.
- Reduced Redundancy: With a centralized approach, common styles were defined once and reused across multiple components, reducing duplication and keeping the codebase clean.
- Ease of Maintenance: Updating styles became straightforward, as changes made in the centralized style sheets automatically applied across the entire application. Extracting the style layer from each view also means that developers no longer need to worry about styling the html, now all UI visual enhancements are applied automatically.
- Enhanced Collaboration: Centralized style sheets provided a single source of truth for all styles, making it easier for designers to collaborate and ensuring that everyone followed the same design guidelines.
- Scalability: As the application grew, centralized stylesheets allowed us to scale the design system efficiently, adding new components or updating styles without disrupting the overall consistency.
Conclusion
Our evolution from inline styles to centralized style sheets, first using LESS and then advancing to SASS, has significantly improved our UI design process. Centralized styles have provided us with a scalable, efficient, and maintainable system that ensures consistency across our digital products.
Language Layer Framework
As Product Design Lead at uPlanner, our team initially faced challenges with hard-coded Spanish strings, including limited localization, inefficiency in updates, and content duplication across different client versions. To address this, we developed a scalable language layer framework, beginning with an Excel-based system that managed translations but led to manual errors and redundancy. We then transitioned to using centralized JSON files for each language, managing strings via keys to reduce duplication and streamline updates. Finally, we integrated Crowdin for translation management and automated the export process to Bitbucket, allowing for client-specific localization without compromising efficiency or consistency. This new framework has significantly improved scalability, efficiency, and customization in our localization process.
Challenge
The initial approach of hard-coding Spanish strings into the UI presented several challenges:
- Limited Localization: Our products were locked into a single language (Spanish), making it impossible to cater to non-Spanish speaking users without significant redevelopment.
- Inefficiency: Every time a string needed to be updated, developers had to manually locate and modify each instance of that string in the code.
- Content Duplication: As we attempted to support multiple clients, each with slight variations in their language requirements, our makeshift solution led to duplication of content across different versions of our UI.
Objective
Our goal was to develop a scalable language layer framework that would allow us to:
- Support multiple languages, with a focus on Spanish and English.
- Streamline the localization process to reduce duplication and manual intervention of the codebase.
- Implement a centralized system for managing translations, minimizing errors and improving consistency.
Process
1. Initial Implementation: Excel-Based System
Our first step towards a more structured approach was to create an Excel-based system for managing translations. This system involved the following steps:
- Column-Based Client Management: Each column in the Excel file represented a different client, with rows containing strings for various UI elements. This allowed us to customize the content for each client while keeping all translations in one place.
- Exporting to JSON: After making updates in the Excel file, we exported the data to JSON format for use in our applications. However, this process required manual work to ensure that each client’s JSON file was correctly generated and uploaded, leading to duplicated content across multiple files and an increased risk of errors.
2. Move to JSON Files per Language
In this new version of the system, all strings were centralized in a single JSON file for each language (Spanish and English). Key features of this approach included:
- Language Files: We created dedicated JSON files for each supported language, housing all the UI strings. This eliminated the need to duplicate content for each client.
- String Keys: Strings were managed via Keys (variables) within the JSON files. These Keys were placed in the code which then renders the corresponding content. This enabled us to recycle strings across different components and clients. This approach not only reduced redundancy but also ensured that any updates to a string were automatically reflected wherever the key was used.
3. Advanced Localization with Crowdin and Bitbucket Integration
Recognizing the inefficiencies in the Excel-based approach, we transitioned to further optimize our localization process. After weighing many options, we adopted Crowdin, a translation management system that seamlessly integrates with our existing workflow. The key steps involved are:
- Crowdin Integration: Crowdin became our central platform for managing translations. New keys and corresponding strings are created directly within Crowdin, where they can be easily translated into multiple languages.
- Automated JSON Export: Once translations are finalized in Crowdin, they are automatically pushed as JSON files to our Bitbucket repository. This eliminates the need for manual exporting and significantly reduces the risk of errors.
- Client-Specific Localization: To handle client-specific requirements, we implemented a system where each client has their own JSON file containing only the custom keys and corresponding strings that need to be overridden. The base language JSON files remain intact, and only the differences are applied per client, ensuring consistency while allowing for customization.
Results
The implementation of the language layer framework resulted in significant improvements:
- Scalability: We can now easily add support for new languages and localize content for different regions or clients without major overhauls to our codebase.
- Efficiency: The use of Keys and centralized JSON files has drastically reduced content duplication, making our translation process faster and less prone to errors.
- Streamlined Workflow: Crowdin and Bitbucket integration has automated much of the translation process, allowing our team to focus on more strategic tasks rather than manual updates.
- Customizable Localization: The ability to handle client-specific localization via custom JSON files ensures that we can meet the unique needs of each client without sacrificing efficiency or consistency.
Conclusion
Our journey from hard-coded strings to a sophisticated language layer framework has been transformative. By centralizing our language management in JSON files, adopting Crowdin for translation management, and implementing client-specific localization through custom JSON overrides, we have created a scalable, efficient, and flexible system that meets the diverse language needs of our growing user base.
Atomic Design Components
As Product Design Lead at uPlanner, we embarked on a transformative journey to enhance our design process by transitioning from creating bespoke user interfaces (UIs) in Adobe XD to implementing a robust component system in Figma based on Atomic Design principles. This shift was driven by the need to streamline our design workflow, improve collaboration across teams, and ensure consistency across our digital products.
Challenge
Our design team initially relied heavily on Adobe XD for UI design, producing highly customized interfaces for various projects. While this approach allowed for creative freedom, it led to several challenges:
- Inconsistency: Each interface differences in design language, leading to a fragmented user experience across our product suite.
- Inefficiency: The lack of reusable components resulted in repetitive work, as designers recreated similar elements from scratch for each project.
- Collaboration Bottlenecks: As our team grew, collaborating on design files in Adobe XD became cumbersome, with multiple versions of files and difficulty in maintaining a single source of truth.
Objective
Our goal was to transition to a more systematic approach to design that would enable consistency, scalability, and efficient collaboration. We chose to implement a component system in Figma, structured around the principles of Atomic Design. This would allow us to build a design system composed of reusable components, ensuring a cohesive user experience across all our digital products.
Process
1. Audit of Existing Designs
The first step was to conduct a comprehensive audit of our existing UIs designed in Adobe XD. We identified common patterns, recurring components, and unique design elements across different projects. This audit helped us understand the scope of work required to transition to a component-based design system.
2. Building the Design System in Figma
With the audit completed and the team aligned on Atomic Design principles, we began building our design system in Figma:
- Atoms: We created a library of fundamental components like buttons, color styles, text styles, icons, and input fields. Each atom was designed with flexibility in mind, allowing for variations in size, color, and state.
- Molecules: Using the atoms, we developed more complex UI components such as form fields, cards, and list items. Each molecule was designed to be reusable across different projects.
- Organisms: We combined molecules to create larger structures, such as headers, footers, and content sections. These organisms provided a consistent framework for our product UIs.
- Templates and Pages: Finally, we created templates and pages that utilized our organisms to define the overall layout of our products. These templates served as starting points for new projects, ensuring consistency across all our digital products.
3. Collaboration and Handoff
One of the major advantages of moving to Figma was the improved collaboration capabilities. We integrated our Figma files with tools like Jira and Slack to streamline the design handoff process. Designers, developers, and stakeholders could now access the same Figma files, view updates in real time, and provide feedback directly within the design environment.
4. Testing and Iteration
Feedback is always collected and used to refine the system, ensuring that it met the needs of all stakeholders. We also maintain a living document of design guidelines to accompany our Figma component library, which helps ensure consistency across teams.
Results
The implementation of a component system in Figma based on Atomic Design resulted in significant improvements:
- Consistency: Our digital products now have a cohesive look and feel, with consistent design patterns applied across the board.
- Efficiency: Designers no longer need to recreate elements from scratch, leading to faster design cycles and more time for innovation.
- Scalability: The modular nature of the Atomic Design system allows us to easily scale our design efforts, adding new components or modifying existing ones without disrupting the entire system.
- Improved Collaboration: Figma’s collaborative features enabled seamless communication between designers and developers, reducing the friction in the design-to-development handoff process.
Conclusion
Transitioning from bespoke UIs in Adobe XD to a component system in Figma was a game-changer for company. By adopting Atomic Design principles, we created a scalable and efficient design system that ensures consistency across our products while enabling our team to collaborate more effectively.
Empresas Eléctricas A.G.
Anahí
Emol Guioteca
Kiñewén
Evas
Isologotype created for a local diner. The idea was communicating a warm environment with home cooked meals prepared with lots of love. Additional signage pieces were made such as price lists, bathroom, exit, etc.
Courbis
Isologotype for an entrepreneur specializing in mosotherapy. Also worked on some branding pieces like a calling card and a gift certificate.
Swan
My sister sells jewelry as a side project, so I designed a logo for her to complement her products. With each sell she includes a little feather sort of like a tag, I decided to include that element in the brand image.
MamboCore
I was contacted to develop the GUI for a special custom software used to configure image projections over complex surfaces. The company that works these venues created an in-house system and was looking to commercialize it, so they needed to package the user experience.
It was a long process of interviews and analysis of what the tool should be able to do and what would be the best way of presenting all its potential.
We studied each action, button, icon, made user cases, wireframes, and mockups. Finally, all the elements were handed in separately, with detailed instructions so that the IT team could make proper use of all the information.
FCHH
The Chilean Handball Federation needed an image makeover so I came up with this solution. Unfortunately, the project never saw the light of day. It’ll probably be used in another project soon, so I’ll upadate this post when that comes out of the oven.
W3
A couple of friends founded a digital agency and asked me to help them come up with a proper logo that reflected what their activity would be. The name is W3 because of the three W’s in web urls. The final solution takes the negative space made up by the W and the 3, drawing a cursor.
Sofofa
Andrea Chignoli
Zumbástico
Interschool USS
Lee Jeans
Silfa
Bci Seguros – Umbral
Habitarte
Elogos
Melody Factory
El Mercurio – WebApp
El Mercurio needed to implement a webapp for internal use which would allow certain users review and approve different types of transactions.
They asked me to design and build a responsive UI, following internal standards formerly known to users.
The results were successfully deployed in a short timeframe with no setbacks.
Tools:
- Diseño
- HTML
- CSS
- JQuery
- Bootstrap
- Fontawesome
Tools
Testimonies
"Analytical, up to date, he transmits confidence and mastery of the topics worked on"
A pleasure to work with Patricio. Analytical, up to date, he transmits confidence and mastery of the topics worked on. Each project is analyzed, designed and implemented on time, so for the next need we went back to Patricio and continue working with him.
"Increíble capacidad de resolver problemas futuros desde la etapa de diseño"
A pleasure to work with Patricio Mas, I highlight your open-mindedness to complex problems, and your incredible ability to solve future problems from the design stage. Thanks for the experience!
"Diligence and constant improvement"
I met Patricio in 2005, his diligence and constant improvement are inherent characteristics of his work. Great coworker, great person.
"Natural leadership that I have never seen"
Patricio has a natural leadership that I have never seen in a work environment. He is a full-fledged professional, a very analytical person, with an unbeatable ability to manage work teams. I have developed under his tutelage directly and indirectly and I can attest to his excellent relationship with clients, detailed analysis of projects and ideal timing management.
"A very talented graphics and web designer"
"Has the ability to order and plan while maintaining a very good relationship"
Very responsible and excellent team player. He has the ability to order and plan while maintaining a very good relationship with people.
"Responsible and proactive"
Responsible and proactive: very good adjectives to describe Patricio’s work.
"He meets the objectives of the company without neglecting the human team"
Production Manager with extensive knowledge of the industry. He reaches the company goals without neglecting the human team and has an excellent relationship with the personnel in his charge. He is always willing to teach and support whoever needs it.
"Proactively optimized the graphic production systems"
Patricio proactively optimized the graphic production systems for the university’s distance learning project, and positively managed the multimedia production during his time in charge.
Timeline
-
High School Design Apprentice
Summer Holidays from 1992 to 1994
My dad has always been a freelance graphic designer, and there was a time when he needed to hire an assistant. After going through different designers, he asked me if I wanted to work with him. I learned how the deisgn and production process was before the computer: brushes, inks, ruling pens, couche, knives, rubber cement, enlarger, photo developments, and letrasets, were part of the arsenal. At 17 I saved up and bought myself a bike! Many popular packages were designed during this period, including many that are still around today. If you've ever been to Chile, Serranita, Kilatte, Choco Fruna, and Kimbo would all ring a bell.
-
Graphic Designer
1998 - 1999
During the last year of university, with more time on my hands, I worked with designer Roberto Galaz. I had the chance to work on big corporate image projects for a pension funds administrator AFP Santa María, and for his brother Cristian's feature film 'El Chacotero Sentimental'. I learned about how to lead projects from a conceptual standpoint because Roberto was very detail oriented about his art direction. Lessons that would prove to be very useful in the future.
-
University degree
1999
After five long years of learning, experiences, pickup games, and late nights, I finished my studies in Visual Communications Design at UTEM. Even though it would take me a couple more years to present my thesis and get my degree, I was ready for the world. Besides, during this same period of time I found out I was going to be a dad! I would soon value the importance of having a solid method and knowledge base in the practice of design.
-
Art Director at Grey Advertising
1999 - 2000
After finishing my Design studies, I decided to concentrate on my degree thesis. So, on a Wednesday I quit the job I had with Roberto Galaz. On Thursday I found out I was going to be a dad! What do I do now? Well, life smiled on me and on a Friday afternoon I got a call for an interview at Grey Advertising. They had aquired a new digital team, and needed someone to gather and lead the design team. On Monday I was already working as Art Director! These were my first steps in the digital world. I applied the design notions I knew at the moment, and learned the technical aspects of HTML, JavaScript, and what at that moment was all the rage: Flash and ActionScript.
-
UI/UX Designer at El Mercurio
2003 - 2005
Through an agent I was hired at El Mercurio newspaper as UX and UI Designer in a big internal project. The paper needed to completely update its internal administrative system. The team that came toghether was massive and multidisciplinary, nationals and foreigners, many steps and processes. I personally was part of the UX Team, when User Experience was something new. On top of the administrative project, I had the chance to redesign and build the newspaper's Real Estate Ads web site. I think it's still the same :-P
-
Production Manager at Universidad de las Américas
2005 - 2007
Universidad de las Américas (UDLA) had just been aquired by Laureate and would begin a novel online courses program. They gathered a team of teachers, psycologists, and designers that would have the task of building a semi-digital educational ecosystem from scratch. Since we had to coordinate efforts with the Laureate team in the US, this was the first time ever I had to use my English skills as Production Manager and Art Director. It was one of the most enriching experiences, where I had the chance to really experiment with UX and UI to achieve educational results, using technologies like Moodle, Flash, Scorm, and WordPress, among others.
-
Production Manager at Cardumen
2007 - 2008
Due to the experience aquired leading the dev team at UDLA, I got contacted by Taisa, an IT company especialised in the banking sector. I had previously worked with them on projects for the State Bank and Santander Bank. This time they were in a reestructuring process between their IT and design teams. All the designers would come together to form an agency (later named Cardumen). They grew organically and needed to structure their process and distribute responsabilities to streamline production. The end result was a lean team in an efficient and fun work environment where everyone enjoyed the day to day. In between tasks, distributions, and deployments, we held FIFA and Guitar Hero tournaments!
-
Independent Designer
2008 - Current
I'd always had side gigs, so with an abundant portfolio and some scheduled prospects, I decided it was time to go solo. It was a personal challenge to see if I would be able to make it. I had a good network that allowed me to get new projects, so began a new path of many ups and downs, hits and misses. Designing was just part of the daily routine, now I had to do it all: advetising, quoting, negociating, contracting, collecting, fighting, laughing. You gain the most knowledge when you get out of your comfort zone.
-
Digital Sherpa is Born
2009 - 2017
After a year or so fighting alone, I realised that to grow I would need to lean on someone else. I wasn't going to be able to manage and produce at the same time. I talked to many people, but no one gathered all the conditions or had the availability to go with me on this adventure. Until one day, out of the blue, a met up with an old coleague from UDLA, Eduardo Baeza, told him about what I was up to and he signed up immediately! So, a new chapter would start with Digital Sherpa, now sharing tasks, enjoying the good times toghether and supporting each other through the tough times. On the way we've worked on various projects and clients big and small. It all leaves us new learning experiences to evolve.
-
WordPress instructor at Adity Academy
2016 - 2017
I've never felt comfortable being on stage, so when the guys at Adity invited me to teach their WordPress course, I jumped at the chance to go out of my comfort zone. Besides, I get to share what I've learned in the more than ten years working with this platform, a small way of giving back to the open source community. I work on my social skills, meet new people, sharpen my knowledge, everyone wins!
-
Design Lead at uPlanner
2017 - 2024
It was a great challenge to lead the design team in a company with its own products in the education sector. New work methodologies, complex business rules, and constantly evolving products, mixed with pandemic, social unrest, and remote coordination. Fortunately, having good communication between very competent and solidary people was the key to success.
