UX/UI design of a mobile app prototype for expats in Barcelona, developed through a full design thinking process that began with user research and behavioral insights. By combining findings on local culture, social needs and logistical barriers with iterative ideation and structured prioritization, the project evolved into an intuitive navigation system designed to foster community connections and offer a seamless way to discover curated and authentic experiences.

The project addresses a clear challenge in Barcelona: the disconnect between international students and expats and the rich cultural and natural experiences available across Catalonia. Despite the region’s wide offer, many newcomers face barriers such as lack of local knowledge, logistical difficulties, and limited community networks. The goal was to design a digital solution that helps them discover meaningful activities, navigate the local culture, and build real connections with others

To understand the needs, motivations and barriers of international students and expats in Barcelona, I conducted mixed method research combining 10 in depth interviews and a 20 question survey answered by 120 participants. This approach provided a diverse and reliable view of user behaviours, uncovering patterns around social habits, challenges in discovering activities, and the need for cultural integration and community.

In this phase, I analyzed all qualitative data collected from interviews, surveys and observations to identify key user motivations and pain points. Through the affinity mapping process, we uncovered five behavioral patterns, and later identified strong correlations between them. These connections revealed two main user groups: Advanced Expats, who seek high-quality experiences and enjoy exploring local culture in depth, and Social Explorers, who seek shared experiences and human connection. These insights guided the design opportunities for each profile.

Building on the insights from the research phase, two distinct user groups clearly emerged, each with different motivations, expectations and barriers when exploring experiences beyond Barcelona. To translate these patterns into concrete, human-centered profiles, I created two user personas that represent the core needs and behaviours identified in the study. These personas, a culturally curious professional seeking authenticity and a socially driven newcomer looking for meaningful connections, help ground the design process in real user contexts.

This journey map outlines the end-to-end experience of an expat booking an organized trip. It follows the user from the moment they discover the activity through friends, to the decision-making and booking process, the experience itself, and finally the post-activity stage where they share feedback or leave a review. Mapping this full journey allows us to understand motivations, emotions and pain points across each phase, revealing key opportunities to improve the overall experience.

Building on the insights from the research phase, two distinct user groups clearly emerged, each with different motivations, expectations and barriers when exploring experiences beyond Barcelona. To translate these patterns into concrete, human-centered profiles, I created two user personas that represent the core needs and behaviours identified in the study. These personas, a culturally curious professional seeking authenticity and a socially driven newcomer looking for meaningful connections, help ground the design process in real user contexts.

To move from insights to actionable solutions, I selected the five most relevant How Might We questions identified during the research phase. These HMWs represent the core challenges users face and serve as lenses to guide ideation. Based on them, I generated a series of focused concepts and potential solutions aimed at addressing the key barriers uncovered in the study. This process allowed us to explore opportunities from different angles and shape early directions for the experience.

After generating a large number of proposals during the ideation phase, the next step was to synthesize the HMWs into more concrete and actionable ideas. Once defined, we mapped all ideas into an effort–benefit matrix, which allowed us to quickly visualize which ones offered the highest impact with the lowest implementation complexity.This comparative analysis helped us prioritize effectively, identifying the solutions with the strongest potential and establishing a clear foundation to move forward with the development of the final solution.

After generating, categorizing and prioritizing all ideas according to effort and expected value, we identified which concepts offered the strongest potential for the final product. This process helped focus on high-impact opportunities and define a clear direction aligned with user needs and project constraints.The outcome of this synthesis is presented in three blocks: what the solution is about, how it works and what problem it solves, providing a structured and evidence-based overview of the final proposal.

In this section, we present the sitemap that also functions as a user flow, offering a complete view of how the experience is structured. On the left side of the map we outline all content related to activities, while the right side focuses on the social dimension of the app. This dual structure was designed around the specific functions we wanted to include in each area, ensuring clarity, coherence and a seamless navigation experience for users.

Additionally, we included two explanatory cards for key sections with high-content volume. These help quantify and organize the information while also establishing them as templates, since they will be used as dynamic pages within the final product.

The wireframing process began with low-fidelity sketches, created quickly using thick markers to encourage iteration, exploration and the “right to be wrong.” This early stage allowed us to test ideas freely, adjust structures and validate flows without the pressure of visual detail.

