Xoxoday stores is now rebranded as Xoxoday Plum and has undergone a complete design and usability transformation in order to create a better and faster employee rewards platform. UX flows and UI of the previous stores interface has been revamped to render a much smoother user experience. All of these changes were done keeping the previous capabilities of the Xoxoday stores intact. The new platform is built as a progressive web app (PWA) that follows a mobile-first approach to ensure the users have an faster and smoother experience.
The layout, colors, and fonts of the new Xoxoday Plum web interface provides an exciting and highly functional user experience. Bright purple, the brand color of Xoxoday Plum, is now used across the product. Page navigation and discovery of content is designed to be seamless and quick. (See Fig 1)
a. User Profile
The profile of the user now displays all the important user information organised across tabs, namely, Profile, Your Orders, Xoxo points and Xoxo vouchers (see Fig 2).The Profile tab lists the name, phone, email id, balance of the empuls points and the balance of Xoxo points. The Your orders tab lists the previous transaction made by the user. The Xoxo points tab lists the credit and debit history of Xoxo points. The Xoxo voucher tab lists all the vouchers that have been received by the user.
b. Login/Logout functionality and SSO
The login page has been redesigned with an attractive UI and provides an option of Single Sign On. (See Fig 3)
The Plum page header now gives the user the option to explore experience, voucher or perk of a country of their choice. Selecting a country filter displays the experiences, gift voucher and perks that are valid only in that country. (See Fig 4)
Categories are better accessible in the new design through a drop down and a header menu on the home page. Five categories in Experiences, 24 categories in Gift Vouchers and 8 categories in Perks are well displayed. (See Fig 5)
e. Search bar
The search bar now gives search suggestions that provide details of the experience name and category. This enables users to quickly access their preferred result and complete the purchase. (See Fig 6)
II. Experiences Page Search Filters
The experiences page now allows filtering results by the city, category, price range and date range of booking of the experience. The results can also be sorted by most popular or by price. Tags of the selected filter are displayed below the header. This helps the user view the selections he/she has made.
III. Gift Vouchers Page Search Filters
The gift vouchers page now allows filtering results by the category of the gift voucher. The results can also be sorted by most recent or name. Tags of the selected filter are displayed below the header- helping the user to quickly figure out the selections he/she has made.
IV. Perks Page Search Filters
The perks page at present allows filtering results by category and brand of the perk.
V. Experiences Product Page
The Experiences product page provides better navigation for the user via a section shortcut header. Every Experience page has a visually-rich summary that consists of images, description, location, FAQs and booking sections.
VI. Gift Vouchers Product Page
The Gift Vouchers product page now provides a complete description of the gift voucher. Every Gift Voucher page has a visually-rich summary that consists of description, terms & conditions, How to use and booking sections.
VII. Checkout Page
The UI of the Plum Checkout page has been revamped to provide the user the complete clarity of their transactions. The page provides item-wise transaction details and also gives the order summary that details the discounts and other charges. (See Fig 12)
VII. Payment page
The new Plum payment page allows the user to enter Payment Options such as - entering the gift card details and additional payment methods such as Credit/Debit card, Net Banking, and Paypal.
IX. Order History
The order history page now shows the details of the previous transactions on a compact layout. It lists the Order ID, Type, Name, Order date, Amount paid and Status of the order in the snippet. Clicking on ‘View details’ displays the complete invoice of the transaction.