Open Account & First Deposit Redesign
Open Account & First Deposit Redesign
Role: UX/UI Designer
Platforms: App & Web
Tools: Sketch, Photoshop, Illustrator
Redesigning the onboarding and deposit journey to align with a new visual identity and reduce user friction.
Primary UX/UI designer on the flow, working with project management and
development teams, with design review/support from a senior designer.
Role: UX/UI Designer
Platforms: App & Web
Tools: Sketch, Photoshop, Illustrator
Timeframe: ~8–12 weeks
Redesigning the onboarding and deposit journey to align with a new visual identity and reduce user friction.
Redesigning the onboarding and deposit journey to align with a new visual identity and reduce user friction.
Redesigning the onboarding and deposit journey to align with a new visual identity and reduce user friction.
Primary UX/UI designer on the flow, working with project management and development teams, with design review/support from a senior designer.
Primary UX/UI designer on the flow, working with project management and development teams, with design review/support from a senior designer.
Primary UX/UI designer on the flow, working with project management and development teams, with design review/support from a senior designer.
Implemented & Live
Implemented & Live
Implemented & Live
United Kingdom
United Kingdom
Poland
Poland
Colombia
Colombia
Ghana
Ghana
Canada
Canada
Argentina
Argentina
Thailand
Thailand
South Korea
South Korea
How do you migrate a legacy flow to a new brand identity without breaking global compliance?
The Challenge
With a new brand direction live, the old registration flow felt like a disconnect. I was tasked with overhauling the sign-up and deposit journey to ensure it reflected our new identity while maintaining the rigorous data standards required for global compliance.
How do you migrate a legacy flow to a new brand identity without breaking global compliance?
How do you migrate a legacy flow to a new brand identity without breaking global compliance?
The Challenge
The Challenge
The Challenge
With a new brand direction live, the old registration flow felt like a disconnect. I was tasked with overhauling the sign-up and deposit journey to ensure it reflected our new identity while maintaining the rigorous data standards required for global compliance.
With a new brand direction live, the old registration flow felt like a disconnect. I was tasked with overhauling the sign-up and deposit journey to ensure it reflected our new identity while maintaining the rigorous data standards required for global compliance.
With a new brand direction live, the old registration flow felt like a disconnect. I was tasked with overhauling the sign-up and deposit journey to ensure it reflected our new identity while maintaining the rigorous data standards required for global compliance.
Old Design
Old Design
New Design
New Design
My Approach
My Approach
My Approach
Designing Clearer Experiences
Designing Clearer Experiences
Designing Clearer Experiences
I executed a multi-phased strategy to modernise the legacy experience. My focus was on refactoring complex registration logic into a streamlined, cross-platform journey that honours global regulatory standards while prioritising user speed.
I executed a multi-phased strategy to modernise the legacy experience. My focus was on refactoring complex registration logic into a streamlined, cross-platform journey that honours global regulatory standards while prioritising user speed.
I executed a multi-phased strategy to modernise the legacy experience. My focus was on refactoring complex registration logic into a streamlined, cross-platform journey that honours global regulatory standards while prioritising user speed.
Audit
Analysed the legacy journey to pinpoint drop-off risks and outdated patterns.
Audit
Analysed the legacy journey to pinpoint drop-off risks and outdated patterns.
Audit
Analysed the legacy journey to pinpoint drop-off risks and outdated patterns.
Align
Confirmed global compliance and technical logic with cross-functional teams.
Align
Confirmed global compliance and technical logic with cross-functional teams.
Align
Confirmed global compliance and technical logic with cross-functional teams.
Design
Built a scalable, high-hierarchy flow centred on clarity and progression.
Design
Built a scalable, high-hierarchy flow centred on clarity and progression.
Design
Built a scalable, high-hierarchy flow centred on clarity and progression.
Deploy
Iterated on edge cases and finalised hand-off assets for implementation.
Deploy
Iterated on edge cases and finalised hand-off assets for implementation.
Deploy
Iterated on edge cases and finalised hand-off assets for implementation.
The Architecture of the journey
User Flow
A visual breakdown of the intuitive pathways within the app, designed to minimise cognitive load and maximise user success from the very first interaction.
Open Account Flow
Open Account Flow
A logical, step-by-step registration process designed to verify identity and secure account details in under three minutes.
A logical, step-by-step registration process designed to verify identity and secure account details in under three minutes.
A logical, step-by-step registration process designed to verify identity and secure account details in under three minutes.
First Deposit Flow
First Deposit Flow
A transparent deposit flow that provides clear confirmation at every stage, from selecting a payment method to setting personalised limits.
A transparent deposit flow that provides clear confirmation at every stage, from selecting a payment method to setting personalised limits.
A transparent deposit flow that provides clear confirmation at every stage, from selecting a payment method to setting personalised limits.
The Architecture of the journey
The Architecture of the journey
The Architecture of the journey
User Flow
User Flow
A visual breakdown of the intuitive pathways within the app, designed to minimize cognitive load and maximize user success from the very first interaction.
A visual breakdown of the intuitive pathways within the app, designed to minimize cognitive load and maximize user success from the very first interaction.
A visual breakdown of the intuitive pathways within the app, designed to minimize cognitive load and maximize user success from the very first interaction.
Key UX UI Decisions
Clean step Progression
I re-engineered the onboarding architecture to provide explicit visual cues for progress. By surfacing the upcoming milestones, such as personal details, address, and login credentials. I reduced cognitive friction and transformed a complex data-entry task into a guided, manageable experience.
Key UX UI Decisions
Optimised Form Hierarchy
I overhauled the layout and spatial grouping to improve scannability across data-heavy screens. By implementing a clearer visual hierarchy, I ensured that complex information feels manageable, allowing users to process dense requirements without cognitive fatigue.
Key UX UI Decisions
Validation & Error Handling
I designed comprehensive field-level and step-level error states to guide users through complex inputs. By providing real-time feedback and clear recovery paths, I ensured the journey remains resilient in real-world scenarios, significantly reducing drop-offs caused by form friction or user confusion.
Key UX UI Decisions
Seamless Journey Alignment
I unified the registration and deposit pathways into a single, cohesive onboarding experience. By maintaining identical interaction patterns and visual language across every step, I eliminated the "hand-off" friction between account creation and funding, reinforcing user trust and brand reliability from the start.
Key UX UI Decisions
Compliance-First Experience
I transformed dense, legally-mandated information into a clean and intuitive interface. By strategically placing country-specific requirements and disclosures within the flow, I created a friction-free experience that upholds total regulatory integrity without sacrificing modern usability.
Key UX UI Decisions
Clean step Progression
I re-engineered the onboarding architecture to provide explicit visual cues for progress. By surfacing the upcoming milestones, such as personal details, address, and login credentials. I reduced cognitive friction and transformed a complex data-entry task into a guided, manageable experience.
Key UX UI Decisions
Optimised Form Hierarchy
I overhauled the layout and spatial grouping to improve scannability across data-heavy screens. By implementing a clearer visual hierarchy, I ensured that complex information feels manageable, allowing users to process dense requirements without cognitive fatigue.
Key UX UI Decisions
Validation & Error Handling
I designed comprehensive field-level and step-level error states to guide users through complex inputs. By providing real-time feedback and clear recovery paths, I ensured the journey remains resilient in real-world scenarios, significantly reducing drop-offs caused by form friction or user confusion.
Key UX UI Decisions
Seamless Journey Alignment
I unified the registration and deposit pathways into a single, cohesive onboarding experience. By maintaining identical interaction patterns and visual language across every step, I eliminated the "hand-off" friction between account creation and funding, reinforcing user trust and brand reliability from the start.
Key UX UI Decisions
Compliance-First Experience
I transformed dense, legally-mandated information into a clean and intuitive interface. By strategically placing country-specific requirements and disclosures within the flow, I created a friction-free experience that upholds total regulatory integrity without sacrificing modern usability.
Key UX UI Decisions
Clean step Progression
I re-engineered the onboarding architecture to provide explicit visual cues for progress. By surfacing the upcoming milestones, such as personal details, address, and login credentials. I reduced cognitive friction and transformed a complex data-entry task into a guided, manageable experience.
Key UX UI Decisions
Optimised Form Hierarchy
I overhauled the layout and spatial grouping to improve scannability across data-heavy screens. By implementing a clearer visual hierarchy, I ensured that complex information feels manageable, allowing users to process dense requirements without cognitive fatigue.
Key UX UI Decisions
Validation & Error Handling
I designed comprehensive field-level and step-level error states to guide users through complex inputs. By providing real-time feedback and clear recovery paths, I ensured the journey remains resilient in real-world scenarios, significantly reducing drop-offs caused by form friction or user confusion.
Key UX UI Decisions
Seamless Journey Alignment
I unified the registration and deposit pathways into a single, cohesive onboarding experience. By maintaining identical interaction patterns and visual language across every step, I eliminated the "hand-off" friction between account creation and funding, reinforcing user trust and brand reliability from the start.
Key UX UI Decisions
Compliance-First Experience
I transformed dense, legally-mandated information into a clean and intuitive interface. By strategically placing country-specific requirements and disclosures within the flow, I created a friction-free experience that upholds total regulatory integrity without sacrificing modern usability.
Localised Market Engagement
Market Personalisation
I created a localised experience that automatically serves popular regional sports and offers upon sign-up. This tailored approach reduces cognitive load and ensures the product feels relevant to the user's specific market immediately.
Localised Market Engagement
Localised Market Engagement
Localised Market Engagement
Market Personalization
Market Personalisation
Market Personalisation
I created a localized experience that automatically serves popular regional sports and offers upon sign-up. This tailored approach reduces cognitive load and ensures the product feels relevant to the user's specific market immediately.
I created a localized experience that automatically serves popular regional sports and offers upon sign-up. This tailored approach reduces cognitive load and ensures the product feels relevant to the user's specific market immediately.
I created a localized experience that automatically serves popular regional sports and offers upon sign-up. This tailored approach reduces cognitive load and ensures the product feels relevant to the user's specific market immediately.
Dev Collaboration
Build-Ready Documentation
Detailed annotations and logic mapping provided to ensure accurate cross-platform implementation. These files define validation rules, component states, and accessibility markers to bridge the gap between design and production.
Dev Collaboration
Accessibility Mapping
Detailed mapping of headings, inputs, and page regions to support WCAG compliance and accessible implementation. This documentation ensures consistent semantics and predictable focus behavior, creating a seamless experience for all users.
Dev Collaboration
Interaction States
Designed skeletal loading patterns to reduce user friction during data fetching. By providing early feedback and maintaining consistent page structure, I minimized jarring shifts and created a more premium, seamless experience.
Dev Collaboration
Text Wrap & Localisation
I tested long-form text and multi-language translations to ensure layouts remain stable and usable across all regions. By optimizing how the UI handles extreme values, I eliminated layout shifts and ensured that critical information is never lost due to truncation or overflow.
Dev Collaboration
Project Organisation
I grouped screens by market to facilitate faster reviews and more accurate technical estimates. By categorizing localized requirements clearly, I ensured that developers and stakeholders could navigate the complex onboarding ecosystem with total clarity and speed.
Dev Collaboration
Build-Ready Documentation
Detailed annotations and logic mapping provided to ensure accurate cross-platform implementation. These files define validation rules, component states, and accessibility markers to bridge the gap between design and production.
Dev Collaboration
Accessibility Mapping
Detailed mapping of headings, inputs, and page regions to support WCAG compliance and accessible implementation. This documentation ensures consistent semantics and predictable focus behavior, creating a seamless experience for all users.
Dev Collaboration
Interaction States
Designed skeletal loading patterns to reduce user friction during data fetching. By providing early feedback and maintaining consistent page structure, I minimized jarring shifts and created a more premium, seamless experience.
Key UX UI Decisions
Seamless Journey Alignment
I unified the registration and deposit pathways into a single, cohesive onboarding experience. By maintaining identical interaction patterns and visual language across every step, I eliminated the "hand-off" friction between account creation and funding, reinforcing user trust and brand reliability from the start.
Dev Collaboration
Project Organisation
I grouped screens by market to facilitate faster reviews and more accurate technical estimates. By categorizing localized requirements clearly, I ensured that developers and stakeholders could navigate the complex onboarding ecosystem with total clarity and speed.
Dev Collaboration
Build-Ready Documentation
Detailed annotations and logic mapping provided to ensure accurate cross-platform implementation. These files define validation rules, component states, and accessibility markers to bridge the gap between design and production.
Dev Collaboration
Accessibility Mapping
Detailed mapping of headings, inputs, and page regions to support WCAG compliance and accessible implementation. This documentation ensures consistent semantics and predictable focus behavior, creating a seamless experience for all users.
Dev Collaboration
Interaction States
Designed skeletal loading patterns to reduce user friction during data fetching. By providing early feedback and maintaining consistent page structure, I minimized jarring shifts and created a more premium, seamless experience.
Dev Collaboration
Text Wrap & Localisation
I tested long-form text and multi-language translations to ensure layouts remain stable and usable across all regions. By optimizing how the UI handles extreme values, I eliminated layout shifts and ensured that critical information is never lost due to truncation or overflow.
Dev Collaboration
Project Organization
I grouped screens by market to facilitate faster reviews and more accurate technical estimates. By categorizing localized requirements clearly, I ensured that developers and stakeholders could navigate the complex onboarding ecosystem with total clarity and speed.
Production Experience Highlights
Production Experience Highlights
Production Experience Highlights
Final Delivery
Final Delivery
Final Delivery
A selection of live production screens showcasing how the UI dynamically adapts to global markets. These frames demonstrate the successful integration of regional sports and localised offers to drive immediate user relevance.
A selection of live production screens showcasing how the UI dynamically adapts to global markets. These frames demonstrate the successful integration of regional sports and localised offers to drive immediate user relevance.
A selection of live production screens showcasing how the UI dynamically adapts to global markets. These frames demonstrate the successful integration of regional sports and localised offers to drive immediate user relevance.
Production Experience Highlights
Final Delivery
A selection of live production screens showcasing how the UI dynamically adapts to global markets. These frames demonstrate the successful integration of regional sports and localised offers to drive immediate user relevance.
All markets
All markets
All markets
Deployed across every active bet365 territory globally
Impact
1+ yr live
Still in production as the live sign-up experience
Impact
1+ yr live
Still in production as the live sign-up experience
Impact
1+ yr live
Still in production as the live sign-up experience
Impact
2 platforms
2 platforms
2 platforms
Shipped across both app and web simultaneously
Impact
Impact & Delivery
Impact & Delivery
Impact & Delivery
Shipped across app and web, this redesign became the live onboarding experience for new customers across all active bet365 markets globally, one of the highest-traffic entry points in a product used by millions.
The move from a long-scroll single-page form to a structured, step-by-step journey reduced cognitive friction on a compliance-heavy flow, making the process feel guided and manageable regardless of regional requirements.
More than a year after launch, the design remains in production, a real-world signal that it successfully balanced brand alignment, regulatory complexity, and user experience at scale.
Shipped across app and web, this redesign became the live onboarding experience for new customers across all active bet365 markets globally, one of the highest-traffic entry points in a product used by millions.
The move from a long-scroll single-page form to a structured, step-by-step journey reduced cognitive friction on a compliance-heavy flow, making the process feel guided and manageable regardless of regional requirements.
More than a year after launch, the design remains in production, a real-world signal that it successfully balanced brand alignment, regulatory complexity, and user experience at scale.
Shipped across app and web, this redesign became the live onboarding experience for new customers across all active bet365 markets globally, one of the highest-traffic entry points in a product used by millions.
The move from a long-scroll single-page form to a structured, step-by-step journey reduced cognitive friction on a compliance-heavy flow, making the process feel guided and manageable regardless of regional requirements.
More than a year after launch, the design remains in production, a real-world signal that it successfully balanced brand alignment, regulatory complexity, and user experience at scale.