#024
Feb 2021 - Dec 2021
#024 is a “future lifestyle“ store located in No.24 Sanlitun North Street, Beijing. Their target customers are “Generation Z”, fashionable foods, clothing and gadgets are sold on different floors. Customers are encouraged to scan the QR code with their phones and retrieve #024‘s WeChat Mini Program before enter the building, so they can get tutorials, coupons and food services conveniently. To bring pleasant surprise and add more value to the goods, customers can see different AR content when scanning goods and fine arts in the store, WebAR was applied to this project.
Contributions
Project management, branding, UX and UI design, development
Design&Developing Tools
Figma, Sketch, Cinema4D, After Effects, Final Cut Pro, Xmind
Scan To Explore
In terms of lowering user barriers, WebAR possesses unparalleled technical advantages: it requires no devices other than a smartphone, no need to search for and download apps, no long waiting times, and no extra costs. Users can experience engaging augmented reality content and can easily leave the AR experience at any time, returning to the real world or switching to other applications. Even with the significant advancements in head-mounted displays today, this technology still holds irreplaceable value in the fast-paced consumer market.
Welcome On Board
The interior decor and merchandise of Store #024 aim to provide consumers with a futuristic "outer space" feeling. Considering that consumers will access the WeChat mini-program at the store entrance and to align with the theme of exhibition tickets, restaurant vouchers, and the brand characteristics of the merchandise, we decided to use a "spaceship boarding pass" themed visual design for the WeChat mini-program used to experience the WebAR content.
The interior decor and merchandise of Store #024 aim to provide consumers with a futuristic "outer space" feeling. Considering that consumers will access the WeChat mini-program at the store entrance and to align with the theme of exhibition tickets, restaurant vouchers, and the brand characteristics of the merchandise, we decided to use a "spaceship boarding pass" themed visual design for the WeChat mini-program used to experience the WebAR content.
So firstly we collected some mood boards for this project.
Make It Fun To Play With
Additionally, Store #024 emphasizes the fun of exploration and interaction for consumers, as well as the unique recognizability of its products.
Firstly, we adjusted the layout of interface elements from the common horizontal direction found in applications to a vertical orientation. When users enter the homepage, they will see the store's latitude and longitude coordinates (which are also common brand themes within the store), event posters, and the function bar from left to right. By swiping horizontally in the poster area, users can view the popular products and activities on the current floor, while swiping vertically switches to other floors, with the elevator icon on the right changing accordingly. The icons on the sidebar are designed with a glitch art flicker style.
Additionally, the member page of #024 continues with the boarding pass theme design. The entire system is divided into four levels, and we use light-years to represent consumption points. When the points reach a certain level, the spaceship icon will fly to the next larger planet, unlocking a higher level.
Optimize WebAR Experience
Although WebAR allows users to easily access augmented reality experiences, we aim to keep the loading time for AR content within 2 seconds to ensure an optimal user experience. This requires us to use as few media files and 3D models as possible. Combining the "boarding pass" theme with glitch art, we utilize multiple low-resolution videos and images, layered layouts, and some scripting logic. These elements respond to changes in the smartphone's gyroscope data, achieving visual effects close to those of complex 3D models.
Implementing image and object tracking in WebAR requires targets with distinct features, such as detailed surface patterns, prominent vertices, good asymmetry, and minimal reflectivity. Therefore, in addition to AR content, we also participated in product packaging design to ensure that most product AR markers can be recognized and trigger WebAR content display from a distance of about 20 centimeters.
