Banner Ads
Celebrate with Rewards
Use points to redeem gifts you care about by heading to the redeem page
Redeem with points
MICROSOFT REWARDS
Refreshing the Microsoft Rewards program
I animated 100+ icons and illustrations, drove interactive animation adoption, and defined format and interactions requirements for the Microsoft rewards experience.
01.ANIMATIONS
A dashboard designed to showcase animations
Microsoft Rewards is a loyalty program which rewards users with redeemable points for interacting with cards that drive Bing's search engagement.
The dashboard page was designed with animations in mind and was made to draw a user's attention and drive interaction with different cards and buttons.
The dashboard page was designed with animations in mind and was made to draw a user's attention and drive interaction with different cards and buttons.
Banner Ads
Dashboard Quizes
First Run Experience
Users are presented with animations the moment they create their accounts and land on their initial walkthrough.
The animations set the energy and mood for the experience and show various Microsoft services without blatently feeling like advertisements.
The animations set the energy and mood for the experience and show various Microsoft services without blatently feeling like advertisements.
Status Page
The success and engagement from the dashboard page drove sub-pages to adopt a similar animation centric approach.
The status page showcasing achievement badges also utilized animations to drive a sense of accomplishment to motivate sustained long term traffic.
The status page showcasing achievement badges also utilized animations to drive a sense of accomplishment to motivate sustained long term traffic.
Daily Streaks
Donation Hearts
Lifetime Points
02.Old Page Design
Adding delight to a utilitarian experience
The original Rewards page was bare bones and leaned heavily on static glyphs to draw user attention.
I animated the glyphs and wrote the code for the animations and unique interactions. That work became the catalyst to driving a redesign of the complete experience seen above.
I animated the glyphs and wrote the code for the animations and unique interactions. That work became the catalyst to driving a redesign of the complete experience seen above.
03.ILLUSTRATION GUIDANCE
Reducing detail and colors
I also developed the style and colors of the illustrations.
Reducing the finer details and color palette of each illustration ensured clarity in smaller sizes, and drove styling consistency when production was scaled to external illustration teams.
Old Palette
Reduced Palette
04.INTERACTION REQUIREMENTS
Interactions that complement animations
Animations can hinder a user experience if implemented without rules. I defined playback and interaction rules so animations would be eye catching but never intrusive.
Hover Trigger
Trigger on hover and never on click since animations are sometimes hyperlinks.
Complete Playback
Play through completely before user can trigger animation playback again.
Seamless Looping
Seamlessly loop when animations are triggered again.
05.IMPLEMENTATION REQUIREMENTS
Criterias when choosing file formats
Several factors influence the implementation of how animations are played, displayed, and interacted with. Lottie met all those criterias.
Playback
Cursor states and other elements on the page need to be able to be tied to playback.
Vector
Animation needs be able to scale to different sizes and display without pixelation.
Background
Animation backgrounds should be able to be set as transparent for page background colors.
Dependencies
File size and dependencies should be small to aid with load times and low performance devices.
Choosing the right file format
Comparing the playback and interaction requirements to common file types used to implement web animations narrowed our choice down to using Lottie.
MP4
Playback Controls
Yes
Preserves Vector
No
Background Transparency
No
Dependencies
No
GIF
Playback Controls
No
Preserves Vector
No
Background Transparency
Kinda
Dependencies
No
Sprite
Playback Controls
Yes
Preserves Vector
No
Background Transparency
Yes
Dependencies
Yes
Lottie*
Playback Controls
Yes
Preserves Vector
Yes
Background Transparency
Yes
Dependencies
Yes
Other Lottie advantages
Beyond playback and interaction benefits, Lottie provides workflow advantages making the design > motion > dev process fast and frictionless.
Workflow
Lottie makes adding animations as easy as adding images and videos, making hand-off and implementation a straight forward process.
Production Time
Lottie assets are exported entirely out of Adobe After Effects, meaning iterating on animation falls squarely on designers.
Scalability
Producing Lottie animations at scale is also easy as long as teams have motion designers who know After Effects, an industry standard.
Select Work
Various work from product motion design to motion graphics
Windows 11
UI motion and animation language, system, implementation, and documentation for Microsoft's OS.
Microsoft Accounts
Animation assets and interaction guidance for Microsoft's user account, privacy, and family experiences.
Facebook Home
UI animations and process for broadcast spots, and in-store device product demos.
Misc Animations
Broadcast spots, explainer videos, end tags, logos, music videos, and more.