.png)
CMoney sells products including apps (subscriptions), courses, and lectures through its proprietary ecommerce system.
We wants to stimulate repurchase rates (e.g. someone who bought an app may also be an audience for courses), so it wants to create a points reward system. Users would get a certain percentage of reward points back after purchases, which they can use to make more purchases on CM’s ecommerce system before expiry.
We already have an existing “P points” system - used to reward users for logging into the APP or posting in the stock market leaks community.
But due to unlimited points given out in the past, we’ve lost count of total points issued, so it’s not suitable to directly use for purchase rewards.
Therefore, we want to downgrade the old P points while introducing a new purchase reward points mechanism - the focus of this design project - reward points.
2023.4~2023.5
PM*2
UIUX Designer
Web - PC, MB, Webview
Through the review of existing products, I found that the PM had miscalculated the product page, shopping cart step 2 and 3. The actual number of pages involved is about 3 times.
I discovered from Google Analytics that the number of unique visitors for an entire month showed a 3:1 ratio for the Shopping Cart (MB vs. PC) and a 5:1 ratio for the Member Center. This information was used to explain in subsequent design reviews why I chose to prioritize the MB Shopping Cart page.
I conducted a competitive analysis, examining various aspects to see if there were mainstream cashback design patterns in the market.
The answer was “none.” Major e-commerce platforms like Taobao, MoMo, and Yahoo typically added features within their existing system architecture.
Conversely, smaller market share platforms like Shopline and WACA were more comprehensive in providing functionality for diverse B2B customers, making them reference points.
Agoda (OTA) had the most prominent reward emphasis throughout the consumer journey among products I researched. From the product list, it pre-calculates the post-purchase reward to highlight its discounted price.
ShopBack, as a third-party cashback service, had the most powerful post-purchase notification messaging among cases I reviewed.
Based on my exploration, I have defined the following solutions (in order of priority):
Display Rewarding information consistently throughout the shopping process.
A redesign of the mobile version Shopping Cart’s product list layout is necessary.
In addition, fixed old CSS to improve usability issues I found.
When developing the design solutions, the reward redit split rules can greatly impact the UI - e.g. 1 order with 4 items, using 101 reward points for discount in total. Should the points be split evenly or proportionally allocated to each item? How to handle returns - partial point refund? These affect cart and account UI.
To accommodate potential mid-stream PM rule changes, my UI design adopted minor adjustments while keeping flexibility.Additionally, I created a spreadsheet with simulated product prices, recalculating with the latest reward rules, to update design mocks.
For the C-Level design review meeting, I presented the overall journey with a complete shopping flow UI diagram and interactive prototype.
Original
Redesigned
Rewards Information on Order Completion and Member Center
For the important mobile shopping cart product list redesign, I created 2 versions and conducted usability tests with 5 internal users to decide which one to proceed with.
Original
Redesigned
Final
In the delivery file, I provide a UI Spec with UI Flow consistent with the reading direction - different pages are separated vertically.
For pages with multiple states and responsive versions, I grouped specs by breakpoints so logically similar specs are explained together.
Additionally, I provided optimization parameters, objectives, and before-and-after comparison effects for CSS.
Since the reward icon is widely used, I aimed for pixel perfect execution so its shape is crisp even at 16x16.
