Project Brief

 

Create an immersive and interactive infographic web experience based on the results of a Google study on women and mobile gaming.

Roles & Responsibilities:

Lead the creative brainstorming session, sketch out initial wireframes of the interactive experience as well as the landing page, create concept character art, level storyboards and mini games. Approve level artwork, interactions and design assets.

Since the release of the original site back in 2017, the campaign website has gotten a complete redesign since the amount of content the platform offers has grown significantly.

 
wig.png

Phase 1

Research & Ideation

 

Our team was big on getting together and holding brainstorming sessions that included every member of the team. It was valuable to hear feedback and opinions from designer, developers, project managers and copywriters. It was very important for us to have the engineering team with us during these sessions to keep us grounded on what’s doable within the timeframe given to us or wether or not our ideas were too ambitious and should probably be scaled down.

The ask was to create an immersive website experience that was both educational and fun, and since our team had a couple of “die hard” gamers, we took that request to heart. We could have created a simple, elegant and informative webpage, but wanted the viewer to feel immersed into the gaming world, while learning some profound facts.

Our ambitious idea was to create a gaming world, unique with its look, locations and mechanics. Each level would be different from the other and would have its own mini games that would drive the narrative forward.

Below are some early sketch explorations of some of the web elements.

Phase 2

Character Design

 

Our story needed a character, someone to embark on this journey and personify the viewer. Early explorations were mainly focused on a female character, but as we evolved the story and the world in which it would take place, it was decided to steer into a more gender-neutral direction.

 
princess+copy.jpg

Phase 3

Environmental Studies

 

In parallel to the first few rounds of character studies, the first environmental studies were underway. We wanted to create a variety of environments ranging from open valleys, to lush forests, and underground caves.

The stylistic direction was established to be simple, fun and colorful. Locations were meant to feel open and have a sense of depth and scale to them.

Phase 4

Final Character Design

 

During the initial character explorations it was determined to focus on gender-neutral character representations. With that in mind, we begun our final concept: personified geometric shapes.

Phase 5

Level Design

 

The overall story was broken down into five main chapters. Each chapter had a unique look and feel to it, as well as a designated color palette. Environments were simple and clean and used soft, pastel like colors and gradients.

environment+themes.png

Phase 6

Mini-Games

 

At the end of each level there was a mini-game. Since the main experience was scroll based, we wanted to give the viewer an opportunity to dive even deeper into the gaming world by engaging in a series of mini-games that were both fun and informative. We chose game mechanics that were fun and popular across the mobile platforms, that way they felt familiar and intuitive.

A total of 3 games were made: “Candy Crush” style pattern game, an endless wall runner, and a trivia game.

mini+games.png

Phase 7

Testing & Implementation

 

Both experiences were thoroughly tested and optimized across several platforms, web browsers, mobile phones and computer screens.

Final Experience

 

The final web experience was an elegant page that included videos, copy, white papers, links to more information and the main interactive element, a scroll based game that was optimized for both web and mobile.

Previous
Previous

Google Books

Next
Next

Magisto