UI/UX          everything else        about


IMVU is a social platform where members use 3D avatars to meet new people, chat, create and play games with their friends.

Visit IMVU Web / App Store / Google Play Store


    Project Overview

    • Improve current Shop behavior by introducing a Global Shopping Cart
    • Add functionality by adding categories

    Role

    I led the design of the shop experience in 2017 for web and later iOS and Android in 2018, collaborated with other designers on shop category and cart PiP features.
    In addition, I worked closely with web/mobile engineers, QA, researcher, product owners and product managers on this project, from initial idea to execution.
    Problem

    Shoppers want to better find/discover items that they seek to buy that are unique, original, and best suited to the activity and look they have in mind. Currently, users complain about difficulty in finding what they desire in Shop.
    Creators want to gain more prominence and recognition in Shop. Skilled creators want to get their products to be viewed by shoppers that seek them.


    Old flow: no global shopping cart; flat category hierarchy; Static 2D image of product card, couldn’t try on
    Approach

    • Add a global shopping cart
    • Increase Credit Sinks through introduction of new categories.
    • Increase retention through engagement via "completing" the IMVU experience through Rooms & Furniture.
    • Simplify and consolidate the product categories that were contrived by Creators via Core in favor of IMVU-official categories. Move categorization hierarchy closer to what e-commerce sites so that users can more intuitively navigate to desired products for purchase.

    Some e-commerce sites/apps I have studied:




    Item User Story Notes
    Shop
    1. User can add items to Cart
    2. User know when item is added to Cart
    3. User can view applied filters
     
    Shopping Cart
    1. User can proceed to Checkout
    2. User can access items in Cart between sesstions and platforms
    3. User can view items in Cart
    4. User can distinguish items being considered for purchase vs. inventory items being worn
    5. User can remove one item at a time from action sheet
    6. User can batch edit the list of items*
    7. User can delete all items at once*
    8. User can preview 3D avatar wearing Cart items
    9. User can access action sheet from More option and view Product Card*
    10. User can play actions of unowned items
    11. User can undo and redo certain user events
    need better access to Wishlist
    Product Card
    1. User can buy the product
    2. User can add the item to Cart
    3. User can preview their 3D avatar wearing the item
    4. User can view detail of the product
    5. User can report the product
    6. User can gift the product to another user
    7. User can add the item to Wishlist
    Future: Reviews, Creator description
    Checkout
    1. User can purchase
    2. User knows grand total
    3. User knows if purchase was successful or not
    4. User can retry if purchase was unsuccessful
    5. User has an option to save a new look upon successful purchase
     
    Inventory Currently there is no pathway from Inventory to Shop. Create CTAs under each subcategory of Inventory pages, e.g. if I'm in Hairstyles in Inventory, post a tile to "Shop More"  
    Categories Categorization of each product runs at least three levels deep, eg Women→Clothing→Tops with each product assigned to only one category.  Future: Give exposure to common IMVU themes such as gothic, horror, furry, etc. as quicklinks, possibly in featured section
    *mobile feature

    Shop Experience Flowchart (Web)




    Responsive Grid Layout

    Pages with Feed



    Pages with Other Content


    3 column grid: 1000px <= {browserWidth} < 1160px
    4 column grid: 1160px <= {browserWidth} < 1320p
    5 column grid: 1320px <= {browserWidth}


    Lightboxes & Cards

    Design Specs





    Cart Use Cases


    Cart Drawer Animation

    Experiments



    Final Animation Effect



    Desktop & Mobile Web Variations

    Product Card



    Shopping Cart



    Web Shop Experience

     







    Shop Experience Flowchart (Mobile)



    Mobile Grid Layout

    iOS


    Android




    Shop Detail

    iOS


    Android



    Product Card

    iOS


    Android



    Shopping Cart

    iOS


    Android





    Actions Sets Interaction Experiment





    User Testing

    Round 1 : General market research of online shoppers
    Round 2 : Invision prototype test (with staff)
    Round 3 : User test with prototype (via usertesting.com)
    Round 4 : User test with QA mode (via usertesting.com)


    Mobile Shop Experience


    Result

    App has been rated as #5 Top Grossing Social in Play Store (raised from #7 in 2 months; based on a total of 20K ratings)



    Mark