Design Vision
Design Vision
Company
Company
Mews
Time Frame
Time Frame
2022 - 2025
Role
Role
Senior Product Designer (IC4)
As Mews scaled, it needed a team to elevate design craft, ensure quality, and align product experiences. Design Solutions was created to bridge design, product, and business—defining a shared vision, crafting scalable patterns, and enabling teams to build coherent, human-centered solutions at speed.
These are some of the end-to-end projects I've been taking ownership.
Design Vision
Company
Mews
Time Frame
2022 - 2025
Role
Senior Product Designer (IC4)
As Mews scaled, it needed a team to elevate design craft, ensure quality, and align product experiences. Design Solutions was created to bridge design, product, and business—defining a shared vision, crafting scalable patterns, and enabling teams to build coherent, human-centered solutions at speed.
These are some of the end-to-end projects I've been taking ownership.
Hugo Bermúdez (Principal Designer) and I during the Mews R&D talk in Prague, discussing Design Quality.
Solutions Team diagram
Dataviz language
What happened?
Mews' users were overwhelmed by complex data. This made decision-making difficult, and limited their ability to understand critical information—ultimately taking time away from what mattered most: engaging with their guests.
What I did?
Explored charting frameworks with engineers and selected ReCharts.
Explored charting frameworks with engineers and selected ReCharts.
Explored charting frameworks with engineers and selected ReCharts.
Defined visual style, including categorical and sequential color systems.
Defined visual style, including categorical and sequential color systems.
Defined visual style, including categorical and sequential color systems.
Gathered product needs around data, actions, interactions, and chart types.
Gathered product needs around data, actions, interactions, and chart types.
Gathered product needs around data, actions, interactions, and chart types.
Built a PoC together with engineering team and standard reference charts—integrated into Mews Design System, documented and rolled out.
Created reference charts to support future use.
Created reference charts to support future use.
Created reference charts to support future use.
What we got?
Clearer data, better decisions, more time with guests.
Clearer data, better decisions, more time with guests.
+24%
Front-desk Staff Efficiency
+35%
Time spent with guests
Both data come from August 2024
Both data come from August 2024
Both data come from August 2024
Key takeaways
Visual clarity drives action — Good dataviz helps users make faster, better decisions.
Visual clarity drives action — Good dataviz helps users make faster, better decisions.
Visual clarity drives action — Good dataviz helps users make faster, better decisions.
Patterns over pixels — Systematizing charts improved consistency and scalability.
Patterns over pixels — Systematizing charts improved consistency and scalability.
Patterns over pixels — Systematizing charts improved consistency and scalability.
Collaboration was essential — Aligning with design and engineer product teams ensured real adoption.
Collaboration was essential — Aligning with design and engineer product teams ensured real adoption.
Collaboration was essential — Aligning with design and engineer product teams ensured real adoption.
Sequential colors.
Categorical colors.
Color sequence accesibility document
Dataviz dashboard
Pictogram motion
No documents
System Error
Success
File
Error
What happened?
Mews' pictograms lacked expressive feedback and motion, making interfaces feel static and less intuitive. Users struggled to interpret certain states—like errors or empty screens—slowing down their interactions and reducing clarity.
What I did?
Mapped and reorganized pictogram use with product designers—removing redundancies and improving consistency.
Mapped and reorganized pictogram use with product designers—removing redundancies and improving consistency.
Mapped and reorganized pictogram use with product designers—removing redundancies and improving consistency.
Defined motion principles to guide animation style and behavior.
Defined motion principles to guide animation style and behavior.
Defined motion principles to guide animation style and behavior.
Designed and implemented animated pictograms for key product states. Done with After Effects + Lottie plugin.
Designed and implemented animated pictograms for key product states. Done with After Effects + Lottie plugin.
Designed and implemented animated pictograms for key product states. Done with After Effects + Lottie plugin.
Documented patterns and integrated them into the Mews Design System.
What we got?
A cohesive animated system that improves clarity, supports feedback, and brings subtle emotion to the interface.
A cohesive animated system that improves clarity, supports feedback, and brings subtle emotion to the interface.
Upload file animation.
Tada animation.
Each animation is carefully crafted to express meaning with subtle, engaging motion—making the interface feel more alive, clear, and human.
Mews Design System support
What happened?
As Mews products evolved and grew in complexity, the Design System team needed extra support to scale documentation and maintain consistency. I was specifically asked to join as part of the Design Solutions team to help drive this effort over three quarters and work together with the Mews DS engineering team.
What I did?
Documented motion patterns for animated pictograms to ensure clarity and consistency.
Documented motion patterns for animated pictograms to ensure clarity and consistency.
Documented motion patterns for animated pictograms to ensure clarity and consistency.
Designed and introduced a global drag-and-drop pattern, reusable across products.
Refined and standardized existing components to improve structure, naming, and usability.
Refined and standardized existing components to improve structure, naming, and usability.
Refined and standardized existing components to improve structure, naming, and usability.
Helped boost system adoption and alignment across cross-functional teams.
Helped boost system adoption and alignment across cross-functional teams.
Helped boost system adoption and alignment across cross-functional teams.
What we got?
Stronger foundations, smoother collaboration, and scalable design across teams.
Stronger foundations, smoother collaboration, and scalable design across teams.
+71%
Design & Developer Efficiency with DS.
Design & Developer Efficiency with DS.
From Oct to Dec 2024.
From Oct to Dec 2024.
From Oct to Dec 2024.
+62%
DS Adoption in Guest Portal.
DS Adoption in Guest Portal.
Product tribe – August 2024.
Product tribe – August 2024.
Product tribe – August 2024.
Key takeaways
Strong foundations unlock speed — Better docs and patterns reduced friction across teams.
Strong foundations unlock speed — Better docs and patterns reduced friction across teams.
Strong foundations unlock speed — Better docs and patterns reduced friction across teams.
Design quality is a shared responsibility — Without ongoing craft and care, systems degrade and product standards slip.
Design quality is a shared responsibility — Without ongoing craft and care, systems degrade and product standards slip.
Design quality is a shared responsibility — Without ongoing craft and care, systems degrade and product standards slip.
Design System documentation
Navbar motion bezier example
Unfold '23 event: Multi-property video
What happened?
For the 2023 edition of Unfold—Mews’ annual product innovation event—the team needed a launch video to introduce our new Multi-Property functionality. Marketing asked for design support to align the message and visual tone with the product vision.
What I did?
Took on the art direction of the video as part of cross-team collaboration.
Took on the art direction of the video as part of cross-team collaboration.
Took on the art direction of the video as part of cross-team collaboration.
Partnered with motion designer Ubalio and the Brand team to define the visual concept.
Partnered with motion designer Ubalio and the Brand team to define the visual concept.
Partnered with motion designer Ubalio and the Brand team to define the visual concept.
Ensured alignment with Mews’ identity across animation, typography, and storytelling.
Ensured alignment with Mews’ identity across animation, typography, and storytelling.
Ensured alignment with Mews’ identity across animation, typography, and storytelling.
Guided the narrative structure to highlight key product value in a simple, elegant way.
Guided the narrative structure to highlight key product value in a simple, elegant way.
Guided the narrative structure to highlight key product value in a simple, elegant way.
What we got?
A polished, product-aligned launch video that introduced Multi-Property at Unfold ’23—helping position Mews as a forward-thinking platform for managing chains and groups.
A polished, product-aligned launch video that introduced Multi-Property at Unfold ’23—helping position Mews as a forward-thinking platform for managing chains and groups.
Motion Design Credits: Ubalio
Hugo Bermúdez (Principal Designer) and I during the Mews R&D talk in Prague, discussing Design Quality.
Solutions Team diagram
Dataviz language
What happened?
Mews' users were overwhelmed by complex data. This made decision-making difficult, and limited their ability to understand critical information—ultimately taking time away from what mattered most: engaging with their guests.
What I did?
Explored charting frameworks with engineers and selected ReCharts.
Defined visual style, including categorical and sequential color systems.
Gathered product needs around data, actions, interactions, and chart types.
Built a PoC together with engineering team and standard reference charts—integrated into Mews Design System, documented and rolled out.
Created reference charts to support future use.
What we got?
Clearer data, better decisions, more time with guests.
+24%
Front-desk Staff Efficiency
+35%
Time spent with guests
Both data come from August 2024
Key takeaways
Visual clarity drives action — Good dataviz helps users make faster, better decisions.
Patterns over pixels — Systematizing charts improved consistency and scalability.
Collaboration was essential — Aligning with design and engineer product teams ensured real adoption.
Sequential colors.
Categorical colors.
Color sequence accesibility document
Dataviz dashboard
Pictogram motion
No documents
System Error
Success
File
Error
What happened?
Mews' pictograms lacked expressive feedback and motion, making interfaces feel static and less intuitive. Users struggled to interpret certain states—like errors or empty screens—slowing down their interactions and reducing clarity.
What I did?
Mapped and reorganized pictogram use with product designers—removing redundancies and improving consistency.
Defined motion principles to guide animation style and behavior.
Designed and implemented animated pictograms for key product states. Done with After Effects + Lottie plugin.
Documented patterns and integrated them into the Mews Design System.
What we got?
A cohesive animated system that improves clarity, supports feedback, and brings subtle emotion to the interface.
Upload file animation.
Tada animation.
Each animation is carefully crafted to express meaning with subtle, engaging motion—making the interface feel more alive, clear, and human.
Mews Design System support
What happened?
As Mews products evolved and grew in complexity, the Design System team needed extra support to scale documentation and maintain consistency. I was specifically asked to join as part of the Design Solutions team to help drive this effort over three quarters and work together with the Mews DS engineering team.
What I did?
Documented motion patterns for animated pictograms to ensure clarity and consistency.
Designed and introduced a global drag-and-drop pattern, reusable across products.
Refined and standardized existing components to improve structure, naming, and usability.
Helped boost system adoption and alignment across cross-functional teams.
What we got?
Stronger foundations, smoother collaboration, and scalable design across teams.
+71%
Design & Developer Efficiency with DS.
From Oct to Dec 2024.
+62%
DS Adoption in Guest Portal.
Product tribe – August 2024.
Key takeaways
Strong foundations unlock speed — Better docs and patterns reduced friction across teams.
Design quality is a shared responsibility — Without ongoing craft and care, systems degrade and product standards slip.
Design System documentation
Navbar motion bezier example
Unfold '23 event: Multi-property video
What happened?
For the 2023 edition of Unfold—Mews’ annual product innovation event—the team needed a launch video to introduce our new Multi-Property functionality. Marketing asked for design support to align the message and visual tone with the product vision.
What I did?
Took on the art direction of the video as part of cross-team collaboration.
Partnered with motion designer Ubalio and the Brand team to define the visual concept.
Ensured alignment with Mews’ identity across animation, typography, and storytelling.
Guided the narrative structure to highlight key product value in a simple, elegant way.
What we got?
A polished, product-aligned launch video that introduced Multi-Property at Unfold ’23—helping position Mews as a forward-thinking platform for managing chains and groups.
Motion Design Credits: Ubalio
ÁLVARO FERNÁNDEZ
2025
ÁLVARO FERNÁNDEZ
2025
ÁLVARO FERNÁNDEZ
2025