Once the foundations were solid, the work moved into high-fidelity wireframes built with a design system very close to the one intended for the final product. This refinement stage ensured visual consistency, clarified component behaviour and significantly reduced execution time when building the final prototype with the complete UI. This two-step approach balanced creativity with precision, allowing fast progress while maintaining a strong design rationale.

As part of the prototype validation process, usability tests were conducted in Maze to measure the platform’s key usability metrics. The evaluation included average task completion time, drop-off rate, and misclick metrics, providing insight into navigation clarity and revealing potential friction points and opportunities for improvement.

‍

Tasks evaluated in Maze:

This stage focused on translating the validated structure and key functionalities into a coherent visual language. Using a refined design system, I created the complete UI for Weyond and developed a high-fidelity interactive prototype. The visual direction was intentionally crafted to express the brand’s core values of serenity, clarity, respect and balance through calm color palettes, spacious layouts and a clean, unobtrusive interface.

The result is a user experience that feels intuitive, welcoming and culturally expressive, while remaining fully aligned with user needs and consistent across every screen and interaction. In addition to designing the full set of screens, an interactive prototype was built in Figma, allowing users and stakeholders to navigate through the flows and experience the product as it would function in its final version.

This project began with the challenge of helping expats in Barcelona access authentic experiences and feel more connected to local culture. Throughout the process, user research served as the guiding thread, providing the insights needed to understand motivations, barriers and expectations. These findings became the foundation for every design decision, shaping the ideation, prioritization and final solution. The result is a curated platform that simplifies logistics, strengthens social connections and highlights meaningful Catalan experiences, demonstrating the value of research driven design and a user centered approach.

The Suit Designer is an in-store digital configurator created to support the made-to-measure tailoring experience in a premium London environment. Its purpose is not to replace craftsmanship, but to enhance it by adding clarity, confidence and precision to a traditionally intangible decision-making process.

The product is used by tailoring staff during sales consultations, acting as a visual and conversational tool that helps clients understand how their choices translate into a final garment. Combined with in-store 3D body scanning, the configurator reinforces trust, fit accuracy and perceived value in a high-end, bespoke context.

High-end made-to-measure tailoring in London, combining traditional craftsmanship with advanced technology.The brand operates in a premium environment, offering bespoke garments with a strong emphasis on quality, precision and personal service.

A 3D body-scanning booth is used in-store to capture accurate measurements, reinforcing trust and fit accuracy.The challenge was to introduce a digital product that enhances the tailoring experience without undermining the perception of craftsmanship or exclusivity.

The 3D configurator is designed primarily as an in-store support tool, used by tailoring staff during the sales process to guide decisions and visualise the final garment.At the same time, it also functions as a client acquisition touchpoint online, allowing potential customers to explore design options, understand the bespoke process and feel confident enough to request a physical appointment at the tailoring studio, where the final consultation and measurements take place.

Based on research insights and workshops with the company’s managers, two distinct user profiles emerged. Combining internal knowledge, real customer data and in-store experience, these personas represent the core client types engaging with the made-to-measure service: a digitally confident professional new to bespoke tailoring, and a more experienced client who values craftsmanship and approaches technology with caution. Together, they helped anchor design decisions in real user needs and expectations.

This journey map outlines the end-to-end experience of a young, digitally confident professional exploring made-to-measure tailoring for the first time. The journey follows the user from initial discovery and online exploration, through comparison and shortlisting, to the decision to book in-store visits.We intentionally focused on this younger user persona, as they represent a strategic growth opportunity for the brand.

Capturing this audience early allows the brand to position itself as a modern, accessible entry point to bespoke tailoring, building long-term relationships and future loyalty. Mapping this journey helps identify key moments of uncertainty, motivation and decision-making, revealing opportunities to guide the user with confidence while reinforcing the brand’s premium positioning.

Made-to-measure tailoring requires clients to make multiple design decisions without being able to see the final outcome.

In a high-value purchase, this lack of visual certainty increases cognitive effort and emotional risk, directly affecting conversion both in person during the in-store consultation and online when deciding whether to book a physical appointment.

