Roche - Make your mark
Roche - Make your mark
Roche
Make your mark
ART DIRECTION, UI/UX, ANIMATION, VISUAL DESIGN, 3D MODELING, AUGMENTED REALITY
ART DIRECTION, UI/UX, ANIMATION, VISUAL DESIGN,
3D MODELING, AUGMENTED REALITY
ART DIRECTION, UI/UX, ANIMATION, VISUAL DESIGN, 3D MODELING, AUGMENTED REALITY
Every month a few dozen new employees join Roche to work towards creating new medicine. As part of their introduction program, everyone attends a lecture about the value chain. To make this more coherent and exciting, a new game was born. Make your mark is an Augmented reality puzzling game played in groups of 3-6 players using a tablet.
Collectively, groups collect hints, place puzzle pieces, scan 3D content and try to complete the entire value chain in time. Within a playing time of roughly 1,5 hours, it creates a clear understanding of all the intricate steps that are taken before any medicine gets to market, all the way from initial research all the way up to ending up in our hospotials & grocery stores.
Summary
Behind the scenes // process
Behind the scenes // process
Context
The problem
New employee onboarding is costly, time-consuming and lacks interaction, mainly featuring lectures. The amount of info and how it's presented can be overwhelming due to the complexity of medicine's development cycle and there's limited time for new staff to connect.
The problem
The health and safety training sector is often seen as stagnant and unexciting, with slow innovation. While many acknowledge the importance of training for life-threatening situations, it often lacks priority. Common complaints include inflexible scheduling, high costs, and limited effectiveness. Yearly mandatory training is uninspiring, repetitive, and doesn't simulate real danger, typically reaching only a select few in organizations.
The goals
The goals
My role
As design lead, I was responsible for working with the internal team and external stakeholders to develop the vision, iterate on concepts, define the visual identity and create most assets. I worked closely with game designers on the overall flow and UX of the game, with developers to create the software and with design freelancers to co-create the 3D.
The process
The outcomes
From test to medicine
Discovering a disease cure is a intricate process. Developing a molecule with an impact can demand years, even decades, of research before viable testing & product transformation. The game teaches you about all steps in the process, what hurdles it might face and what the future of medicine entails.
Behind the scenes // process
Behind the scenes // process
Behind the scenes // process
Behind the scenes
Iteration process
Goal
Help the user, one of the 150 new Roche employees that join every month, to better understand Roche and it’s values chain while meeting new people and experiencing the Introduction Day.
Challenges
Starting points
After consulting with key stakeholders at Roche's Experience Center in Basel, we established the initial step: utilizing AR alongside a physical board for an immersive, tangible experience. Employing the Double Diamond design framework, we underwent user and technical research, grasped the Roche brand, and began generating diverse directions, concepts, and ideas.
While there were quite extensive digital brand guidelines, we eventually made a distinct yet recognisable spin-off identity for the game in collaboration with the stakeholders. This was needed as games come with their own design challanges that aren't normally captured in such guides due to the different types of interactions, the medium and to streamline the overall look.
Physical meets digital
During the process, we conducted multiple user testing sessions to enhance design iterations and define the physical game's form and functions. Drawing insights from games like as Roar, Catan, & Civilization we distilled crucial lessons & potential pitfalls. With agile sprints, (paper) prototyping and ongoing user testing, we reached a functional MVP relatively quickly.
To accommodate between 3 to 6 players at once while using an iPad, we opted for a standing table allowing free movement. The sustainable custom-made pressed cardboard board and table are portable and easily disassembled. Their scratch- and waterproof surface ensure durability, and if needed, reprinting wouldn't require substantial costs.
Petri-markers
Starting with hexagonal markers, we switched to a round petri-dish design due to board size & production constraints. A straight edge was added on top to ensure they would fall snug in their slot. This, combined with distinct patterns on the markers & board, guaranteed accurate tech-based piece validation. Artistic impressions, not actual petri-dish visuals, were chosen to prevent expert confusion and enhance tracking stability.
We had to iterate quite a lot to strike a balance between:
You checked out the whole project? Impressive.
Wow, you made it down here!
If I can help you with a similar project, let's talk.
Other projects
Branding Zero Emissions WorldGamifying an impactful climate NGO
Saving Lives with Mixed RealityImmersive CPR, firefighting & medical courses
Covid-19 RapidpassAlleviating the Philippines' medical system
The future of energyHow to create a sustainable energy grid
Managing the GridInto the future of rail logistics
Infectious FanaticsStories of intense fans
Daily RendersCadence of Pixels
Daily UIInterface explorations
3D PlaygroundExploring polygons
Tangible LettersFont personalities visualized
Fading BoundariesHumans x Digital