Ubisoft Snowdrop Engine – Website
I designed the Ubisoft Snowdrop website to introduce the Snowdrop Game Engine to more than 400 game developers at a big conference.
Product
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.
Role
Digital Product Designer @jayway by devoteam
- Research, Workshops, Competitive Analysis
- Information Structure, Flow, Visual Direction, UI Design
- Animations and Interactions
Team
Valter Hemmi (Developer)
Johan Månsson (Developer)
Miranda Thewlis (Developer)
Gustav Lilja (Developer)
Timeframe
6 weeks // 2020
Design for
Website
The improvement
Design hard. Play hard.
Why is it that all game engine website look absolutely identical? Snowdrop wanted to stand out, and so we delivered a kick-ass, immersive but maintainable desktop website. Hidden easter eggs, animations, gamer jokes and lifting up the content.
Goal
Designing and building a kick-ass, maintainable desktop website in just six weeks.
Constraints
Well, for one the timeframe. 6 weeks is not a long time to design and develop an engaging, special website. And we needed it to be build with a headless CMS so the content team can maintain the website and post content.
Process
Understand
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
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.
→
How might we…
…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?
Design
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.
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 Massive 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.
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 space. 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.
These are some of the interaction and animations I designed and that were implemented.
I added on the style guide while designing. 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 they even animated them and updated them on the site, many of them being inspired by my base concept and shape.
Outcome
Impact
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 future collaboration between Jayway and Massive.
– Experience it yourself
– Game engine reveal on conference with more than 400 game developers
”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 learned to
- The importance of articulating my 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. 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 my 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.