The Suit Designer was designed to reduce this uncertainty by making the outcome visible, tangible and emotionally engaging.On the user side, the goal was to help clients visualise their final suit with confidence, feel guided throughout the process and build an emotional connection with the design they are about to commission.On the business side, the goal was to increase engagement, improve completion rates during in-store consultations and support sales teams with a clear, visual decision-making tool that accelerates high-value conversions without breaking the premium experience.

To move from insights to actionable solutions, I selected the five most relevant How Might We questions identified during the research phase. These HMWs represent the core challenges users face and serve as lenses to guide ideation. Based on them, I generated a series of focused concepts and potential solutions aimed at addressing the key barriers uncovered in the study. This process allowed us to explore opportunities from different angles and shape early directions for the experience.

After the ideation phase, during which a broad set of concepts was explored, the process moved towards translating the HMW questions into concrete, product-oriented features. Each idea was then evaluated and mapped within an effort–reward matrix, allowing us to assess its potential impact against development and implementation complexity.This framework provided a structured way to prioritise features that could deliver high user and business value with reasonable development effort, a key consideration in SaaS product design. The outcome was a focused and validated set of solutions, establishing a clear roadmap and a strong foundation for the development of the final SaaS product.

Following the generation, categorisation and prioritisation of ideas based on effort and expected value, we identified the concepts with the greatest potential to shape the final product. This evaluation process allowed us to focus on high-impact opportunities while ensuring alignment with user needs and project constraints.

The result of this synthesis is articulated across three key dimensions: what the solution is, how it works, and which problem it addresses. Together, these blocks provide a clear, structured and evidence-driven overview of the proposed solution and its strategic value.

The suit configurator is structured around three core garments: Jacket, Pants and Waistcoat, which define the main decision layers of the experience. Each garment includes primary configuration options that establish its structure, followed by secondary and extra options for further customization.

The system is rule-based rather than purely additive. Certain choices act as constraints that condition subsequent options, such as lapel types determining available button closures or lapel widths limiting proportional variations.The main challenge was to clearly map all valid combinations and dependencies to ensure feasibility, coherence and ease of use. The resulting architecture balances flexibility and control, enabling confident customization while preventing incompatible selections.

This section presents the high-fidelity wireframes that translate the validated ideation insights into a structured and usable interface. The focus is on clarity, hierarchy and interaction logic, ensuring that each screen supports confident decision-making without visual or cognitive overload.

The wireframes define layout, navigation and component behavior, establishing a solid foundation for visual design and development while preserving the simplicity, elegance and control expected from a premium tailoring experience.

This screen translates the main ideation insights into a clear and focused entry point. The design prioritizes simplicity and visual confidence, giving full protagonism to the 3D suit preview.Only two primary actions are presented, fabric selection and design options, reducing cognitive load and guiding users progressively.

Subtle controls allow full exploration of the model, including rotation, layers, and full-screen view, without disrupting focus.

A persistent “Book Appointment” CTA connects the digital experience with the in-store journey, reinforcing confidence before commitment.

This screen applies the outcomes of the ideation and prioritization phase by isolating a single, high-impact decision: fabric choice. The interface reduces complexity by structuring the selection through presets, filters and a visual carousel, allowing users to compare options quickly and confidently.

Information is kept concise and contextual, supporting decision-making without overwhelming the user.

The clear exit back to the main configurator maintains flow continuity and reinforces a progressive, step-by-step experience aligned with SaaS usability principles.

This screen applies the ideation insights by breaking down suit customization into clear, modular style decisions. Options are grouped by garment and component, allowing users to focus on one choice at a time while understanding its impact on the overall design.

Dependencies between options (such as lapel type, width and closure) are explicitly structured, reducing errors and ambiguity. The result is a controlled, step-by-step customization flow that balances flexibility with clarity, aligned with SaaS usability and decision-support principles.

The wireframes establish the interaction framework of the platform. They map the user journey, define content hierarchy, and organize customization layers into a coherent workflow.By stripping away visual elements, the focus remains on structure, logic, and progressive disclosure.

This ensures that complexity is managed through clear sequencing rather than visual overload.The result is a scalable foundation ready for visual enhancement and system integration.

The tablet experience balances focus and control, expanding the mobile entry point into a more structured and spacious interaction.

