Prior Holdings experience case study.
How we built an immersive journey through out the Prior’s philosophy: connect people to their dreams through hospitality and emotion.
Introduction
Who is Prior Holdings?
Prior Holdings is a Japanese company leader in the wedding & restaurant industry. More than a service, Prior connects with clients on an emotional level. From understanding every wish, to organizing the venue and anticipating needs, everything is made possible to experience your dreams and move your guests in a memorable way.
What once was a small soba shop has now become a reference in the realms of quality events and services.
Strategic and creative challenges
Our main challenge was to communicate complexe notions such as authenticity to hospitality.
To achieve this, and based on the emotional insight that Prior gave to use, we decided to focus our efforts on building an authentic and emotional journey through 5 keywords that represent the client philosophy. Regarding the localisation of the client and his main target, we had to find the right balance between two cultures: the Japanese culture, and the Mediterranean culture. Prior is deeply focused on strong emotions that you can achieve during a wedding or a very special moment, and users need to instantly feel it when the navigate through out the experience.
Concept & Art Direction
In order to create this emotional environnement, our will was to set and unfolded Prior’s values within a form of drapery and create an imagery between the organic and the textile mood. This form synthesizes the core value of Prior: hospitality. During a meal, an event, indoors or outdoors, the cloth/drapery serves as a physical support and acts as a link. Beyond its physical appearance, and despite its simplicity, this element symbolizes lightness, motion, dreamlike, organic, or passion.
This drapery embodies Prior’s DNA and smart approach to the various demands since it adapts and unveils clients dreams. It is light, elegant, yet unites and can be rested on — like a fresh canvas on while a new story is told by Prior to it’s clients.
It allows the crystallization of unique moments.
Before designing anything we had to work on the ribbon. Our first research was on the shape we wanted to have, and also the light we would like to apply on it. Facing those two elements, we did a few iterations on Cinema 4D to see how a dynamic ribbon can react with different lights. Once we found it, we used this 3D model with lights as a base to design the interface.
To find the perfect balance between the experience and the content, we decided to create a minimal and clear layout that can bring simple informations in a direct way. Whether you’re a Japanese user or a English user, you need to have access to the right informations without loosing the emotions of the experience. With that in mind, we mixed English and Japanese Kanji & Katakana to create a unique feeling for the user, balanced between Japanese & Western cultures.
Some people asked us: why we mixed Kanji & Katakana? The answer is very simple; Both Japanese and Mediterranean cultures express emotions in different ways, and when we speak about Authenticity, a simple kanji cannot express it the same way as european people can feel it. By working hand in hand with Prior’s team we chose to mix Kanji & Katakana to be as accurate as possible on how we translate emotion. In doing it like this, both culture can understand the emotion in the way that Prior want it.
Technologies
For this project, the interface has been done using Vue.js that enable fast DOM implementation and easy interactions and animations.
For the 3D part, we used classic WebGL with Three.js.
At first, we developed a proof of concept for the ruban in order to test the graphic limits, possible interactions and performance issues.
Ribbon
Having a small thickness, we couldn’t use a simple plane for the ribbon. So we went for a well subdivised box which complicate a little the development process.
We implemented an inverse kinematic animation in order to add realism to the animation. One end of the ribbon being pulled and the rest of the segments being attracted to the previous one.
We stored the position of each bone from the inverse kinematic inside a texture updated at each frame. Then we sent this texture to a custom material.
Because the ribbon wasn’t rotating on himself, each slice of the ribbon was being offset using the corresponding color from the previously created texture with X being the red, Y being the green and Z being the blue.
We added some turbulences using a 3D perlin noise based on the world position of each vertex.
Because the material supported light and shadows, we had to update the normals. To do this, we computed each normal in the vertex shader by looking at the position of two sibling vertex and calculating the cross product.
A simple normal map was used to make the ribbon looks like fabric.
Dust particles
We added some dust particles to add more realism and immersion to the scene. We wanted a god ray effect so we made the particles opacity vary using a algorithm simulating the light going through animated obstacles.
Because the ribbon could go far from its initial position, we developed a pooling system on the particles. When a particles was getting out of the camera view angle, it was put back inside the view at the opposite side.
Glows
In order to help spatialization, we added glows in the back where each light was illuminating the scene. Those glows helped the user to keep his bearing, particularly during camera rotations.
To prevent the step effect on gradients, we generated the glow texture directly with WebGL and we added some noise.
Linear gradient doesn’t look very good, particularly at the extremities that seems to condensed the color. The trick is to simply apply a sinus or a power on the value in order to smooth it.
That texture is rendered once at start then reused for each glow.
Illustrations
For the ribbon illustrations, we applied a texture directly on closest part of the ribbon from the camera.
We wanted a ink spreading style animation so we created a black and white image composed of multiple ink drops then we used the gray value of each pixel from this image to control the opacity of the same pixel from the illustration. Then we added an offset to this value and we only had to animate this offset to show or hide the illustration.
For the background illustrations, we simply added a texture on a gigantic half cylinder moving with the camera.
To avoid creating a different illustration for each step of the ribbon to prevent repetition, we used the same illustration that we mirrored in different axis each time the ribbon was going to another step making it look like it’s another.
Floating objects
Some floating objects like feathers, dandelions and petals have been added to the scene. In the menu, when you hold click on the experience, those flying objects start to pop more often. At the end of the hold animation, new objects appears.
Those objects have been made using a simple texture on a deformed low poly plane geometry.
Then the geometry is shifted from it center in order to create a more natural winding animation like having light objects going through turbulences.
Conclusion
The beauty of working on Prior Holdings website was the delicate balance between multiple aesthetic and cultural important insights with which that we had to craft an experience that would stand for Prior’s long term vision of hospitality: we had to avoid being too illustrative or corporate to match Prior’s constant evolution where emotion is always at the core.
The client has been trusteful and committed from day one, allowing us focus on giving our best on all aspects of the project.
Also a big thanks to Mooders with whom, as usual, we worked on the audio design.
