Portfolio Cheng Qian 2012 - 2014 MiTV & MiBox Platform, Xiaomi Technology
Redesign TV Payment Method i
Background information In Xiaomi, Mibi is the main payment method. After topped up, Mibi balance can be used to purchase services and digital products provided by Xiaomi. On TV platform, Online Video and Game Center provide paid services and products.
Requirement Functional requirements: - Link credit / debit cards to Mibi account Recently Mibi begin to support bank card payment, which includes two main modules, i.e. card management and payment procedure. Due to the pain of typing with TV remote, only payment procudure will be applied on the first stage. Cards can be linked on phone or web. - Improve payment procedure Based on user behavior analysis, shorting payment procedure will significantlly increase success rate. Non-functional requirements: - Support every module Game Center began to sell game props recently, but the current interface is unable to present game props. - Improve visual design The current design is confusing due to the poster on the left and the mixture of personal & order info on the right. Besides, users strongly require more help when they have insufficient balance, otherwise the success rate drops heavily.
Sufficient balance
Insufficient balance
Function design Card payment procedure: ① choose payment method - card or balance ② review bill info, type in PIN code ③ type in CVV2 code on the back of the card ④ type in verification code sent to the phone ⑤ success User conditions: no card & sufficient balance, no card & insufficient balance, linked 1-3 cards (maximum 3) Risk management conditions: PIN code, CVV2, verification code sent to phone
Visual & motion design Module name Product name Personal information - nickname - proďŹ le picture - Mibi balance Amount to pay Exchange rate
Selected method
Promotion info Enter PIN code Pay by card or balance Motion for selecting payment method & promotion info 1. Select pay by card
2. Selected card moves up others move down and fade out
3. Input box fades in
4. Updated price pushes old one down
5. End
Cards added, no promotion from banks
Enter PIN code
Motion: confirm the user the current method is the selected one
Enter CVV2
Risk management system controls whether this page appears or not
Processing
Enter phone verification code
Risk management system controls whether this page appears or not
Bank offers promotion
Enter PIN code
Motion clearly indicates the price is reduced
No bank account Sufficient balance
No PIN code needed (according to risk management system)
Insufficient balance
Top up with Mibi card
Processing
INPUT ERROR STYLE
Success
Online Video Section for pay-per-month & pay-per-view videos and design guidelines
Pay-per-month product description page and design guidelines
Redesign Billing Support System When trying to introduce In-App-Purchase to TV platform, we realised that the current BSS is deeply embedded with Online Video. Therefore, a universally applied BSS design was put on the table.
Payment SDK
1. Create order success
BSS
3. Payment procedure
Request to create Create temporary order
Return product info
2. Create order
Request to create
fail
Mibi
Service
Pay the order
Return success Update order status
Record the order
Request to deliver Request to deliver
Request status Create temporary order
ERROR: invalid product
Respond status Verify product info - invalid
Request to create: Device info, User ID, App info, Product info, Coupon, ExtraInfo Order info: Order ID, Device info, User ID, App info, Product info, Coupon, Extra info, Pay fee, Status
Return status as not delivered
Respond deliver success Update order status
Unable to create Request status Respond status
Return success
Respond success: Due time (for subscription), Order expire time, ExtraInfo, Signature and other parameters Request product info: Device info, User ID, App info, Product info, Coupon, ExtraInfo
CP
Request to pay
Verify product info - valid
Request product info
Respond fail
BSS
Return success
Request product info
Respond sucess
Payment SDK
Service
Success, quite payment procedure
Return product info: Pay fee, Coupon, Extra info Request to pay: Device info, User ID, Service ID, Product name, Pay fee Request to deliver: Order ID, Status, Pay fee, Pay time, Pay channel (Mibi) Respond status: Deliver status Request status: Order ID, Device info, User ID, App info Return status: Order status
Respond status
Record the order
Application Store Besides Payment, Online Video, Account and Media Player, I’m also responsible for Application Store. New features and visual design were updated on weekly basis. Rigo Design (a Chinese design agency) designed the visual style for MiTV. I design based on their work.
MiBox has a different visual & interaction style, therefore I need to provide two versions for the same feature.