Mobile First
I led the integral reconceptualization for the mobile experience at Leadtech, resulting in a 12% reduction of the refunds volume and increased daily profit by 7%.
Executive Summary
Mobile First was a strategic redesign to address low mobile conversion despite high traffic.
I led the end-to-end process, improving usability, defining a mobile-first philosophy, and implementing a scalable Design System. The result: higher conversion rates, lower exits and refunds, and a +7% increase in daily profit.
CONTEXT
Process travel documents easier than ever before
When traveling internationally, travelers often need visas or entry documents, typically through outdated, slow, and complex government websites. Our goal: enable users to process their travel documents 100% online, in under 5 minutes.
I led the end-to-end Product Design effort, owning the research, strategy, UX/UI design, and Design System creation. The project spanned 6 months within a fast-paced startup environment.
Problem statement
The existing mobile site was a poor adaptation of the desktop version. This are example images used to highlight each error, to comply with NDAs requirements:
Lack of optimized flows
The main funnel of the product was a large, single-page form requiring all the data from the user in a single step.
Non-responsive elements
The layout on mobile presented room for improvement since it consisted on a long scrolling page.
Accessibility issues
With a single system multiple child products were created, and this led to multiple accessibility issues in various products.
Lack of assistive features
The project lagged behind industry standards and competitors in terms of features that could improve UX.
This mismatch led to user frustration, high abandonment rates, and lost revenue opportunities.
The old UI
PREVIOUS DATA
Mobile vs. Desktop Comparison
This is the comparison data for the mobile device performance against desktop. Actual values for this data ara omitted intentionally to comply with NDAs.
+55%
Volume of traffic
-40%
Avegrage Conversion Rate
+50%
Refund volume
+50%
Drop-off rate
The original user flow before the redesigned experience
The challenge
Despite mobile being our main traffic channel, user engagement and conversion rates were significantly lower than on desktop.
The business needed a strategic shift to prioritize mobile experience, aiming to boost bookings, reduce exits, and improve profitability.
CONSTRAINTS
Limitations we had during the process
-
Complexity: multiple products under a unified design system, requiring scalable solutions.
-
User Diversity: targeting global users; MVP focused initially on Western markets.
-
User Interviews: conduct deep-dive interviews to understand user frustrations and expectations with the search feature.
-
Limited Resources: small dedicated squad (PO, PM, 2 FE devs, 1 BE dev, myself as sole Designer).
-
Tech Stack: Laravel backend; no app or PWA—strictly web-based.
KICKOFF
Research & Discovery
During this phase I initially defined the research plan and developed a meticulous insight gathering plan combining multiple techniques, with the objective of building a solid database of problems following the Lean UX methodology to determine those that were relevant to the business.
Stakeholder Workshops
We held several workshops to kick-start the research process, since this would be a large project and would end up involving almost all stakeholders in the project.
-
Purpose: align business goals, constraints, and success criteria. Plan a project roadmap in collaboration for the development of the MVP.
-
Output: defined priorities and project requirements. Established a great starting point for the project. Collected insights from a transversal stakeholder point of view.
One of the workshop insights
Heuristic Evaluation (Old Product)
To set a starting point for my research plan, I decided to perform an exhaustive heuristic evaluation of the product, in collaboration with 3 other fellow Product Designers working on the project. To narrow down the area of study, I limit the evaluation to the mobile device focused on western users.
-
Purpose: identify usability issues and areas for improvement.
-
Output: usability problem report and focus areas.
Heuristic Evaluation results table
Low performance on key heuristics
Visibility of system status, user control and freedom, and error prevention heuristics were clearly missed in the old product.
Usability errors
Other than that, I encountered that the transparency and the form sections were the two main points to work on.
Spider net results chart from the Heuristic Evaluation performed
Desk Research
I continue my research plan with a Desk Research with a focus on what I found during the heuristic evaluation. This are the several research techniques I performed:
- Competitors Benchmark.
- Science Research: design best practices, Material Design System, Apple Human Interface Guidelines, etc.
- Mobile Design Trends: technological advantages of the specific device.
- UI Component Analysis: benchmark with focus on specific components and its responsive version.
-
Purpose: benchmark competitors, mobile trends, and scientific insights.
-
Output: design best practices guide and competitive gap analysis.
Main Learnings from desk research:
Great opportunity for mobile products
There was a great opportunity among the direct competition in mobile, as there were few cases that offered solid products with a good user experience in mobile.
Focus on these design principles
The main focus for designing in mobile has to be on functional minimalism and decluttering, trying to implement all those measures oriented to minimize the cognitive load and the input/interaction of the user.
ANALIZE
Deeper Insights
In combination with the early qualitative insights, I worked in collaboration with the stakeholders participating in the project to obtain deeper insights.
Quantitative Data Analysis
This phase allowed me to strengthen the qualitative insights gathered earlier with solid quantitative data, while also uncovering additional findings. I conducted an in-depth review of key metrics, including average session duration, funnel drop-off rates, top landing and exit pages, as well as clickmaps, scrollmaps, and session recordings across critical stages of the user journey. We performed an end-to-end analysis in close collaboration with the Product Manager and Analist:
-
Purpose: detect drop-offs, user behavior patterns, and friction points.
-
Output: funnel analysis and prioritized pain points, identify main screens where users were abandoning the funnel.
“Reducing the amount of information users are required to input became a clear priority to enhance perceived progress, build user confidence, and streamline the overall experience”
Exit-intent survey
At this phase of the project, we wanted to know the main reasons why our users would abandon our site, that is why we implemented an exit-intent survey.
-
Purpose: understand user reasons for abandoning the funnel.
-
Output: direct insights into critical abandonment reasons.
“+60% of our users abandon during the form filling process because price is not clear to them. Other 20% abandon because of the large process”
Analyze user’s first interaction
I needed to check what the first interaction our users were taking in our product, to verify if I could obtain any valuable insight.
Most of the first interaction from our users was with the language selector. Due to this insight I performed a more in depth analysis to detect possible languages that may be lacking for certain users.
After this discovery, I hypothesize a design solution on how improving geolocation and detecting the language based on the IP address could improve the experience and ultimately improve conversions.
“+55% of our users’ first interaction in our page is with the language selector”
Behavioral Analysis (Clickmaps & Recordings)
-
Purpose: visualize user engagement and friction areas.
-
Output: key UX issues impacting user flow.
Session recordings revealed a consistent behavioral pattern on the long form page: users alternated between inputting small sets of data and scrolling back to review previously entered information.
This behavior indicates a breakdown in the flow’s usability, as it forces users into a dual mental model—input and review—leading to key issues:
-
Increased task time: the form completion process becomes unnecessarily lengthy.
-
Higher cognitive load: the frequent context-switching interrupts focus and adds mental strain.
-
Greater error rate: users are more prone to input mistakes due to the divided attention between entering and validating data.
"Users repeatedly switched between input and review, revealing uncertainty and increased cognitive load."
This pattern highlights a critical need to streamline the form experience and support a more linear, focused interaction.
ANALIZE
Reframing the problem
After performing the initial research, we came up with the need to reframe the problem.
Insight Database
Built an Insight Database where each finding mapped to an optimization hypothesis, prioritized via MoSCoW method considering business value vs effort. We prioritized the insights gathered by the whole project team together in a meeting.
Insight Database Priorization table
What initially appeared as a minor UX issue was reframed as a product inconsistent and fragmented experience. Our new guiding question became:
“How might we rethink the entire booking flow through a Mobile-First lens?”
This approach allowed us to not only address usability issues but also to realign the product with current user expectations, technical capabilities, and business goals.
DATA
Definition of success KPIs
After a deep analyze on the current KPIs, we set tangible goals aligned with stakeholders:
<50%
Exit Rate
-25%
Refund Ratio
+14%
Daily Estimated Benefit
+1%
Mobile Conversion Rate
DELIVERY
Design Process
I built and iterated the prototype in Figma, updating it after each round of research or testing. Throughout the MVP development, it went through 9 major iterations, adding new features, fixing usability issues, and improving its visual detail. Once the core design was validated and before developer hand-off, I created a complete Design System. It included all the foundations (typography, color, layout, spacing, icons, etc.) and a full set of components with variants, helping ensure consistency and speed in future design and development work.
VALIDATION
Iterative Testing
I aligned with the Product Owner on the critical need for a robust validation strategy. Given the complexity and impact of the redesign, it was clear that a strong experimentation and testing framework would be essential before moving to development. Our approach prioritized user insight at every stage to ensure we were solving the right problems with the right solutions.
Testing Objetives
To guide the validation process, I defined two key principles:
-
User-driven prototyping: I relied on continuous user feedback to shape the design direction from the earliest stages—well before a functional prototype was built. This ensured we were not just designing for users, but with them.
-
Testing based on prototype fidelity: at each iteration, I selected the testing method that best matched the prototype’s fidelity. This allowed us to extract the most relevant insights—from early concept validation to fine-tuning high-fidelity experiences—ensuring meaningful, actionable results throughout the process.
Me performing one of the Production MVP UX Test with a user
Validation Tests Performed
-
Card Sorting (non existing prototype): This technique was used early in the process to understand which content elements were prioritized by users. The results informed the organization and layout of key sections on the homepage, as one of the main measures to boost performance and increase CVR.
-
A/B Testing UI Components (functional adhoc prototype): This test aimed to determine the most effective UI components by comparing custom-designed elements against native OS components for input fields. The goal was to optimize both usability and user familiarity. Also, validate the hypothesis that using the native OS UI for mobile is a best practice for increasing conversion, while reducing development dependencies on the other hand.
-
5s test (Low-fi Prototype): This test identified which key information users could quickly grasp within five seconds, helping to ensure the design aligned with user expectations and product objectives.
-
Early Design UX Test (Mid-Fi Prototype): At this stage, the first iteration of the design was tested for usability. The focus was on identifying potential design and navigation issues, while also collecting open-ended user feedback to help inform the next design iterations.
-
Checkout UX Test (Mid-Fi Prototype): This test aimed to validate the newly designed checkout flow, focusing on user understanding and overall usability. Feedback was used to refine the process and eliminate friction points, since the checkout flow was one of the parts of the redesign that generated the most doubts among stakeholders because of its risk.
-
Specific Tasks UX Test (Mid-Fi Prototype): This method focused on task completion within the new funnel. We evaluated how easily users could navigate through the new flow and locate key content, ensuring intuitive design.
-
Complete Funnel UX Test (Hi-Fi Prototype): With a high-fidelity prototype, this test validated the entire user journey, from start to finish, to identify any remaining usability issues and gather open-ended feedback for final adjustments.
-
Production UX Test (Production MVP): Once the MVP was in production, I conducted this test to validate the entire funnel in a real-world environment. The aim was to uncover any last-minute usability challenges and obtain direct user feedback for further improvements.
-
Component A/B Testing (Production MVP): To refine the design further, this test evaluated the impact of minor design changes on user performance. It allowed us to measure the effects of various improvements and make data-driven decisions.
-
Split URL Testing (Production MVP): This method validated the performance of different design variations, testing major changes in user experience to determine which had the most significant impact on key metrics, comparing the old vs. the new version.
-
Funnel Event Analysis (Production MVP): By analyzing large-scale user behavior data in Amplitude, I was able to assess how users interacted with the complete funnel, providing quantitative insights into drop-off points, engagement levels, and overall user flow efficiency.
Example of the result of one of the winner AB Tests performed in VWO.
Throughout the UX testing process, I achieved strong usability results. All tests showed very low abandonment rates, minimal miss-clicks, and an average success rate of over 70%.
By creating a clear research and experimentation plan at the start of the project, I was able to perform an end-to-end analysis and deliver the MVP to development with minimal risk.
As a result, all A/B and Split URL tests for the MVP showed positive outcomes, with performance improvements ranging from 5% to 40%.
How we got there
Right before the handoff to development and after iterating the initial concept prototype with up to 9 major iterations and other added minor tweaks, I had a deeply tested prototype widely functional. Was only at this point that the risk of implementing this MVP on a live site was reduced at its minimums, so the development team could start building the MVP without the risk of having to perform major future iterations and make the development effort as effective as it could be.
In order to be able to implement the MVP on a live site, I first developed the final Design System to assure the consistency in design. I worked on the definition of the Design Foundations with the build of the styles (typography, colors, grid, layout, spacing, border-radiuses, elevations and iconography) and the components and its variants and different states. The hand-off to development was progressive and I was validating and supporting Front-End QAs for the CSS and styles.
Thank to the creation of this Design System, it was much easier to estimate the development effort.
Design System principples
-
Minimize the amount of components: by grouping the different components by its use and adding different variants and states to this components I was able to minimize the number of existing components to only 6 inputs and other 17 to build all the pages. This would simplify the development effort and to perform design iterations.
-
Standardized styles: by implementing standardized sytles in all it's levels we were able to build a product that followed the best practices in UX/UI at every stage.
Development Hand-off success
I worked in the creation of a Functional Document for the new experience, ensuring that development matched exactly the behaviour of the prototype.
With the creation of the User Flow of the new MVP and the definition of all the different configurations and states that the components built had, It was much easier for development to understant the interactions and the complete funnel of the product.
Design QA & check in prod
Performing a deep review in prod for all the styles and design issues was a great succes, because I could be able to assure myself that the mollecules and the componentes were built correctly and in a scalable way.
Specs sheet of the inputs, ensuring successful development
Final solution
After an extensive process of research, iteration, and validation, this is the final version of the MVP that was launched into production. Please note that certain UI elements — including content, colors, and assets — have been modified to comply with NDA requirements.
We added a clearer visual format in the new design, allowing the user to fill in data from the homepage to simplify the information to be filled in future steps. Added user reviews and usage data to reinforce user confidence. Better explained the process the user must follow with a detailed step-by-step.
The fixed navigation bar at the bottom helps users to navigate more easily between the different steps. The total price is visible from the start, if we cannot calculate it yet due to lack of user data we show “TBD”. The flow is broken down into small, clearly indicated steps.
At the end of the form completion process, we add a step to review the completed information, to reinforce the user's confidence. This step is optional.
We added an extra step to show additional services, thus reinforcing user visibility and trust by eliminating previous dark-patterns in which users purchased extra services without being aware of it. If added, the change in price is automatically reflected.
By using the mobile phone camera, the user can scan in seconds all the required documentation information, greatly minimizing the time and effort needed to fill in all the information. This functionality can be omitted and the information can be entered manually if required by the user. At the end of the scanning of the information, I design an extra step of manual review of the scanned information before entering it into the system.
Key new features of the redesigned experience:
-
Streamlined Navigation: A fixed, persistent navigation bar enhances user control and clearly indicates where the user is within the funnel, improving orientation and reducing friction.
-
Micro-Stepped Flow: The journey is broken down into smaller, focused steps, boosting the user's sense of progress and significantly reducing the likelihood of errors by minimizing cognitive load.
-
Enhanced Pricing Transparency: Users are consistently informed about pricing throughout the journey. Any price increases are clearly tied to the user’s conscious actions, such as adding optional services, reinforcing trust.
-
Leveraging Mobile Capabilities: Features like camera-based scanning and GPS geolocation reduce manual input and accelerate the process, taking full advantage of mobile device functionalities.
-
Funnel Simplification and Decision Points: The funnel has been restructured to introduce more micro-decision moments, breaking the process into smaller, more manageable units and increasing user engagement and perceived progress.
New optimized user flow with additional User Decition actions (non existing on original product)
IMPACT
Launching the new experience
I rebuild from scratch the whole mobile experience of the product as Lead Product Designer with great benefits to the user. This project successfully shifted company mindset from "responsive" to true mobile-first product design. Also, by introducing a scalable Design System we achieved to reduce the time-to-market for future products or markets and optimizations via an experimentation culture (through A/B Testing and user-centric iterations). This project was a clear example of a successful cross-team collaboration, working aligned with Product, Engineering and Business on shared UX KPIs.
After the first months of analysis, we’ve been experiencing a decrease of the Refund Ratio and increase of the CR.
+8%
Conversion Rate
-12%
Refund Ratio
+7%
Daily Profit
-20%
Drop-off Ratio
For NDAs reasons I have ommited the actual values for these metrics.
While the uplift in Conversion Rate exceeded expectations, daily profit grew by only 7%, falling short of the 14% objective. This was partly due to the Refund Ratio improving, but not as much as projected. We believe continued iteration—focused on reducing friction and building trust—will help unlock further gains and bring us closer to the original business goal.
LEARNINGS
Final thoughts
- Early deep research avoids costly missteps later.
- Real user behavior often reveals issues invisible to stakeholders.
- A flexible, robust Design System accelerates product development and improves consistency at scale.
One of the biggest strengths of the Mobile Project was that it improved the whole product, not just a small part of it. This allowed me to rethink the entire funnel from scratch and create better solutions across the full experience, not just focus on one area. Sometimes the best ideas only come when you take a step back and look at the full picture.
During the project, we also found several improvements that could make the desktop version better too. So now, many of the new features will also be added to desktop — finally bringing a true Mobile-First approach to the product!
This project was a clear example of how a user-centered, research-driven approach to Mobile First Design can drive massive business impact, foster better collaboration, and deliver delightful user experiences across global markets.
More projects
