IMVU MobileWeb

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

UX, UI Design

iahn_mobileWeb_01 Copy.png

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

10 Years Old Desktop Downloadable Client

10 Years Old Desktop Downloadable Client

First Version of MobileWeb App Launched in 2014

First Version of MobileWeb App Launched in 2014

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.

Creating User Story

Creating User Story

3. Market research on other chat apps. 

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

User testing - Core desktop client field test

User testing - Core desktop client field test

5. Wireframe the flows

6. Visual explorations 

7. Graphic user interface designs with iterations.

Wireframe for MVP

Wireframe for MVP

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)

Concept Testing Findings on Feed Page and Create post page

Concept Testing Findings on Feed Page and Create post page

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.

Avatar place on the bottom / Focus on avatar emotion/ Panel Style

Avatar place on the bottom / Focus on avatar emotion/ Panel Style

Comic Style / Show both (me/other) avatar / Show active avatar at a time

Comic Style / Show both (me/other) avatar / Show active avatar at a time

PRODUCT DESIGN STYLE PROGRESS

iahn_mobileWeb_08.png

RESULT

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