Xenera came to us with the task of representing the company as a futuristic, cyberpunk-ish entity. Xenera provides a next-gen digital interface and digital transformation for its B2B clients. The clients range from financial and medical companies to heavy industry players. The company acts as a bridge between the digital and the physical world.
Discovery Meeting
Our design process started with a discovery meeting with the client. The purpose here was to understand the target audience of Xenera. To design an effective solution, understanding the customer’s digital literacy and psychographics is essential. The goal also was to figure out how Xenera wants to be perceived. With all the data extracted, it was time to get to the design.
Visual Direction
Most websites are designed with a generic theme to cater to a wide audience. However, the target audience of Xenera is expected to be technologically savvy. The ideal client of Xenera is already looking for an AI-themed representation.
To chalk an outline of the theme to be developed, the following words were shortlisted.
“Innovative. Future. Creative. Virtual. Minimalistic”
With these tangents in mind, the goal was to design a “mixture of old retro style and futuristic cyberpunk” experience.
To put the vision in a pictorial representation, the following mood board was finalized to give us a glimpse into what the website should feel like:
Gamelike Theme
One of the major design inspirations for Xenera is the world of games. All the elements, buttons, and fonts used in the website take their design aesthetic from the digital world of games. Just like a loading page in a game, there is a greeting when the website is loaded for the first time that shows a progress bar, a common theme of video games.
And right at the start, pressing a button to enter the website has taken its equivalency from pressing “Start” in video games to start the experience. The 3D aesthetic of the main page has a design sense of a VR game.
Plus, the font used for descriptions and specification listings creates a gaming ecosystem at the core. To round it all up, the audio that plays in the background as the visitor scrolls is inspired by video games.
The Colors
To achieve the desired look and feel, the essential colors need to be black, pink, and blue. To stay true to this feel, the following color mix finalized included, “Future Black, Cyberpink, Innowhite, Xenera Blue.” A mixture of deep blacks and whites is what gives us a minimalistic future outlook, while shocking pinks and blues throw us back to the 80s retro feel. Their combination is what makes the experience unique.
The Digital Showroom
At the heart of our website design lies the idea of creating a digital showroom for Xenera. The purpose here is to highlight each of its productions with maximum captivity. Instead of bombarding all the information at once, each product item in Xenera’s inventory is showcased individually and separated by horizontal scrolls with others. This guides the audience to direct their full attention to one product at a time, thus enhancing comprehension and recall.
3D Models
To make the audience feel integrated into the website, we decided to add interactive 3D models for each product. All the models were exported in .glb format using Cinema4D. It was quite easy to import them to our three.js scene after that.
To refine the models even further, we applied a Bloom effect on the entire scene. This made all the models glow and added to the retro and cyberpunk theme discussed above.
The Smart Mirror 3D model is a digital representation of Xenera’s actual product and shows some of its features such as the date, time, and a greeting message. The model also has a glow and bloom feature similar to an actual mirror reflecting light to make it feel vibrant.
The chatbot 3D model is a creative one with a Wall-E feel to it. Since it is an AI chatbot, the bot is designed in a humanoid AI pet feel. This gives a face to the chat instead of just talking to a machine.
The digital double avatar 3D model has a Matrix feel to it and shows nodes connected to make a face and a scanner in front of the left eye. The model is reactive in its movement to make the website feel alive.
Animating for Attention & Comprehension
Once past the hook, the visitors find themselves in a 3D environment where the services provided by Xenera are revealed one by one. To increase comprehension, each service provided by Xenera is first explained in a short text snippet. These snippets act as mini hooks. Once the customer is interested in a service, pressing the “Enter” button takes him deep one level. The stepwise disclosure of the information is designed as such to increase customers’ comprehension and retention.
From a design perspective, a 3D environment takes the users into a virtual world as intended. This is exactly what Xenera is offering with its digital transformation. The users need to feel the digital environment instead of getting another flat piece of information on a screen. The different the experience, the better the recall.
The Horizontal Scrolls
To make the visitors feel as if they are in the middle of a virtual world, the information is arranged in a 360-degree view. Each click to the left or the right puts in effect a 3D scroll animation that puts the next piece of Xenera’s service in the front. The graphics displayed on the screen are also not static. There is movement in both background and foreground graphics. In an era of shrinking attention spans, this has become essential.
The Dancing Grid
The most fun part to implement was the floor of our 3D scene. From the get-go we wanted it to be a wireframe grid. To create the dancing effect, we animated the plane using a technique manipulating its position data in the vertex shader. To be specific, we changed the y coordinate of the vertices over time using a sine wave.
Interactive Outlook
The website is also made responsive to a visitor’s mouse scrolls. Just like a debate keeps a person more engaged than a one-way speech, the goal here is to make sure the visitors feel like he is interacting with a virtual world. Even the buttons shuffle once you scroll over it. Once the website is opened, there is music that starts playing in the background. The instrumental sound is chosen in line with the mood. An audio-visual experience is always a good option to enhance the experience. The transition from one product to another is accompanied by a console-ish sound.
Diverse Audience
Since Xenera is primarily based in Japan, the website has a version in Japanese as well. Instead of directing the users to a new page, a language toggle button is used at the top. This easily accessible button turns the language of the content quickly. The reason behind this is to cater to a maximum number of people as the audience of Xenera is pretty diverse.
Conclusion
The Xenera website is currently available at https://xenera.netlify.app/.
Visit now and immerse yourself in an interactive virtual world carrying a retro feel fused with cyberpunk modernity.