Ubisoft Snowdrop Engine website

Bringing global attention to an extraordinary game engine through a unique website

Snowdrop is a proprietary game engine created by Massive Entertainment  – a Ubisoft Studio. It has brought a wide variety of environments to life, including games like Tom Clancy’s Division and Mario + Rabbids: Kingdom Battle.

Introduction

With my strong background in creating visually interesting designs I was chosen to  design a stunning website in close collaboration with the developers and the the Snowdrop Team. The website was part of a campaign to introduce the Snowdrop Game Engine to more than 400 game developers at a big conference.

This was the first project I immediately started when I joined Jayway in 2020. I knew this was going to be an intense, fast-paced project – and I was ready for the challenge. Because I worked in a smaller design studio before, I was already used to wearing many hats and leading a project.

The Snowdrop team was so satisfied with our work they returned to Jayway in 2021 to spend an additional 5 weeks to polish up and add more animations to the landing page, that we were not able to build in the first round.

My role / Company
Lead UX Designer / Jayway
– Management (client communication + weekly reviews)
– Research (Workshops, Competitive Analysis) 
– Structure (Information Structure, Flow)
– Art Direction
– Design (Wireframe, Hi-Fi, Components)
– Concept Development, Prototyping and Animation
– Asset Creation

Duration / Year
6 weeks / 2020
5 weeks / 2021

Tools
Pen and Paper
Miro
Figma
Adobe PS, AI, AE

Team
1 Designer
2 Developers

Designing and building a kick-ass, maintainable desktop website in just six weeks

Firstly, we agreed on weekly meetings with the client showing our progress, and daily stand ups within the Jayway team. These happened both in office and remote. I was the main contact for the client communication and set up most meetings and addressed concerns, as well as organised the timeline and project. This was not a role assigned to me, it happens naturally that I take charge when I see something is needed.

Responsive snowdrop website

Exploring design opportunities through focusing on solutions

During the Problem Framing workshop we identified problem areas that pose challenges. Some of these problem statements come from a user need and some from a business need. We reframed our problem statements to How Might We questions to turn these challenges into opportunities for design. I really enjoy this format of reframing, because it opens a challenge up to innovative thinking and focuses on solutions not problems.

Problem Statement

How might we…

Game developers cannot distinguish different game engine websites and brands, making the brand less prominent, leading to less game developers wanting to work with the game engine.  

…become an established brand in the game industry that is used by Ubisoft Studios worldwide?

Content Creators struggle updating and maintaining websites leading to outdated and boring content.

…empower content creators?

Users go on a slow loading website creating friction which will be associated with the game engine.

…reflect the fast & flexible engine experience on the website?

Brainstorming together with stakeholders and aligning our product vision 

Now knowing our common goal and purpose we gained the confidence that we are tackling the right problems. We then dove into an Ideation workshop to kickstart the creative process by first exploring and agreeing on a way forward. The exercises included: Lighting demo’s, 4-part sketch, Crazy 8’s and Art Gallery.

Sketches on Paper from workshop with Snowdrop

Crazy 8 Sketches

Sketches on Paper from workshop with Snowdrop

Concept Sketches – Art Gallery

Closely collaborating with development to be as time efficient as possible

So here we are – 1 week of our project is already over. To be able to pull this off in 6… Ahem 5 weeks design & development needed to run concurrently. We talked daily about how to split the work so development could already start building asap. Luckily they had to do some research around headless CMS and how to achieving a speedy website, so I could at least get a little head start. I focused first on creating a site map and a quick wireflow, and then creating some parts of the style guide that I knew would be used. This was mainly font sizes and colors translated to suit UI designs from the provided branding guidelines. 

sitemap digital on paper

Site map/Information architecture

Different wireframes with connections to show the flow

Wireflow

Efficiently structuring content through wireframing

One thing that I wanted to nail right away was the content on the site, and what types of components we need to build – since Massive will be maintaining and updating the website themselves. Plus, while development could build these components I could focus more on flashy things – to make this website really kick-ass! I knew what pages the Snowdrop Team wanted and created suggested wireframes in Figma for these page types ( f.e.: Blog – Knowledge Hub). Figma was an amazing tool to use there and get immediate feedback from the client. I designed a second version of the wireframes and then started the High fidelity mockups. 

Wireframes

Screenshot of Figma with notes and comments

Screenshot of Figma with notes and comments

Laying the ground work for a digital brand guide for a growing brand

Snowdrop had a good base of Brand Guidelines, but they were heavily focused on Graphic Design. I created a style guide and also coached the client in what to think about when implementing design on the web. Since it is a really new brand I felt it was very important to lay a good foundation that can be build upon, when the brand grows.

