Conversational UI
Paperless Enrollment
My Role & Responsibilities
My Role
UI Designer
Tools
Sketch; Invision; Jira; Freehand; Outlook; Sketch Measure
My Responsibilities
Owned the design strategy for paperless enrollment, creating responsive landing pages that simplified opt-in, balanced compliance requirements, and provided meaningful space for marketing. Optimized the white-label experience to seamlessly support all 35 partner brands and improve user adoption.
My Team
UI Designer; UX Designer; Copy Writer; Product Manager; Project Manager
Timeline
2 sprints; each 1 week long
Project Goal –
Give paperless enrollment a place to live.
Original Challenge
Citi’s original credit card application was long and cumbersome, leading to a high abandonment rate.
The conversational UI experience addressed this issue
by reorganizing the process into an engaging conversation, guiding users through the application quickly and intuitively.
Original Application - Desktop
Mobile
Mobile - Wireframes
Final Results
Simple instructions were added and real-time feedback to provide a sense of progression.
Conversion rates increased.
A review step was introduced to allow users to double-check their information and reduce errors that could lead to applications being pending or declined.
Next Steps?
Users are shopping within minutes, but let's make that shopping 100% paperless within minutes.
Before
After
Had we simply housed all of the information in chat bubbles as business-as-usual, the user would have been bombarded with a marketing message, a greeting from the virtual assistant, and a bunch of legal disclosures.
Talk about getting triple-texted!
The solution was to create a dedicated landing page instead of directing users into a conversation. This provided space to seamlessly integrate marketing, legal disclosures, and paperless enrollment, offering a more organized, user-friendly experience without overwhelming users with multiple messages.
Marketing Integration
This solution offers flexibility for 35+ partner brands, enabling seamless swaps of branding, marketing content, and assets without disrupting the user experience. By keeping the design simple and optimizing for height, I made it easy to update card art and marketing copy efficiently.
Wins/Accomplishments
Reduced the time to apply across 35+ partner brands.
Increased conversion rates, with more users applying for co-branded cards than basic cards.
Improved overall design, boosting customer satisfaction and confidence in applying for a credit card.
Paperless Enrollment
This solution streamlined the paperless enrollment process for 35+ partner brands, providing a flexible design that allowed for seamless integration of branding and necessary disclosures without disrupting the user experience. By simplifying the layout and optimizing for height, I ensured the process remained efficient and user-friendly, allowing easy updates to content while maintaining clarity.
Wins/Accomplishments
Achieved 100% paperless enrollment adoption.
Presented necessary disclosures in a way that didn’t distract from the main task—applying for a credit card.
Integrated visual breadcrumbs to give users a preview of the conversational flow they would experience after starting the application.
AdBlocked Page
We also accounted for users with ad blockers enabled, which would remove any marketing content from the landing page. To address this, we created a generic version of the page that would populate in place of the marketing content.
