Volvo – Game experience
I created and designed the visual direction through exploration of different styles and designed the game UI.
“Connect the data” tells a story that Volvo is more than producing vehicles. Through a puzzle game, the users learn what kind of data Volvo has and what services they build with it.
Digital Product Designer
- Design the Visual Direction and style
- Level & World Design, Asset Creation, UI Design
Filip Svalander (Digital Product Designer)
Simon Jimmefors (Digital Product Designer)
Markus Tinnfält (Unity Developer)
2 months // 2021
Volvo they make cars!
That right there is the current problem. Whenever you mention Volvo the only thing that comes to mind is cars, trucks and maybe heavy machinery. But in reality Volvo Group is super crazy multifaceted! One of those facets is utilising data science in many aspects of their product development. And for that they need lots of new young talents within that field. What better way to get their attention through a tricky game that they have to solve?
We needed this game to be eye-catching, fun to figure out and challenging.
I came into this project when most of the planning of the game concept where already decided. I spent some time playing other data games to see what is out on the market.
I also spent time researching Volvos branding, which is more corporate and obviously not created for a game. So I had to bend the rules just a tiny bit to create something that felt more game like. In the UI the Volvo brand shines through and is like a red threat throughout all Volvo products.
I started by cruising the web and all my favorite places to find inspiration. Copy pasting anything that had the feeling of data. When I create moodboards I like to fall down rabbit holes and have an ungodly amount of tabs open. I especially love to take inspiration from movies or art installations. I started sorting and realised I had 3 different patterns as directions: 1. Blow my mind with data, 2. We are going on an adventure and 3. 80s graphics.
- Explore #1 and #2 with snapshots applied to the game mechanics
- Drop 80s data, we did not think it resonated with Volvo and the mood they were going for
I designed 2 snapshots, to get 2 very different feelings.
The first one is more cold and hard. I designed it in Figma, trying to also bring in some UI elements. I was inspired by Sci-Fi movies and different icons and shapes that have edges, grids and lines.
The second one is more inviting and round. Designing in Blender I focused on different materials and elements, glass that has illumination, light beams and cables. I also played around with the shapes that you will build with and how they would build the world.
Ultimately we decided to go more into the direction of the second one, to go away from the biased view of data in Sci-Fi movies and focus more on the game element. So I went back to my workshop (aka Figma file) and designed this mockup:
Pedal to the metal with Figma
I just love Figma. But I was a bit stumped on how to design for a 3D space in a 2D platform. Using gradients and isometric plugins worked like a charm. In my spare time I paint, so understanding light and shadow does help majorly.
We brainstormed a lot together on how the worlds and levels work together, here are some sketches about different ideas.
I designed the user experience flow for the game play and also how we should display data. I then crafted the UI for the menu and some other smaller bits.
I actually had 3 different color combinations for 3 different worlds, but they were going a bit too far away from the original branding – but we gotta have some fun exploring! We then decided to make the Volvo blue the main “blue” thread through and had accent colors different from world to world. The game itself is easily addictive.
– Play it yourself – beat the highscore!
– Great success at fair to get data science students attention
”So much fun, I can’t stop playing!”
I learned to
- Make eye-catching visuals quickly and build on ideas in lots of different directions.
- Recreate and break down designs to understand how a specific look can be achieved.