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.
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. 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.
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)
Duration / Year
6 weeks / 2020
Pen and Paper
Adobe Suite (PS, AI, AE)
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.
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.
Crazy 8 Sketches
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.
Site map/Information architecture
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.
Screenshot of Figma with notes and comments
Making the brand stand out with immersive, gamelike design and delightful 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
I am very proud of this little cookie banner, a little extra delight that we managed to cram in. 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.
High fidelity design of cookie banner
Cookie banner on website
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 – (so exciting).
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.
High fidelity mockups of blocks
Reflecting the fast & flexible engine experience on the website
I designed/described some really nice, smooth motion graphics that would reflect the properties of the engine as well as the branding. Development did an amazing job at translating those in the implementation.
Motion graphics on hover in games gallery
Check it out yourself:
“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.
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.