Microsoft Rewards Community

The Community Page partly existed in the Microsoft Rewards dashboard, but it had no real purpose or functionality. With my product manager, I defined its framework and full end-to-end experience, then designed it to fit the dashboard.

The goal was a personal network inside Rewards to interact with, compete against and bond with, connected across every Rewards endpoint through your Microsoft account, like Xbox.

Role
UI/UX design lead
Services
UX designUI designWireframing
Client
Microsoft Bing
Team
1 product manager, 1 designer
Year
2019
The community page: a referral banner above a monthly leaderboard with a podium and badges, beside give, ask and refer, and referral progress

Outcome

The community page was shelved in development, but Refer a Friend, part of the original project, shipped. The fundraising idea grew into its own dedicated experience, the Give with Bing program.

Three features

The community was built around three ways to take part.

Refer a friend
Earn more points through referrals, with points for both people, growing a social community around Rewards.
Ask and give points
Ask your community for points, or give some, to help each other reach Rewards goals and bring a sense of sharing.
Fundraising
Before Give with Bing existed, donating points to fundraisers, an underused part of Rewards.
Refer a friend illustration
Ask and give points illustration
Fundraising illustration

Finding the direction

Fundraising was added to the page, but it didn't fit a personal leaderboard. I explored three directions to settle it, and we moved fundraising into its own experience, which became Give with Bing.

Leaderboard and fundraiser version
Leaderboard + fundraiser
Leaderboard only version
Leaderboard only
A dedicated fundraising page
Separate fundraising

First visit

Before you have a community, the page leads with two ways to start one: create a Microsoft family, or refer a friend.

The community page before you have a community: Redeem more with family, and Refer a friend and earn points
The community page pieces: first place on the leaderboard with earned badges, give, ask and refer, and the gift-sent and points-asked celebrations
The community page

Compete, give and ask

A monthly leaderboard of your friends, with a podium for the top three and the badges they've earned. Giving, asking for and referring points sit alongside.

Giving and asking for points end on a small celebration, so sharing feels like a gift rather than a transaction.

Refer a friend: the Refer and Earn card, referral progress with completed steps, the points breakdown, and a celebration banner
Refer a friend

The part that shipped

Invite a friend, then follow your progress as they join. Each milestone gets a banner to celebrate it.

The friend you refer gets a welcome of their own: a few quick steps that fill a 100 point punch card.

You earned +300 points for referring your friends
Your friend just switched to Bing. You earned 500 points
Congrats! 3 friends switched to Bing! You get 5000 points
You earned +250 points for your friend reaching Level 2
Way to go! You earned 5000 points
Welcome to Microsoft Rewards, 0 of 100 points1
You got it, 25 of 100 points2
You got it, 50 of 100 points3
Trick question, 75 of 100 points4
Congrats, 100 points earned5

Phone and tablet

The Rewards dashboard is responsive, so every screen adapts down to phone size.

The community page on a phone
The community page on a tablet
Asking a friend for points on a phone