Exit loader messaging
Year
2021
Role
UX/ UI Designer
Scope
Phase 1: Optimization (Short-term) :
General messaging in the spinner for all segments of interest
Phase 2: Optimization :
Multiple messages in the spinner for complex populations of interest (i.g. CPA, Crypto, 3DS Europe) ; UI changes of spinner itself
Team
Checkout Team at PayPal
Requirements (Phase 1)
- A message must be displayed (either through text, graphics, or animation) for all "Pay now" and "Continue" experiences.
- Message should explain redirection to the merchant page as well as replace the deleted message off the sticky footer (see Background).
What's Current Flow?
First of all, I needed to think about the current flow situation and check the goals to see how can I update and level up this design.
- It was for placeholder
- Not containing 'thank you' message
- Lock Icon need to be replace (doesn't make sense)
- Icon is thinner than spinner width (Design)
My Thoughts
1. Loading latency - need to think about the content length
2. Overall Flow - check overall flows so user can feel seamlessness
Collaborating with other team
Since this project is also related to PayPal UI and Content, I needed to work closely with UI team and content team.
I had several meeting with senior design from UI team and got feedback that we need to make the icon PayPal-centric and global-friendly. Since we had a tight deadline, UI team cannot work on the icon, so I make several proposal icons and show them to get approval to use it.
also, I also worked with content team for this project since we wanted to replace the content as well.
Usually it took couple of hours but if the content doesn't match, we needed to discuss about it for better outcome. Before the review, content manager and I pick 3-4 options and bring it to the review meeting to confirm the final ones.
Seasonal Icon Exploratino
Extended to this project, we are decided to have the seasonal icon on exit loader messaging this year. Since it was the first time to display seasonal icons, I needed to have several meetings with the PayPal UI team.
Same non-seasonal icon, I explored several seasonal icons for Thanksgiving, Halloween, Christmas, and New Year, and got approval from UI team before the design review.
Final Design
After gets approval from review meeting, need to prepare hand-off file to engineer.
Of course, need check frequently during the build process and also final review before publish it.