Overview
Generic or personal badging/notifications for price movement in Windows fly-out prong.
Team
- Kari Everson (UI/UX Design + Product Design)
- Ji Lee (UI/UX Design Support)
- Ryuichi Hirano (Principal Design Management)
- Yanqiu Chen (Senior Program Manager Finance)
My Roles
Leveraging Designs from Start Team, Wireframing, Prototyping, User Accessibility, Design System
The Problem
There is no system in place for Windows flout prong for receiving finance price movement notifications.
The Solution
Leveraging badging design system from Microsoft Start Team. Taking the designs and just Finance-ifying them.
Badging for Price Movement Scenarios
Stock/Indices Price Movement Badging
When the price change of some popular stock (e.g., Apple) or major index (e.g., S&P 500) reaches some threshold, send badging to all users. Clicking on the badging lands on the stock L2 page or Index L2 page.
Currency Pair Price Movement Badging
When the currency pair fluctuates and reaches a certain threshold, send badging to all users. Clicking on the badging lands on the currency list with left rail.
Crypto Price Movement Badging
When the representative crypto currency fluctuates and reaches a certain threshold, send badging to all users. Clicking on the badging lands on the crypto list with left rail.
Finance Banner Badging in Windows Flout
Finance Banner Badging System
Tools and Resources
Figma, Microsoft Teams