Rapidly modernize
Mobile consumer payments
Leadership, Brand, Creative Direction, UI/UX
I rallied multiple teams to tackle four messy payment products—and we crushed it, transforming them into a unified experience in just four months.
Role
Principal Product Designer
Team
Product partners, Product designers, Design operations, User research, Motion designers, Legal, Engineering, Accessibility, Brand specialists & Agency, Design systems, Content strategy
Design problem
Refactor four outdated and fragmented payment experiences to align with a new brand and bare-bones native design system.
Business goals
Improve operational efficiencies
Improve customer satisfaction
Increase LTV
Results
New interaction, design & motion patterns
Cohesive iOS & Android experiences for payments
Improved satisfaction scores
We started with outdated hybrid designs.
The new designs used a cohesive visual language and common native components.
“Sunny is an incredibly talented design leader who I’m proud to have worked with at Wells Fargo! She managed a large team of senior level design talent and handled the daily responsibilities with ease and grace.”
Here are some of the approaches I used.
1
Created alignment with cross-functional partners using product design principles
With the backing of the digital executive, I led the co-creation of product design principles. First, I facilitated a workshop with design teams across all payment products and functionalities slated for initial release. Then, we gathered input from product and engineering teams. Finally, I led a work session to educate our cross-functional partners on applying these principles throughout the development cycle.
2
Developed design sprints to explore common themes across the four payment products
To find the commonalities across the products I engaged the researcher to gather and synthesize key pain points and feedback from existing research. Together, we crafted customer outcome (JTBD) statements and narratives, exploring top pain points. We ran design sprints to solve the common problems.
3
Socialized unified wireframes
Using iterative research, we landed on an approach and evangelized it to product and engineering – using verbatims from the user research to build buy-in. We hypothesized that by creating a more familiar and usable experience we would increase customer use of deeper functionality and thus increase deposits and life-time value.
Proposed cohesive experience, across four payment products
4
Led scoping and requirement gathering sessions
Due to legacy technology constraints we pivoted to a direct conversion of existing functionality to new native components. We quickly ran up against a requirement knowledge gap, due to high turn over. To tackle this I led with curiosity and facilitated cross-functional work sessions to iteratively gather requirements and educate the teams on what we needed.
5
Created design pods and a governance system to streamline design
We had received a bare-bones mobile design kit - just three flat content screens - insufficient for our transactional payment flows. Since we had to rapidly adapt the kit to our needs and design new patterns, I assigned people to small pods and created forums for design reviews. This provided people with the autonomy to tackle detailed problems and develop new experiences while maintaining quality. This approach allowed us to rapidly collaborate with legal and accessibility partners to develop common patterns, and advocate for adoption into the wider design system.
Basic design kit example
