Redesigning Access Control for Embedded Authentication
TeamApt ACS (Access Control Server) UI was originally designed for full-page browser experiences. As partners began embedding the authentication screen within SDKs and checkout iFrames, the existing interface struggled to adapt to smaller viewports.
I led the redesign of the OTP authentication experience to improve information visibility, simplify the interface, and make transaction verification easier within constrained embedded environments.
The goal was to ensure customers could understand the authentication request and complete their transactions without unnecessary friction.
Reported outcomes
20% → 100%
essential information visibility
+85%
OTP validation improvement
The Challenge
The existing experience was built for a larger screen, not the limited space available within an embedded checkout.
When rendered inside Monnify Checkout, critical information was cut off, the interface required internal scrolling, and the OTP input and supporting actions were not fully accessible within the visible frame.
This created friction at a particularly sensitive point in the payment journey: transaction authentication.
How might we make OTP authentication clear, accessible, and easy to complete within a constrained iframe without compromising trust or security?
Problem Reframing
The initial request was to make the ACS UI responsive and compatible with SDK-based iFrames. I reframed the problem around the customer’s ability to complete authentication successfully.
Instead of simply shrinking the existing interface, I focused on three questions:
Can customers see everything they need?
Can they immediately understand what to do?
Can they complete authentication without searching for actions or scrolling?
This shifted the design direction from adapting a full-page interface to creating an iframe-first authentication experience.
Research & Insights
I assessed the existing UI within its actual checkout context, focusing on content visibility, information hierarchy, interaction clarity, and the constraints of the embedded viewport.
Key insight
Visibility drives usability. If essential information falls outside the frame, customers cannot act on it confidently.
Every element competes for space. Unnecessary content and excessive spacing make the authentication task harder to complete.
The next step must be obvious. Customers need clear instructions, a recognisable OTP field, and an unmistakable confirmation action.
Embedded experiences require different design decisions. A layout that works on a full browser page may fail inside a smaller container.
AUDITING THE EXISTING UI
The audit revealed that the problem extended beyond responsiveness.
The key finding:
The interface needed to be reorganised around the authentication task, not simply resized.
Low-Fidelity Exploration
I explored two layout directions to understand how best to organise the ACS challenge within a constrained iframe. Both explored the placement of the issuer logo, OTP instructions, input field, and supporting actions, but differed in their alignment and use of available space.
Design decision
The exploration focused on making better use of the limited iframe space while maintaining a clear visual hierarchy and keeping essential authentication information accessible. Visual clusters such as the customer’s name, merchant details, and transaction amount were removed to reduce clutter and keep the focus on OTP verification.
The bank logo was retained to reinforce trust and reassure customers that their bank was involved in securing the transaction.
The Redesign
The final design removed unnecessary complexity and prioritised the elements customers needed to authenticate their transactions.
Option A was the prefered option, this is because it followed a familiar layout and leveraged the F-pattern scanning behaviour commonly associated with online interfaces. This made the content easier to scan, established a more intuitive flow, and provided a clear foundation for the high-fidelity redesign and subsequent usability testing.
what changed
A focused authentication area
The OTP challenge became the primary focus instead of competing with the broader checkout interface.
Clearer instructions
The message explained what customers needed to do next: check their messages for the OTP and enter it.
A more prominent input field
The OTP field was clearly labelled and easy to identify.
Distinct primary and secondary actions
Proceed was established as the primary action, while Resend OTP and Dismiss remained identifiable alternatives.
More intentional use of space
The layout reduced unnecessary spacing and prioritised essential content to support the constrained viewport.
Responsive Design & Embedded Behaviour
The redesign was guided by an iframe-first approach, with a target minimum height of approximately 280px and responsive width.
The layout needed to preserve the core authentication journey as the available space changed.
Essential instructions and controls retained priority.
Optional issuer branding could be omitted when space was insufficient.
Content and spacing were adapted to reduce clipping and avoid external scrolling.
The same core authentication hierarchy was maintained across supported embedding environments.
Design Evaluation & Validation
Rather than relying on visual preference alone, I compared the existing ACS interface with the redesigned experience to assess improvements in layout, information hierarchy, visibility, and usability within the constrained iframe.
What I evaluated
Information visibility: Could customers see the essential authentication information without scrolling?
Visual hierarchy: Were the OTP instructions, input field, and primary action easy to identify?
Content efficiency: Did the layout eliminate unnecessary information and make better use of the available space?
Action clarity: Were Proceed, Resend OTP, and Dismiss easy to locate?
The comparison informed the selection of the redesigned, task-focused layout. The final design prioritised essential authentication content while retaining the bank's logo as a trust signal.
Rather than relying on visual preference alone, I compared the existing ACS interface with the redesigned experience to assess improvements in layout, information hierarchy, visibility, and usability within the constrained iframe.
key Improvement
Removed non-essential content to reduce visual clutter.
Improved information hierarchy to prioritise OTP verification.
Optimised the layout for constrained iframe dimensions.
Introduced a clearer, more prominent OTP input field.
Strengthened CTA hierarchy with a prominent Proceed button.
Improved access to Cancel and Resend OTP actions.
Retained issuer branding to reinforce trust and security.
Impact & Results
The redesign delivered improvements in essential information visibility and OTP validation performance, combining design evaluation with real-world transaction data.
ESSENTIAL INFORMATION VISIBILITY
20% → 100%
All required authentication information became visible within the redesigned interface, compared with the previous 20% visibility measure.
OTP VALIDATION
+85%
Improvement in OTP validation, measured using actual transaction data following the redesign.
What this meant for the product
Better information access: Customers could view the essential details required to make their authentication decision.
A more focused experience: Removing unnecessary content gave greater prominence to OTP entry and the available actions.
Better embedded usability: The new layout was designed around iframe constraints rather than full-page assumptions.
Redesigning Access Control for Embedded Authentication
TeamApt ACS (Access Control Server) UI was originally designed for full-page browser experiences. As partners began embedding the authentication screen within SDKs and checkout iFrames, the existing interface struggled to adapt to smaller viewports.
I led the redesign of the OTP authentication experience to improve information visibility, simplify the interface, and make transaction verification easier within constrained embedded environments.
The goal was to ensure customers could understand the authentication request and complete their transactions without unnecessary friction.
Reported outcomes
20% → 100%
essential information visibility
+85%
OTP validation improvement
The Challenge
The existing experience was built for a larger screen, not the limited space available within an embedded checkout.
When rendered inside Monnify Checkout, critical information was cut off, the interface required internal scrolling, and the OTP input and supporting actions were not fully accessible within the visible frame.
This created friction at a particularly sensitive point in the payment journey: transaction authentication.
How might we make OTP authentication clear, accessible, and easy to complete within a constrained iframe without compromising trust or security?
Problem Reframing
The initial request was to make the ACS UI responsive and compatible with SDK-based iFrames. I reframed the problem around the customer’s ability to complete authentication successfully.
Instead of simply shrinking the existing interface, I focused on three questions:
Can customers see everything they need?
Can they immediately understand what to do?
Can they complete authentication without searching for actions or scrolling?
This shifted the design direction from adapting a full-page interface to creating an iframe-first authentication experience.
Research & Insights
I assessed the existing UI within its actual checkout context, focusing on content visibility, information hierarchy, interaction clarity, and the constraints of the embedded viewport.
Key insight
Visibility drives usability. If essential information falls outside the frame, customers cannot act on it confidently.
Every element competes for space. Unnecessary content and excessive spacing make the authentication task harder to complete.
The next step must be obvious. Customers need clear instructions, a recognisable OTP field, and an unmistakable confirmation action.
Embedded experiences require different design decisions. A layout that works on a full browser page may fail inside a smaller container.
AUDITING THE EXISTING UI
The audit revealed that the problem extended beyond responsiveness.
The key finding:
The interface needed to be reorganised around the authentication task, not simply resized.
Low-Fidelity Exploration
I explored two layout directions to understand how best to organise the ACS challenge within a constrained iframe. Both explored the placement of the issuer logo, OTP instructions, input field, and supporting actions, but differed in their alignment and use of available space.
Design decision
The exploration focused on making better use of the limited iframe space while maintaining a clear visual hierarchy and keeping essential authentication information accessible. Visual clusters such as the customer’s name, merchant details, and transaction amount were removed to reduce clutter and keep the focus on OTP verification.
The bank logo was retained to reinforce trust and reassure customers that their bank was involved in securing the transaction.
The Redesign
The final design removed unnecessary complexity and prioritised the elements customers needed to authenticate their transactions.
Option A was the prefered option, this is because it followed a familiar layout and leveraged the F-pattern scanning behaviour commonly associated with online interfaces. This made the content easier to scan, established a more intuitive flow, and provided a clear foundation for the high-fidelity redesign and subsequent usability testing.
what changed
A focused authentication area
The OTP challenge became the primary focus instead of competing with the broader checkout interface.
Clearer instructions
The message explained what customers needed to do next: check their messages for the OTP and enter it.
A more prominent input field
The OTP field was clearly labelled and easy to identify.
Distinct primary and secondary actions
Proceed was established as the primary action, while Resend OTP and Dismiss remained identifiable alternatives.
More intentional use of space
The layout reduced unnecessary spacing and prioritised essential content to support the constrained viewport.
Responsive Design & Embedded Behaviour
The redesign was guided by an iframe-first approach, with a target minimum height of approximately 280px and responsive width.
The layout needed to preserve the core authentication journey as the available space changed.
Essential instructions and controls retained priority.
Optional issuer branding could be omitted when space was insufficient.
Content and spacing were adapted to reduce clipping and avoid external scrolling.
The same core authentication hierarchy was maintained across supported embedding environments.
Design Evaluation & Validation
Rather than relying on visual preference alone, I compared the existing ACS interface with the redesigned experience to assess improvements in layout, information hierarchy, visibility, and usability within the constrained iframe.
What I evaluated
Information visibility: Could customers see the essential authentication information without scrolling?
Visual hierarchy: Were the OTP instructions, input field, and primary action easy to identify?
Content efficiency: Did the layout eliminate unnecessary information and make better use of the available space?
Action clarity: Were Proceed, Resend OTP, and Dismiss easy to locate?
The comparison informed the selection of the redesigned, task-focused layout. The final design prioritised essential authentication content while retaining the bank's logo as a trust signal.
Rather than relying on visual preference alone, I compared the existing ACS interface with the redesigned experience to assess improvements in layout, information hierarchy, visibility, and usability within the constrained iframe.
key Improvement
Removed non-essential content to reduce visual clutter.
Improved information hierarchy to prioritise OTP verification.
Optimised the layout for constrained iframe dimensions.
Introduced a clearer, more prominent OTP input field.
Strengthened CTA hierarchy with a prominent Proceed button.
Improved access to Cancel and Resend OTP actions.
Retained issuer branding to reinforce trust and security.
Impact & Results
The redesign delivered improvements in essential information visibility and OTP validation performance, combining design evaluation with real-world transaction data.
ESSENTIAL INFORMATION VISIBILITY
20% → 100%
All required authentication information became visible within the redesigned interface, compared with the previous 20% visibility measure.
OTP VALIDATION
+85%
Improvement in OTP validation, measured using actual transaction data following the redesign.
What this meant for the product
Better information access: Customers could view the essential details required to make their authentication decision.
A more focused experience: Removing unnecessary content gave greater prominence to OTP entry and the available actions.
Better embedded usability: The new layout was designed around iframe constraints rather than full-page assumptions.
Redesigning Access Control for Embedded Authentication
TeamApt ACS (Access Control Server) UI was originally designed for full-page browser experiences. As partners began embedding the authentication screen within SDKs and checkout iFrames, the existing interface struggled to adapt to smaller viewports.
I led the redesign of the OTP authentication experience to improve information visibility, simplify the interface, and make transaction verification easier within constrained embedded environments.
The goal was to ensure customers could understand the authentication request and complete their transactions without unnecessary friction.
Reported outcomes
20% → 100%
essential information visibility
+85%
OTP validation improvement
The Challenge
The existing experience was built for a larger screen, not the limited space available within an embedded checkout.
When rendered inside Monnify Checkout, critical information was cut off, the interface required internal scrolling, and the OTP input and supporting actions were not fully accessible within the visible frame.
This created friction at a particularly sensitive point in the payment journey: transaction authentication.
How might we make OTP authentication clear, accessible, and easy to complete within a constrained iframe without compromising trust or security?
Problem Reframing
The initial request was to make the ACS UI responsive and compatible with SDK-based iFrames. I reframed the problem around the customer’s ability to complete authentication successfully.
Instead of simply shrinking the existing interface, I focused on three questions:
Can customers see everything they need?
Can they immediately understand what to do?
Can they complete authentication without searching for actions or scrolling?
This shifted the design direction from adapting a full-page interface to creating an iframe-first authentication experience.
Research & Insights
I assessed the existing UI within its actual checkout context, focusing on content visibility, information hierarchy, interaction clarity, and the constraints of the embedded viewport.
Key insight
Visibility drives usability. If essential information falls outside the frame, customers cannot act on it confidently.
Every element competes for space. Unnecessary content and excessive spacing make the authentication task harder to complete.
The next step must be obvious. Customers need clear instructions, a recognisable OTP field, and an unmistakable confirmation action.
Embedded experiences require different design decisions. A layout that works on a full browser page may fail inside a smaller container.
AUDITING THE EXISTING UI
The audit revealed that the problem extended beyond responsiveness.
The key finding:
The interface needed to be reorganised around the authentication task, not simply resized.
Low-Fidelity Exploration
I explored two layout directions to understand how best to organise the ACS challenge within a constrained iframe. Both explored the placement of the issuer logo, OTP instructions, input field, and supporting actions, but differed in their alignment and use of available space.
Design decision
The exploration focused on making better use of the limited iframe space while maintaining a clear visual hierarchy and keeping essential authentication information accessible. Visual clusters such as the customer’s name, merchant details, and transaction amount were removed to reduce clutter and keep the focus on OTP verification.
The bank logo was retained to reinforce trust and reassure customers that their bank was involved in securing the transaction.
The Redesign
The final design removed unnecessary complexity and prioritised the elements customers needed to authenticate their transactions.
Option A was the prefered option, this is because it followed a familiar layout and leveraged the F-pattern scanning behaviour commonly associated with online interfaces. This made the content easier to scan, established a more intuitive flow, and provided a clear foundation for the high-fidelity redesign and subsequent usability testing.
what changed
A focused authentication area
The OTP challenge became the primary focus instead of competing with the broader checkout interface.
Clearer instructions
The message explained what customers needed to do next: check their messages for the OTP and enter it.
A more prominent input field
The OTP field was clearly labelled and easy to identify.
Distinct primary and secondary actions
Proceed was established as the primary action, while Resend OTP and Dismiss remained identifiable alternatives.
More intentional use of space
The layout reduced unnecessary spacing and prioritised essential content to support the constrained viewport.
Responsive Design & Embedded Behaviour
The redesign was guided by an iframe-first approach, with a target minimum height of approximately 280px and responsive width.
The layout needed to preserve the core authentication journey as the available space changed.
Essential instructions and controls retained priority.
Optional issuer branding could be omitted when space was insufficient.
Content and spacing were adapted to reduce clipping and avoid external scrolling.
The same core authentication hierarchy was maintained across supported embedding environments.
Design Evaluation & Validation
Rather than relying on visual preference alone, I compared the existing ACS interface with the redesigned experience to assess improvements in layout, information hierarchy, visibility, and usability within the constrained iframe.
What I evaluated
Information visibility: Could customers see the essential authentication information without scrolling?
Visual hierarchy: Were the OTP instructions, input field, and primary action easy to identify?
Content efficiency: Did the layout eliminate unnecessary information and make better use of the available space?
Action clarity: Were Proceed, Resend OTP, and Dismiss easy to locate?
The comparison informed the selection of the redesigned, task-focused layout. The final design prioritised essential authentication content while retaining the bank's logo as a trust signal.
Rather than relying on visual preference alone, I compared the existing ACS interface with the redesigned experience to assess improvements in layout, information hierarchy, visibility, and usability within the constrained iframe.
key Improvement
Removed non-essential content to reduce visual clutter.
Improved information hierarchy to prioritise OTP verification.
Optimised the layout for constrained iframe dimensions.
Introduced a clearer, more prominent OTP input field.
Strengthened CTA hierarchy with a prominent Proceed button.
Improved access to Cancel and Resend OTP actions.
Retained issuer branding to reinforce trust and security.
Impact & Results
The redesign delivered improvements in essential information visibility and OTP validation performance, combining design evaluation with real-world transaction data.
ESSENTIAL INFORMATION VISIBILITY
20% → 100%
All required authentication information became visible within the redesigned interface, compared with the previous 20% visibility measure.
OTP VALIDATION
+85%
Improvement in OTP validation, measured using actual transaction data following the redesign.
What this meant for the product
Better information access: Customers could view the essential details required to make their authentication decision.
A more focused experience: Removing unnecessary content gave greater prominence to OTP entry and the available actions.
Better embedded usability: The new layout was designed around iframe constraints rather than full-page assumptions.