IMVU DESIGN SYSTEM

Mobile [Link to AppStore / Google Play Store ]

Web : imvu.com

IMVU is an immersive, visually-rich 3D avatar based social network that delights users with visceral connections that people normally experience in the real world.

I lead a massive redesign effort to transform an outdated PC application into a modern, consistent and beautiful multi-platform product line (iOS, Android, Mobile and Desktop Web) that was ranked #7 in Top Grossing Apps in the Social Networking category on App Store.

IMVU DESIGN STYLE GUIDE

Worked on creating consistent visual language for cross platform, Web, mobile web, iOS and Android.

Created UI Library on the web.

UI LIBRARY

Based on the style guide, created UI library with FrontEnd developer so any engineer can grab and use the UI widget.

Additional IMVU Web Screens

IMVU MobileWeb

IMVU Mobile Web (www.imvu.com *in mobile browser) 2014-Current

UX, UI Design

DESIGN PROBLEMS 

Bring 10 years old complicated product into simple Mobile Web App.

Need come up with MVP and choose what are the key experiences are.

Mobile Web App has a lot of limitations.

one of them being not supporting 3D, but we should provide similar core experiences.

DESIGN SOLUTION

Customization and Chat are the key features that need to focus on.

Simplify as much as we can.

Lightweight as much as we can.

SUCCESS METRIC

Satisfy the expectations of existing IMVU 2Go customers

Deliver a product that can capture the 5-10% (and growing) paid traffic and convert them to customers

Create the foundation for products that will eventually monetize

DESIGN PROCESS

1. Lock down the list of feature set for initial MVP (Article on this Project's MVP )

2. Come up with user stories to get clarity on what we need to build.

3. Market research on other chat apps. 

4. User research on current existing features to get feedback from users.

5. Wireframe the flows

6. Visual explorations 

7. Graphic user interface designs with iterations.

8. Concept testing with mockups.

9. Kick off with engineers and working on implementations.

10. Before go live, user testing with QA mode. (usertesting.com)

CHAT EXPLORATIONS 

- Should be easy to communicate in mobile but avatar should be well integrated in chat screen as well.

- Avatar can't be 3D (*SSR)

- Users need to recognize which avatar is talking

- There should be a way to learn about the person you are talking and able to be friend with them.

PRODUCT DESIGN STYLE PROGRESS

RESULT

• Shipped the product that people love ( A lot of good feedback)
• Built design and product foundation for Native mobile product.
• High Revenue Growth

SalesForce Help Center Renewal

https://help.imvu.com

UX Design and Design direction on UI (UI design by Jin Yu)

Used worked with Sugar CRM and switched over to SALESFORCE. Worked with Salesforce consulting company and Salesforce Specialist to design renewal of help center. Also redesign the phpbb forum pages to Modern community page.

Design Problems

First time designing for help center and integrate Salesforce.

Because it's first time, didn't know about Salesforce infrastructure limitation and restrictions. 

(Also limitation of our product itself limitation regard the integration)

Once know about it's own restriction, still hard to design around it.

There was no specific product and feature requirement to redesign of the help center so had to do a lot research on the other product help page to get the base line.

(Facebook help page was the closest what we trying to do. With two column layout)

Redesigned IMVU Help Center Home

Previous Help Center Home

Previous Discussions page (phpbb forum)

Redesign Stage 1

Trying to leverage IMVU web product UI as much as I can so user can have consistent experience as much as possible.

Redesign Stage 2

Frond end was paused middle of it - Didn't fully accomplish what design was trying to do.

Launch as it is but getting more feedback from users and make some update > state 2

This time better understanding of restrictions

Challenge - Front end dev had to change from JQuary and backbone base frontend skill to Angular so it was slow progress also commit issue with salesforce infrastructure )

Knowledge Article Landing page - scrolled up, minimized header

Knowledge Article List

Knowledge Article Detail

Discussions Page

Mobile Web Layout

Responsive layout. supports 1440 to 330px width view

KIMOJI

Worked on Kim Kardashian West's Official KIMOJI App Emoticon Design. Link to App Store

EMOJI CREATION

- Articles on USA Today about "The 8 most important new "Kimojis"

- Best 4 Kimojis from the more than 50 Kmojis I created

FIND A STYLE JUST LIKE KIM!

Kim wanted to find the avatar that looks just like her and stylized as she did.

IMVU MOBILE  [Link to AppStore / Google Play Store ]

PROJECT - iOS DASHBOARD

Design Direction on UX, UI Design (UX by Andy Freeman / UI by Tian Liu)

DESIGN PROBLEMS

IMVU offers many different features like Dress up, Shop, chat, Meesenge, Feed, Friends, earn credit and etc.

However, based on data point of the retention number and user testing, new users don’t know what product offers and don’t know what to do.

Design the experience that users can understand what they can do after sign up but not get overwhelmed. 

USER TESTING

Prototype testing with free-play and task base.

RESULT

5% retention growth on 1 Day retention after launch the Dashboard

PROJECT -iOS 3D PHOTOBOOTH

UX, UI Design

It’s a posting tool that users can create a contents to IMVU feed

DESIGN PROBLEMS

First times users who just completed the registration can try the core IMVU experience with in 3 min.

It includes dress up avatars, control the 3D chatroom experience, taking photo and light AR experience.

This feature was unique in the way that I wasn't just doing the design but had to work with many different stakeholders. 

Communication was the big part of the work. 

This feature had a good response from the users(via Appstore review) and boost on the retention number.

DESIGN PROCESS

PROJECT - SHOP REDESIGN

IMVU Web [www.imvu.com/next] - Shop

UX and UI

GOALS

Shop Redesign will increase sales with

• Cart that keeps items they added across devices and sessions
• Product Card that lets users to preview earlier in the process, purchase it instantly or add to Cart to buy multiple items together 
• Streamlined user flows

DESIGN PROBLEMS

Not like other E-commerce shopping IMVU has uniqe a feature for shop, which is trying on with your owned item. 

In Shop, users need to understand the detail about the product and trying on the product and mix match with what they already have. 

This makes the shop really complicated. Also need to add the persistent cart system.

Make the shop as simple as it can is the number one priority.

DESIGN PROCESS

Worked with UX Designer on creating user story to come up with priority of shop feature set

USER TESTING

Round 1 : General behavior market research on online shopper (3type of person : browse, search specific ,wait for deal) 

Round 2 : wireframe test ( in house with staff)

Round 3 : Visual Design user test

Round 4 : Gut check - test with QA mode

RESULT

After the Shop Redesign launch, shop revenue has been increased twice than before.

PROJECT - PAYMENT RENEWAL

DESIGN PROBLEM

Previous page had so many of different payment options that made users confuse.

DESIGN SOLUTION

• Simplify the payment options on up front and provide more options later in the flow for advanced users. 
• Allow users to select the amount they are buying first and then choose the right payment option for them.
• Make check out to be a modal so user can access it any where in the experience.

IMVU QUICKCHAT IPAD APP

Worked on UX and UI Design

IMVU WITHME GAMES

Social Platform for IMVU Games

UX, UI Design on platform, Game GUI, Logo and Branding

DESIGN PROBLEMS AND SOLUTIONS 

Building brand new social platform for games using IMVU avatar. 

Needed to design new sign up, login flow, shop and inventory experiences.

Also worked on game UI one of the game called "Super dash" runner game and "Slots o' Fun" slot game.

MSTAR

Nurien Software - Mstar game and social for avatars [http://mstar.netmarble.net/main]

Worked on social platform UI,  game UI and Corporate website design.

Haulagram - App for the seller of Instagram (Personal Project)