The layout introduces parallel panels, allowing users to explore fabrics and design options while maintaining visual emphasis on the 3D suit preview.The increased screen real estate supports progressive customization without overwhelming the user. Fabric selection remains clearly accessible, while design controls are positioned for intuitive interaction and fluid navigation.

The persistent “Book Appointment” CTA continues to connect the digital configuration process with the in-store experience, reinforcing confidence and guiding users toward commitment.

This section presents the high-fidelity wireframes that translate the validated ideation insights into a structured and usable interface. The focus is on clarity, hierarchy and interaction logic, ensuring that each screen supports confident decision-making without visual or cognitive overload.The wireframes define layout, navigation and component behavior, establishing a solid foundation for visual design and development while preserving the simplicity, elegance and control expected from a premium tailoring experience.

MAIA is a framework for designing AI enabled communication systems that unify Design Thinking methodology with CX Customer Experience and EX Employee Experience.The objective is to improve the quality, clarity and efficiency of communication between businesses and their customers, as well as between members of internal teams.

The focus is not on building isolated chatbots, but on structuring conversational ecosystems that are aligned with real operational workflows.MAIA combines strategic thinking, service design and AI implementation to create systems that enhance both external customer interactions and internal team coordination.

Each project begins with a structured analysis phase.Before introducing any AI layer, the operational environment is carefully examined to understand how communication currently flows within the organization.

This includes identifying friction points, communication bottlenecks and repetitive interactions that generate unnecessary operational load.All relevant stakeholders are mapped, both external and internal. The customer journey and the employee journey are drawn in parallel in order to detect misalignments, inefficiencies and opportunity areas.

Based on this analysis, conversational flows and human in the loop structures are designed to ensure that the AI system integrates naturally into the organization rather than adding complexity.The goal is to design communication systems that are usable, scalable and strategically aligned with business objectives.

A hospitality business was experiencing operational friction due to high volumes of repetitive communication through WhatsApp, phone calls and email. WhatsApp was already a preferred channel for customers, but it was managed manually by the team.This created inefficiencies during peak hours and limited the business’s ability to scale communication without increasing staff workload.



‍Situation Before Development

‍• Repetitive reservation requests handled manually
• Lost reservations during peak service hours
• Delayed responses outside business hours
• High volume of calls interrupting front of house operations
• Unstructured lead capture through WhatsApp
• No centralized memory of past customer interactions
• Missed opportunities for upselling and retention

‍

The communication channel was reactive rather than strategic.

Strategic Objectives

Short and Mid Term Objectives:

• Reduce peak hour operational pressure
• Decrease repetitive phone calls
• Enable 24/7 reservation capture
• Standardize customer communication
• Improve response speed

Long Term Objectives:

• Build structured customer data
• Enable intelligent segmentation
• Activate automated remarketing flows
• Improve customer lifetime value
• Convert communication into a scalable business asset

1. Stakeholder and Journey Mapping

Both Customer Journey and Employee Journey were mapped in parallel to identify friction points and operational misalignments.Key focus areas included:

• Reservation flow
• Cancellation and modification flow
• Peak hour stress points
• Customer intent patterns

2. Personality Design‍

‍

The AI Agent personality was intentionally crafted to reflect the brand tone:

• Friendly but efficient
• Clear and concise
• Operationally structured
• Service oriented without being robotic

The goal was to maintain warmth while ensuring transactional clarity.

3. Conversational Architecture


‍

‍The conversation system was structured around:

‍

• Intent detection• Reservation flow prompts

• Data validation logic• Human escalation triggers

• Context awareness

‍

The agent was designed to guide the user step by step rather than relying on free form unstructured responses.

The implementation of the AI WhatsApp Agent transforms communication from a manual, reactive process into a structured and scalable operational system. By redesigning the reservation flow and automating repetitive interactions, the business reduces peak hour pressure, captures reservations 24/7 and improves response speed without increasing staff workload.

‍

Beyond operational efficiency, the system converts communication into a strategic asset. Structured lead capture, intelligent segmentation and automated marketing activation enable higher conversion rates, better customer retention and long term growth. WhatsApp evolves from a simple messaging tool into a reservation engine and data driven business layer.