As IMVU advances into the untapped territory of social VR, bringing its product to the modern framework became a top priority.
2014 – 2015
Redesign the system from ground up
IMVU wants to rebrand itself and go cross platform: mobile, web, desktop and further. Renewing its decade old product would not mean just a cosmetic surgery on the surface but a fundamental genetic recombination from its DNA level.
I focused on establishing a solid design system that can house and scale a massive social network.
New design languages, tools, techniques and workflows have emerged to keep up with ever-changing needs of the industry and the society. I led design research in an effort to see what’s on the horizon, understand their driving forces and stir imaginations around the company.
I analyzed the old shop’s taxonomy and remodeled it based on best practices and user research to make it easier for customers to find what they want from the world’s largest virtual goods catalog.
Input and output. I created content requirements for the new system, investigated existing content from the old system and hooked them up or created new ones if necessary.
I ran into this insightful quote on a drizzly day in SF and wondered: What happened to the startup I saw on Product Hunt the other day only to never hear again? Isn’t it a prime example of natural selection? What makes some prevail than others? Questions followed one after another with the jazzy beat of raindrops.
That day on I compiled records of new designs. Several techniques stood out among them, showing three distinctive design needs of the era: optimal viewing experience, focus, and delightful user experience.
I presented this research to the team of executives, fellow designers, engineers and producers. It brought a company wide attention toward design overhaul (once again) and ignited fiery conversations cross teams. In retrospect, it was one of the critical moments that started the new initiative.
OPTIMAL VIEWING EXPERIENCE
Responsive Web, Vector Graphics, Web Font
Bold Visual, Negative Space, Visual Effects
DELIGHTFUL USER EXPERIENCE
Parallax, Motion Graphics, Gesture
MAKE SIZE NO MATTER
Going with responsive web was one of the efforts we made to reach millions with wide range of devices and provide optimal experience no matter where they are coming from.
I followed these 4 steps:
First, I listed out all pages and elements required for the MVP with design and product leaders. Second, I created lo-fi wireframes and grouped them based on their page structure. This was so that we could templatize the design and code to make the system scale easily. Third, I defined a handful of breakpoints based on the most commonly used devices from customer data. Finally, I created a matrix that shows how each pattern reacts to various viewport sizes.
Visual design credit: Phylissa Li
MAKE $$$$ RAIN
The very first version had just arrived with minimum functionalities. But it wasn’t enough for a shop with more than 20 million products. If you were to find that turquoise slingback, for example, you needed to know the exact search term. It could help customers discover what they want better.
I examined top e-commerce sites to understand what customers expect when they shop online. We were missing in-depth category structure and contextual filters that help narrow down the results, layers of pages that foster new findings and know better about them, and a smart algorithm that recommends the right product.
The next was to remodel the category structure based on the research. I reverse-engineered ones from many fashion online stores to extract common terms, then regrouped them to make it work with IMVU’s catalog cross referencing its old shop’s. It resulted in 396 category items with 3 layers.
On the other hand, studying on search revealed that available metadata was quite limited. We needed to rely on existing ones as rebuilding them was out of scope. With that in mind, I generated new set of filters that can be accomplished with simple search query.
Taking the new hierarchy and filters as a foundation, I reinforced user flows and created wireframes for new page types. This process involved rounds of iterations during which I worked closely with user researchers to identify usability issues, and platform designers to make sure it works on iOS, Android and the web.
The annotated wireframes on the left was turned into visual design on the right.
Visual design credit: Amy Liu
MAKE LOVE LAST
Falling in love is rad. Making it last is lit. Thinking it’s true for a product, I designed notifications to achieve the latter. The goal was to win back and retain customers competing with everything that draw their attention. Penetrating into moments in their lives through the right medium with the right content was the key to all this.
I came up with 7 channels through which we could reach customers: email, push, dropdown menu, badge, toaster, card, and notification center. Each of them would target different contexts and maximize the effect together. In parallel, I combed through user-facing product features to produce a list of activities customers would want to be reminded about. It comprised of generic ones such as like and comment as well as IMVU-specific ones such as chat invites and friend matches.
Those activities were then connected with one or more appropriate channels and formed a blueprint for notifications.
NO COMMUNICATION, NO LOVE
A modern messaging framework introduced from the previous overhaul needed another round of adaptation to work cross platform and match up with new interaction language.
I tweaked its UI elements so that it complied with responsive design rules. This entailed thorough migration from every aspect of the existing experience, from initiating a conversation to reporting individual messages, as well as new interaction for touch devices such as smartphones and tablets.
WHAT I LEARNED
IT AIN’T OVER ‘TIL IT’S OVER
What fascinates me the most from designing a product is how it drives an evolution of complex systems. Starting from a mere idea, like a single celled bacteria, its complexity grows as it evolves into a real product. Decisions made earlier in the process become obsolete at some point. What made the system possible to exist in the first place turns to accelerate its own failure.
This is not to say that we are helpless in the waves of unknown future. Rather, it is to say that we, as makers of products, need to understand that what we know now may be wrong in the future, thus we need to diligently examine where we are today for continued prosperity. Many precautionary and some drastic measures have to take place for the system to continue to exist and evolve further.
Several attempts to overhaul the old product had failed previously. While heartbreaking, truth is that we learned a lot from them. We were able to better understand our customers, complex dynamics of social interactions, countless opportunities to improve. Without them, IMVU’s next generation experience couldn’t have come this far. IMVU Next has reached the farthest to this point. And yet, this shall not be the end of the story.
The famous quote in theory of evolution is that it is not the strongest of the species that survives, nor the most intelligent that survives. It is the one that is the most adaptable to change. For IMVU Next, this could not be more true.