ShopperMX: 3D Virtual Store Navigation Experience

Design virtual store on the web app to drive innovative store design and market research insights

Brief


Timeline
Feb. 2013 - Sep. 2014
Team
PM, FE, Game Developers, 3D Artists
Role
UX/UI Designer - team of one
Targeted Users
Market researchers, shoppers
Design Scope
Full cycle design Style guide Navigation design
Outcome
Launched ShopperMX within four months as the first web-based SaaS product for market research, well received by large clients like Walmart and Target.

ShopperMX Overview


ShopperMX is the first 3D simulation app to visualize shelves and stores on a web browser. Powered by game technologies like Unity Engine, ShopperMX drives innovative store designs and visual communication for retailers and manufacturers. ShopperMX was successfully launched in June 2013. It has a growing user base and recognized as a simple and powerful platform to drive innovation.

Design Challenge


How to enable non-gamers to navigate through the 3D store smoothly on the web browser?

When users enters the virtual store through a web browser, they have to learn to use mouse and keyboard to walk around and pick up products. It is challenging for most users in retailing industry to learn the controls for 3D environment, because they have no prior gaming knowledge and there is no clear similarity to webpages or office software they use daily. How can I help users learn hidden interactions fast and engage in the virtual environment to design stores easily?

Discover


To stand in the shoes of users, I researched on canvas tools that our primary users interact with daily, like PowerPoint and Google map. It helps me understand their mental models and expectations for common controls in the 2D and 3D space. On the competitive landscape, I reviewed 3D model design applications like Tinkercad and Sketchfab, to get inspirations on interaction pattern design in 3D space.

To fully understand the user behavior pattern, I created 2 personas to represent CPG industry common users. On the other hand, I approached the problem by analyzing primary task flows and user contextual tasks while in the virtual environment.

Framework


UX/UI Design


Demo and takeaways


The feedback we got from client testing sessions reflected it was easy to navigate and design objects in the virtual environment, and the usage report showed increasing usage time on the platform per user. Based on the feedback, we iterated the navigation system to support power users with short cuts and personal configuration.

Product Demo

1. Be Ready for Changes Along the Way

Since ShopperMX is the first web-based SaaS product for clients in CPG industry, we kept learning what the product would be like by working with clients side by side. The fact also leads to the UX/UI design getting updated very frequently. To cope with this challenge, I structures the feature documentation in a light-noted manner and keep developers and QA team in the loop. At the same time, I started building Pattern Library to save efforts on UI specs to focus on features and interaction flows more.

2. Make Everyone's Voice Heard

As the only designer, I always reach out to hear voices about ShopperMX from different teams: development, QA, customer service, marketing and etc. It helps me re-evaluate my design solutions from different perspectives, and also got inspired to find better solutions. I put all main UI on the lounge wall so that everyone in the company can view it and share with me their opinions. When they saw their suggestions being added to the new product release, people are very happy and more likely to help the product improve.

3. Can I Do Better Next Time?

Though I have learnt most principles and methods from graduate school, I found there are more flexible UX practices to be mastered and executed in daily work. When I finished a feature design and delivery, I stopped to retrospect my process and researched on potential improvements. I appreciate great resources online shared by UX gurus. They help me broaden my UX toolkit and keep fresh with design trends.