Loading ...

Responses by Koikreative.

Background: Beijing-based fashion shopping center Taikoo Li Sanlitun introduced a new slogan in its branding: “Let’s Fashion Forward.” Ensuring a consistent brand image across all its channels, this new site plays a significant role in its rebranding. To convey Taikoo Li Sanlitun’s new image and improve the site’s user experience, we upgraded the UI of its WeChat mini programs and, in a groundbreaking addition, developed a 3-D virtual city to create a unique sensory world for users.

Design core: The brand new landing page differs significantly from other mini programs in which users can interact with and wander around a 3-D space. We also put virtual models walking in this parallel universe to showcase Taikoo Li Sanlitun’s attitude toward fashion. As a customer service platform that also serves as news and a social hub for users, the online virtual world’s visuals and interactions reflect the shopping center’s on-site activities, such as for the Lantern Festival, a New Year’s fireworks show and the LEGO Wonderland event.

Challenges: Optimizing loading speed and frame rates for different devices under various network conditions.

Alternate paths: As the design of the space grows, we might find a better solution for integrating the site into the mini program.

New lessons: Every bit of loading time is crucial for customers to use essential services, which strongly affects the user experience.

Navigation: Apart from designing the navigation of the virtual world, we faced problems integrating the site with the existing WeChat mini program structure and controlling loading times. We decided to open the menu when entering the mini program and keep the virtual world loading resources underneath. By doing so, even though users don’t see the stunning visuals at first, we made the essential functions of the mini program more accessible to them.

Technology: The site was integrated as a webpage into a WeChat mini program and made using the babylon.js engine. Most of the programming was done in JavaScript with some GLSL shading languages.

sanlitun.koikreative.com/231215

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In