Feb. 2021 - May 2021
The Mission Optimization for My Reward App
Optimized a new mission design for improving user experience when using the App.
Background
There had been some missions for users to play on My Rewards App (MR), and users could get TP points as reward when they completed those missions.
The original mission function was simply a mission board, listing a lot of mission cards, which was not allowed to click for further information.
I thought it really needs some improvements, so I designed a new mission function and made a proposal to PM.
The Original Mission Board
Some issues …
The mission cards in the homepage didn't match the cards in the mission board.
The mission records was not that useful since there were a lot of uncompleted missions in it.
The tag didn't really mean something.
There was no way for users to learn more about the mission details expect the title and content.
Goal
Allow users to find further information.
Keep the consistency of mission cards
Present useful information in Mission record page
Here is the New Design!
A Clear Mission Detail Page - The new design shows the further information for users with clear details including titl e, during time, how to play and the notice.
New Progress Bar - I replace the unrecognizable image with progress bar, which allows users to find the mission progress quickly.
UI Consistency - I let the mission cards in both homepage and mission board be the same UI style and similar content.
New Filter Logic - provide an understandable and easy-using tags, like “about to full”, “about to expire”, and some “topic series” tags, which are much more useful than the original exclusive or featured tags for users.
New Mission Record - Except keeping all the missions whether participated or not, the new design only keeps the missions users had finished to reduce user’s confusion.
The Fun Things Here Is…
Made with Protopie
The Interesting Animation
I built a series interesting animation to increase the interaction with user, like the little thumbs stickers, the get reward button.
And after you complete the mission, here’s also a super cute animation that the MR’s mascot - Bubao, will give you a “finish badge” with its little white hand holding the stamp.
Further, the Design scalability…
Diverse Ways to the Missions
With the slot (the red area) beneath the title, we could change how to play the missions by
frequency or percentage, which makes the missions have a lot of diversities.
For example, one way is to counting how many times you accomplish, anther way is how much money you’ve spent.
Complicated States
There are a lot of mission states, so it is really something complicated.
A Great Experience
On July 2021, the “Mission Detail Page” had already been launched which gets a lot of positive feedbacks form users.
And, I really had a lot of fun doing this project, and also learned a lot. I think as a designer, we should always keep the design scalability in mind, sometimes we could think something more for the future.