https://rafaelvillasenor.com Rafael Villaseñor — Product Design Wed, 27 Nov 2024 18:17:59 +0000 https://rafaelvillasenor.com en https://rafaelvillasenor.com/Home-Image-Scroll Tue, 03 Nov 2020 17:25:50 +0000 Rafael Villaseñor — Product Design https://rafaelvillasenor.com/Home-Image-Scroll https://rafaelvillasenor.com/Payment-Flow-Optimization Wed, 27 Nov 2024 18:17:59 +0000 Rafael Villaseñor — Product Design https://rafaelvillasenor.com/Payment-Flow-Optimization <img width="4240" height="2608" width_o="4240" height_o="2608" data-src="https://freight.cargo.site/t/original/i/412e8fa402c1671916ef3c59f4b7fd0be9924e9e6aab9a9dd6b9554df4618f69/QT.jpg" data-mid="223280588" border="0" src="https://freight.cargo.site/w/1000/i/412e8fa402c1671916ef3c59f4b7fd0be9924e9e6aab9a9dd6b9554df4618f69/QT.jpg" /> Optimizing ETpay’s payment experience to boost conversion rates. ContextQuickTransfer is ETpay's core product that enables digital merchants in Mexico to integrate a simplified bank transfer payment method directly into their e-commerce checkout process. User problem Mexican digital commerce users were faced with a fragmented and complex online payment experience. The existing flow created a frustrating journey that forced customers to navigate multiple screens, manually select banks, and complete complicated transfer instructions, ultimately interrupting their experience. These confusing steps generated user friction and led to high payment abandonment rates. Business problemAs a new player in Mexico’s fintech market, ETpay faced critical challenges threatening its growth and market positioning. The inefficient payment flow negatively impacted user experience, leading to a low 30% conversion rate. This hindered the company’s ability to attract, retain, and build trust with merchants. Moreover, the lack of a seamless solution risked damaging ETpay’s reputation and its ability to compete in an intensely competitive financial technology landscape. The SolutionI led the redesign of the payment flow, strategically simplifying user interactions while working within existing banking infrastructure. By introducing clear, step-by-step transfer guidance, minimizing visual complexity, and optimizing for both SPEI and CoDi transfers, ETpay created a more intuitive payment experience. The redesign prioritized user-centric design principles, reducing friction and improving overall transaction reliability. Overall conversion rates soared to 70% monthly, with successful payments growing by 145%. The average number of payments per user rose from 2 to 3, while individual transfer methods showed significant improvement: SPEI conversions increased from 58% to 72%, and CoDi conversions from 34% to 55%. While the results on the B2C side were highly rewarding, the surge in payment activity revealed a new challenge for merchants: managing this growth efficiently. Merchants needed tools to track, analyze, and reconcile payments seamlessly. Recognizing this, we shifted focus to redesigning the merchant dashboard. https://rafaelvillasenor.com/ETpay-s-Merchant-Dashboard Tue, 12 Nov 2024 21:00:52 +0000 Rafael Villaseñor — Product Design https://rafaelvillasenor.com/ETpay-s-Merchant-Dashboard A unified dashboard to support products across multiple markets. User problemThe current dashboard, last updated in 2019, was no longer meeting user needs, with perceived satisfaction and engagement declining. Compared to competitors, the interface felt outdated and prone to bugs. Navigation was complex, especially for new users, with a cluttered layout that overwhelmed users and hindered decision-making. Many tasks required customer support intervention, revealing significant usability challenges. Business problemInconsistent design patterns across the interface impeded user onboarding, product discovery, and scalability. The absence of a unified design language led to a patchwork of outdated components that didn’t align with ETpay’s 2022 rebranding. The outdated codebase increased the time needed for minor fixes, diverting resources from feature development. Customer support teams were spending significant time addressing issues and clarifying information. The SolutionFrom January to April 2023, I was responsible for leading a complete redesign, managing a cross-functional team of three developers to launch the first iteration of ETpay's new dashboard. The new version offers customers access to data that is readily understandable and can be acted upon, presented through a streamlined and intuitive interface. It currently supports six transactional products in Mexico and seven in Chile, providing a unified view of ETpay's growing financial ecosystem. It features self-service functionalities that allow customers to manage their accounts, upgrade plans, and update payment methods independently. Post-launch observations indicated significant improvements: Reduced manual customer support interactions for basic navigation and data interpretation.Improved user self-service capabilities.Established a scalable design system that enabled consistent feature delivery without major refactoring. <img width="1880" height="686" width_o="1880" height_o="686" data-src="https://freight.cargo.site/t/original/i/64818d16f18596c457468d1a87a95985921d6354385fb0da4f9582ad2e3043a6/Dashboard-ETpay-1.jpg" data-mid="222552308" border="0" src="https://freight.cargo.site/w/1000/i/64818d16f18596c457468d1a87a95985921d6354385fb0da4f9582ad2e3043a6/Dashboard-ETpay-1.jpg" /> Dynamic graphs were introduced, enabling users to easily review key business metrics <img width="1990" height="653" width_o="1990" height_o="653" data-src="https://freight.cargo.site/t/original/i/686d944795d562b4d32ade5a8488971544e3580c5eaa51cba8a440d38783ca91/Dashboard-Settings-ETpay.jpg" data-mid="221746107" border="0" src="https://freight.cargo.site/w/1000/i/686d944795d562b4d32ade5a8488971544e3580c5eaa51cba8a440d38783ca91/Dashboard-Settings-ETpay.jpg" />Customers can manage their accounts, including plan upgrades, payment methods, and login information <img width="2120" height="1230" width_o="2120" height_o="1230" data-src="https://freight.cargo.site/t/original/i/8968225a484cce510ad69dff4510d73f71f8bdb64510087878d7f05bf84cec76/Dashboard-DD-ETpay.jpg" data-mid="221746116" border="0" src="https://freight.cargo.site/w/1000/i/8968225a484cce510ad69dff4510d73f71f8bdb64510087878d7f05bf84cec76/Dashboard-DD-ETpay.jpg" /> A clean layout and a reorganized side menu groups related features logically https://rafaelvillasenor.com/ETpay-s-Website-Redesign Wed, 27 Nov 2024 00:05:07 +0000 Rafael Villaseñor — Product Design https://rafaelvillasenor.com/ETpay-s-Website-Redesign In 2022, I redesigned ETpay's website, transforming it into a strategic platform for the brand. &nbsp; User problemETpay's existing corporate website failed to effectively communicate the company's evolving value proposition, technological capabilities and growth trajectory to potential customers. The one-page design lacked the depth and functionality to showcase ETpay's full suite of payment processing and integration services, resulting in a user experience that felt outdated and did not reflect the company's innovative approach to financial technology. Business problemIn early 2022, ETpay underwent a complete brand redesign in preparation for international expansion beyond its home market of Chile. However, the company's corporate website remained misaligned with this new visual and strategic identity. As ETpay expanded into new global markets, such as Mexico, this disconnect threatened to hinder the company's business development efforts. The Solution Working closely with cross-functional teams in Chile and Mexico, I: Redesigned the site architecture to create a robust, multi-page experience that could showcase ETpay's full suite of payment processing and integration services. Developed a cohesive visual identity and intuitive user experience in line with the company's refreshed branding. Managed the site launch process, ensuring seamless coordination between design, development, and sales teams. To further empower the design team's autonomy and adaptability, we moved the site to the Framer platform in 2023. This increased our responsiveness to market changes by allowing our in-house design team to make updates and content changes without relying on engineering resources. <img width="3840" height="3344" width_o="3840" height_o="3344" data-src="https://freight.cargo.site/t/original/i/8283c2539d9052dfbf48399685d9854ea02cf15c60e8baa5c595523e134c484d/ETpay.com-3.jpg" data-mid="222550722" border="0" src="https://freight.cargo.site/w/1000/i/8283c2539d9052dfbf48399685d9854ea02cf15c60e8baa5c595523e134c484d/ETpay.com-3.jpg" /> Alignment with brand identity <img width="6020" height="3657" width_o="6020" height_o="3657" data-src="https://freight.cargo.site/t/original/i/b7e8e6279b5124a114fd0c6426656771ff54afa1df039d31b55fbcc45500e777/Frame-33127-1.jpg" data-mid="222550905" border="0" src="https://freight.cargo.site/w/1000/i/b7e8e6279b5124a114fd0c6426656771ff54afa1df039d31b55fbcc45500e777/Frame-33127-1.jpg" /> Designed to scale and adapt as ETpay continues to diversify its product suite https://rafaelvillasenor.com/Club-Premier-App Tue, 03 Nov 2020 17:25:51 +0000 Rafael Villaseñor — Product Design https://rafaelvillasenor.com/Club-Premier-App <img width="2120" height="1304" width_o="2120" height_o="1304" data-src="https://freight.cargo.site/t/original/i/13dd440add8f36dd91a70b52e6adea6b9c6ab65fb9f035ba49a91f6eefe0d206/App.jpg" data-mid="219623311" border="0" src="https://freight.cargo.site/w/1000/i/13dd440add8f36dd91a70b52e6adea6b9c6ab65fb9f035ba49a91f6eefe0d206/App.jpg" /> In order to comply with my confidentiality agreement, I have omitted confidential information. All information is my own and does not necessarily reflect the views of Club Premier. Designing a digital platform to complement the lives of new and existing members to encourage loyalty. &nbsp; Club Premier was the leading loyalty program in Mexico with more than 7 million members. However, the app was not performing up to expectations. Low download rates, poor reviews and low user engagement made it clear that the existing mobile experience was not meeting the needs of our customers. <img width="3600" height="2700" width_o="3600" height_o="2700" data-src="https://freight.cargo.site/t/original/i/5b039ce5d9f2a9b8d93ee5d91279919e3bce78a7805f8b43d010b1a9055d57a4/Realistic.jpg" data-mid="90671925" border="0" src="https://freight.cargo.site/w/1000/i/5b039ce5d9f2a9b8d93ee5d91279919e3bce78a7805f8b43d010b1a9055d57a4/Realistic.jpg" /> The SolutionFrom 2017 to 2021, I led a team of designers and programmers to transform an outdated app with generic information and limited functionality into a personalized tool that helped strengthen members' relationships with Club Premier. During this period:To engage users right from the start, we implemented an onboarding tutorial that clearly and visually demonstrated the app's new features.To convert non-registered users into Club Premier members, we integrated the sign-up flow into the app for the first time.To facilitate retroactive ticket accrual, we integrated a boarding pass scanner.To ease the tension between the interactions between the member - the program - the app, we created a virtual assistant that displays recommendations to the user based on their level of maturity in the program.To increase redemption rates and help members make the most of their Premier Points, we defined an interest-based notification strategy.In order to monetize the channel, we launched the first-ever native sales flow that provides members with the ability to purchase Premier Points for a recurring monthly fee.Following the launch in July 2018, I managed and conducted user research sessions. This feedback allowed us to identify friction points and opportunities, ultimately leading to new feature development and optimization. <img width="1440" height="1110" width_o="1440" height_o="1110" data-src="https://freight.cargo.site/t/original/i/a9bf3bd2d6545e4aa44403c9d2a2dac7dcfff42ef9acafa7290172310a199a21/rv_CPappPlat.jpg" data-mid="92483014" border="0" src="https://freight.cargo.site/w/1000/i/a9bf3bd2d6545e4aa44403c9d2a2dac7dcfff42ef9acafa7290172310a199a21/rv_CPappPlat.jpg" /> The Impact In 2021, the app generated over 700,000 sessions each month. The majority of these sessions originated from Mexico, the United States, and Spain. There was a notable increase in the average number of active users per month: 63% in 2018 when compared to the same period in 2017, and 72% in 2019 when compared to the same period in 2018.In 2018, the number of sessions per month increased by 72% and in 2019 by 53%.The average length of sessions was doubled.&nbsp;In 2019, 6% of program registrations were made through the app. The FindingsThis project represented a significant shift in my role, transitioning from primarily interface design to a focus on product experience. I gained insight into the importance of considering factors beyond aesthetics when evaluating product success, including functionality and user value. Frequent user feedback informed continuous improvement through iteration, while close collaboration between design and development reduced time-to-resolution for user concerns. https://rafaelvillasenor.com/Viajero-Premier Wed, 04 Nov 2020 18:34:59 +0000 Rafael Villaseñor — Product Design https://rafaelvillasenor.com/Viajero-Premier <img width="2120" height="1412" width_o="2120" height_o="1412" data-src="https://freight.cargo.site/t/original/i/47c1f430e5d0e78092943b086b10f6ad8d08e367b587cff1380794b4c8a7b619/Viajero-Premier.jpg" data-mid="221739086" border="0" src="https://freight.cargo.site/w/1000/i/47c1f430e5d0e78092943b086b10f6ad8d08e367b587cff1380794b4c8a7b619/Viajero-Premier.jpg" />In order to comply with my confidentiality agreement, I have omitted confidential information. All information is my own and does not necessarily reflect the views of Club Premier. A digital platform to transform how members discover, plan and book their travel experiences. Context Club Premier, Mexico's leading travel loyalty program with 7 million members, enables customers to redeem Premier Points for various travel products, including flights, hotels, car rentals, cruises, and activities.However, most members viewed and used Club Premier exclusively for Aeromexico flights, missing out on the program's full potential. ProblemMembers were missing valuable redemption opportunities due to limited awareness of Club Premier's full travel offering. User research revealed that members found exploring non-flight options complex and unintuitive, leading to low engagement with other travel products and reduced program value perception. <img width="2400" height="1600" width_o="2400" height_o="1600" data-src="https://freight.cargo.site/t/original/i/648743ccd1110b43a2663b2c3825693e4d59ce651df6de8e916f29e6a7a8250e/rv_viajeropremiertop.jpg" data-mid="91149174" border="0" src="https://freight.cargo.site/w/1000/i/648743ccd1110b43a2663b2c3825693e4d59ce651df6de8e916f29e6a7a8250e/rv_viajeropremiertop.jpg" /> Solution As the Lead UX Designer, I led the design of a comprehensive digital&nbsp; platform focused on three key pillars:Seamless Travel ManagementCreated a unified dashboard where users can effortlessly plan and manage their entire travel experience - from checking availability and rates to booking any Club Premier travel product.Inspirational Content HubDeveloped a curated blog featuring expert travel advice, gastronomic discoveries, and cultural recommendations to inspire users to explore new destinations and maximize their Premier Points.Interactive Travel Memory FeatureDesigned "Travel Postcards," an innovative feature enabling users to create digital memories by pinning photos and notes to an interactive map, enhancing the emotional connection with the platform. The ImpactWhile the platform was in development when I concluded my involvement in late 2021, I established comprehensive success metrics including:Non-air product engagement trackingMulti-product purchase behavior analysisContent-to-conversion measurementUser satisfaction and feature adoption metricsPoint redemption patterns and member loyalty indicatorsThese metrics were designed to measure the platform's success in transforming Club Premier from a traditional loyalty program into a full-service travel companion. https://rafaelvillasenor.com/Club-Premier-s-Member-Dashboard Wed, 04 Nov 2020 18:40:11 +0000 Rafael Villaseñor — Product Design https://rafaelvillasenor.com/Club-Premier-s-Member-Dashboard <img width="2120" height="1572" width_o="2120" height_o="1572" data-src="https://freight.cargo.site/t/original/i/5d91e515f0f68eadf06dc122fbf48fcee290c63971efea05a16f91d53059cbad/Home-member.jpg" data-mid="221739046" border="0" src="https://freight.cargo.site/w/1000/i/5d91e515f0f68eadf06dc122fbf48fcee290c63971efea05a16f91d53059cbad/Home-member.jpg" /> In order to comply with my confidentiality agreement, I have omitted confidential information. All information is my own and does not necessarily reflect the views of Club Premier. A dashboard to present complex data in a digestible format to facilitate informed decision-making. The Problem User research revealed that members with Club Premier Level and/or co-branded cards were unable to locate information about their benefits on the website. This resulted in them having to contact the call center to resolve any queries they had.The SolutionThis was the foundation for the design of a comprehensive design system, which aimed to establish a unified language across Club Premier's digital products. Furthermore, it presented an opportunity to reconsider the design of the website.I began by auditing the site, which at the time was over 250 pages long, and all existing styles and components to document their usage and purpose. The use of copy-and-paste for design and development led to the creation of multiple components with no reuse potential.The project resulted in the delivery of a comprehensive library of atomic components and elements, including fonts, colors, and icon sizes. By establishing a reference document for all components and design specifications, the secondary goal was to streamline the delivery process for the development team. The Impact In 2019, Club Premier's homepage received over 57 million views and attracted more than 4 million visits from approximately 1.8 million unique users. The design system enabled the swift creation of new pages, reordering of sections, and relaunching of products within weeks. https://rafaelvillasenor.com/Club-Premier-s-Design-system Wed, 04 Nov 2020 19:12:02 +0000 Rafael Villaseñor — Product Design https://rafaelvillasenor.com/Club-Premier-s-Design-system <img width="2120" height="1304" width_o="2120" height_o="1304" data-src="https://freight.cargo.site/t/original/i/211fbac589d727a27e2afb43e4f0c01a26a1f320de9923b3f83b6d9e918ea1b5/Sistema-de-diseno.jpg" data-mid="221739089" border="0" src="https://freight.cargo.site/w/1000/i/211fbac589d727a27e2afb43e4f0c01a26a1f320de9923b3f83b6d9e918ea1b5/Sistema-de-diseno.jpg" /> In order to comply with my confidentiality agreement, I have omitted confidential information. All information is my own and does not necessarily reflect the views of Club Premier. A comprehensive design system to establish a unified language across a +250 pages long website. The Context&nbsp; After spending a few weeks familiarizing myself with the newly created Customer Experience team and their work, I came to realize that there was a lack of clear design guidance, no visible components, and a dearth of reusable code and design files. The website's design elements were created at different times by different designers in different contexts, resulting in consistency issues. Many pages, products, features, and components lacked alignment with UI and UX standards. This became more evident when designing new pages, products, or features due to the lack of design principles. The lack of standards led to significant time spent on design decisions. The SolutionThis was the foundation for the design of a comprehensive design system, which aimed to establish a unified language across Club Premier's digital products. Furthermore, it presented an opportunity to reconsider the design of the website. I began by auditing the site, which at the time was over 250 pages long, and all existing styles and components to document their usage and purpose. The use of copy-and-paste for design and development led to the creation of multiple components with no reuse potential. The project resulted in the delivery of a comprehensive library of atomic components and elements, including fonts, colors, and icon sizes. By establishing a reference document for all components and design specifications, the secondary goal was to streamline the delivery process for the development team. The Impact In 2019, Club Premier's homepage received over 57 million views and attracted more than 4 million visits from approximately 1.8 million unique users. The design system enabled the swift creation of new pages, reordering of sections, and relaunching of products within weeks. The FindingsWhile I saw significant improvements in team efficiency and speed, these results should not be attributed solely to the design system, they are a consequence of conversation and collaboration habits.Implementing a clear, consistent and common design language increases the efficiency of design cycles and speed in creating, scaling and growing products.A design system is a living organism that evolves with the product and must adapt to the needs of the business. In 2019, I spearheaded the inception of this project and collaborated with a development team to facilitate its implementation. https://rafaelvillasenor.com/Gran-Sorteo Wed, 04 Nov 2020 18:52:31 +0000 Rafael Villaseñor — Product Design https://rafaelvillasenor.com/Gran-Sorteo 4. Gran Sorteo Club Premier <img width="2400" height="1600" width_o="2400" height_o="1600" data-src="https://freight.cargo.site/t/original/i/1861dc0c2027906965b371797da020e70657ecd4c76f8d8b05b273a1e9bb9894/rv_gransorteo.jpg" data-mid="91149036" border="0" src="https://freight.cargo.site/w/1000/i/1861dc0c2027906965b371797da020e70657ecd4c76f8d8b05b273a1e9bb9894/rv_gransorteo.jpg" /> Para cumplir con mi acuerdo de confidencialidad, he omitido información confidencial. Toda la información es mía y no refleja necesariamente las opiniones de Club Premier. Contexto&nbsp; Club Premier realiza cada año un Sorteo en el que los Socios pueden utilizar sus Puntos Premier para comprar folios y participar para ganar premios. En 2018, el sitio web de Club Premier se estaba posicionando como el canal de adquisición de folios más importante, sin embargo la página de compra de participaciones tenía una tasa de conversión muy baja. Vimos una oportunidad para aumentar esta métrica al hacer una serie de mejoras en la experiencia de compra de folios.Solución Funcionalmente, no había muchas cosas malas con la usabilidad de la página existente. En las pruebas de usabilidad, todos los participantes pudieron comprar participaciones con éxito. Mi enfoque estuvo principalmente en ordenar los elementos del flujo para que el usuario pudiera concentrarse en la compra de folios. Comencé haciendo un análisis heurístico de todas las páginas por las que el usuario tenía que pasar para completar la compra de participaciones y durante el proceso descubrí varios puntos de fricción: En general, el sitio parecía muy anticuado y la interfaz estaba desordenada, las imágenes y el texto competían por atención. Al simplificar elementos pudimos hacer el recorrido visual del landing lo más directo posible.En algunos lugares, había menos información acerca de los premios y en algunos lugares, había más. Mantener la atención y la intención de compra al consolidar la información de los premios.&nbsp; Enfatizar y hacer más transparente el costo de los combos y el número de folios incluidos.Facilitar el proceso para usuarios recurrentes con un botón de compra en la parte superior de la pantalla y para nuevos usuarios con un botón de compra en la parte inferior de la pantalla.Tiempos de carga lentos: cuando el cliente hacía clic en el botón para pagar, solía tomar alrededor de 5 segundos y no había ningún estado de carga ni retroalimentación visual. <img width="2600" height="1800" width_o="2600" height_o="1800" data-src="https://freight.cargo.site/t/original/i/a846a99a4aaf357baa0c11cb02858b0a50ffee2bec862ca1eed95ca7ad832125/rv_gransorteo2.jpg" data-mid="92504641" border="0" src="https://freight.cargo.site/w/1000/i/a846a99a4aaf357baa0c11cb02858b0a50ffee2bec862ca1eed95ca7ad832125/rv_gransorteo2.jpg" /> Impacto Los cambios necesitaron poco esfuerzo pero tuvieron alto impacto, convirtiendo el sorteo de ese año en el más exitoso en los últimos 10 años: +6% la tasa de conversión,+31% conversiones,+10% share compras a través del sitio web,+13% Puntos Premier redimidos. AprendizajesProbar soluciones en cualquier forma (papel, baja o alta fidelidad) lo antes posible ahorra una gran cantidad de tiempo.Como diseñadores, a menudo nos atraen los diseños atractivos, modernos y originales. Pero, siempre debemos recordar el "por qué". El objetivo principal es comprender al usuario, sus problemas y luego crear un diseño que los resuelva. Rol Lideré la investigación, diseño UX y UI de este proyecto en 2018. https://rafaelvillasenor.com/Rotos-Mafalda Mon, 02 Aug 2021 22:22:58 +0000 Rafael Villaseñor — Product Design https://rafaelvillasenor.com/Rotos-Mafalda 1. Mafalda - Rotos Edición de video para Mafalda