🛞 Case Study: Gemini
Gemini ~ a WebGL car demo configurator.
The project
In November 2021, we developed a WebGL car configurator at Lusion.
Purpose
- Create a new project/experiment every month.
- To promote Lusion skills and creativity.
- To learn new technologies in a short amount of time.
All of this, by pushing the boundaries of what’s possible in the realm of web development.
Target audience
Awwwards and WebGl pixel-perfect lovers, 3D enthusiasts, car companies and car lovers (to attract any potential client who would be interested in building an online car configurator).
Some notes of my responsibilities for Gemini*:
As a designer and front-end developer, my challenges included:
- Bringing new/interesting ideas: a slow-motion effect when click & hold, combined with an animated hud effect
- Designing the UI components in Figma (preloader, a hud, cursor with multiple states, about page)
- Front-end development and animation of the UI with tools like gsap
* Please note:
The initial experiment was crafted by Edan Kwan and Patrick Heintzman. I participated in refining the experiment to enhance its quality for submission to Awwwards (and we did win a Site of the Day 🥳). My responsibilities primarily involved researching and analyzing current trends on Awwwards, and to help them finalize Gemini.
The team
We had 3 developers.
Tech Director: Edan Kwan
Creative Developer: Patrick Heintzman
Frontend Developer and UI design: Pauline Stichelbaut
Inspiration mood board
UI design
The UI art direction, was established as follows:
- A Hud that is revealed only when you interact (to create that tech, science-fi feeling)
- A color palette you can choose from
- Custom cursor
Process
Problem:
The experiment has a lot of potential but itsn’t polished enough to be submitted to Awwwards. Lusion is a new studio who aims to gain more visibility for strategic growth. To do so, we need to create work that is outstanding and innovate in the web design field.
Get Pauline’s stories in your inbox
Join Medium for free to get updates from this writer.
Solution:
By exploring new design trends, technologies, and approaches to push boundaries and create standout work that captivates audiences. We contributed to refining the UI and enhance its quality for submission to Awwwards by:
- Adding Interactive Elements: Incorporate animations and micro-interactions to engage users. Example: when you click and hold, you enter a cinematic mode, with a majestic leopard running next to the car and the hud appears. This creates a ‘wow’ effect that the user wasn’t expecting. By overdelivering, you create memorable experiences (you captivate your audience and create new fans!).
- Visual Hierarchy: size, color, and spacing to guide user attention.
- Minimalist Design Approach: Focus on simplicity and clarity. We don’t need too much elements that could distract our users from the experience.
In Motion & In Style ~ with the added hud screen:
Technical challenges
You can read here the technical breakdown and challenges involved in Gemini.
User Feedback
We received a lot of kind words and support, which means a lot for us! 🥰
Let’s have a look
Hope you enjoyed it and don’t forget to share it if you loved it 🥰 .
Final Thoughts
Gemini introduces unique design elements, creative animations, and innovative features that demonstrate Lusion’s creativity and expertise in the field.
I really love all the craftsman involved in Gemini. Again, all the attention to details is incredible, which has resulted in two well-deserved recognitions. 😍
We will keep up the excellent work, and continue pushing the boundaries of what’s possible in the realm of web development! 😊🚀