One part I want to highlight specifically are the abstract icons that are on the feature page. I decided to take the particle arrays as inspiration for icons to represent features. The Snowdrop team loved this idea so much that the Cinematic Team animated them and updated them on the site, many of them being inspired by my base concepts in shape and meaning (so insane!).

Styleguide in two parts of branding for UI

Style guide

Making the brand stand out with immersive, delightful design and gamelike interactions 

During my competitive analysis in week one I wrote down “the good, the bad the ugly” and it really felt like I was looking at the same website template over and over again. I wanted to make something more special and visually interesting. The branding that was provided to me was already such an amazing base to push this brand even further digitally. 

I wanted this website to feel like it is in a space, and it takes up digital room. I designed overlays of elements and some particle arrays to create fake depth and avoided big, blocky colored backgrounds. For the blog having white font on black background is not ideal from an accessibility stand-point, but that was how the brand was laid out from the start. One thing that I designed that was maybe a bit more radical was the side menu. I have to thank the developers for putting up with me, because this made it way more complicated and time consuming to build. In the end I think it was so worth it, to make it feel gamelike, interesting and different. 

Immersive parallax particle effect

We had time for one WOW factor element, and I wanted that right in the beginning when the user lands on the Snowdrop page. I think we achieved this feeling of being immersed with the logo animation and then having this parallax effect on the particle versions of a scene from Tom Clancy’s Division. 

Parallax scrolling effect on Landing Page

Interactive Engine Pillars

To make this experience memorable there are a couple of interactions that will stand out, especially to the target audience: Gamers and Game Developers.

For example the cookie banner adds a little extra delight. I designed it inspired by PC games where you can pick up or inspect items via keystrokes. In this case the cookies are like an item that when accepted will be added to your bag.

Engine pillars animation

Non-intrusive Cookie Banner

We all know it too well, big Cookie Banners that make an experience immediately worse on a website. To avoid this, I wanted to make it a fun, non-intrusive interaction, so I designed it inspired by PC games where you can pick up or inspect items via keystrokes. In this case the cookies are like an item that when accepted will be added to your bag.

Implemented on the website

Cookie Banner design active and unactive

Cookie banner design

Fast, flexible and smooth animations

I designed and animated some really nice, smooth motion graphics that would reflect the properties of the engine as well as the branding. I wanted it to feel game like and interactive. I worked closely with the developers, who did an amazing job at translating those in the implementation. 

Scroll to top function

Scroll to top button

Games gallery hover animation

Features hover animation

Tile hover animations on Knowledge Hub

Empowering the content creators behind the scenes

As mentioned Massive is maintaining and updating the headless CMS (Contentful) themselves. I wanted to make sure that the Snowdrop team had reliable blocks that would look amazing together no matter how you place them – to really empower content creators. 

Different types of components for snowdrop

High fidelity mockups of blocks

Flexible blocks

Check it out yourself:

———

Outcome

“Together with Jayway, we have created a site that we are incredibly proud of. Despite the extremely short deadline we had, the team at Jayway worked with an agile mindset and understood our needs, they included us in the process to ensure that we were involved in all the different stages. Through clear feedback processes, we never had to go back but managed to create a page with everything we wanted. Jayway did not only show that they understood our reality but also contributed to very important design thinking and they also had an incredible ability to develop.”

– Linda Malmgren, Communications Director at Massive Entertainment

I am so happy with this project, not only that I was chosen to do it, but that I got to work with one of the biggest video game companies in the world is just mind blowing to me. The Snowdrop team really loved the design and revealed it at the conference to over 400 developers as well as on Social Media. The developers and my work in this project even paved the road for possible future collaboration between Jayway and Massive. I think it is really cool what we put together in six weeks, just imagine what we could have done with a bit more time.

Lessons learned

Articulating design decisions

During this project I REALLY understood how much communication is part of a designers job – and how it can make or break a project. I learned that even though I might think that I explained my design well, it might have not been received at the end of stakeholders or developers like I intended too. After this project I bought a book (Articulating Design Decisions by Tom Greever) and started a design book club at Jayway where we read this book together, discussing chapters. I shifted my attitude towards presenting and use new methods to set better contexts, understand stakeholders and improve communication between stakeholders, developers and me.   

Choose your darlings according to scope 

During the workshop we had these crazy ideas: a living particle organism that is interactive, 3D WebGLs, particles animation and so much more. But we knew the short timeframe would not allow for all of these things. At first it was frustrating because it felt like killing all our darlings. But instead of that we decided to focus on one bigger WOW feature and made sure everything else could be added at a later stage.