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.

PhotoSplash

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. 

RotatingVirus2
RocheTables
Roche
Roche
Roche
Roche
Roche
MoleculeDisease
PetridishFinal

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

  • Comply with established guidelines and be aware of anything that can reflect negatively on the organisation' reputation.
  • Ideally use the established color palette, art direction & tone of voice.
  • The game should be playable in both English and German.
  • The game should be playable within ~1h by 3 to 6 people in a relaxed setting while still providing a clear take-away of info & understanding.
  • The physical element should be easy to (re)produce, resist basic scratch damage and lends itself to be dismantled for storage.
  • The game should be playable in different settings & environments, with various lighting conditions that can affect object tracking. 
  • Comply with established guidelines and be aware of anything
    that can reflect negatively on the organisation' reputation.
  • Ideally use the established color palette, art direction & tone of voice.
  • The game should be playable in both English and German.
  • The game should be playable within ~1h by 3 to 6 people in a relaxed
    setting while still providing a clear take-away of info & understanding.
  • The physical element should be easy to (re)produce, resist
    basic scratch damage and lends itself to be dismantled for storage.
  • The game should be playable in different settings & environments,
    with various lighting conditions that can affect object tracking. 
RocheBuilding

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.

RocheProcessDoodle1
RocheProcessDoodle4
RocheProcessDoodle7
RocheProcessDoodle3
RocheProcessDoodle5
RocheProcessDoodle8
RocheProcessDoodle2
RocheProcessDoodle9
RocheDoodleElements

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 RoarCatan, & 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.

Board layouts
MarkerSceneCorrectWrong
LowPolySketches
MarkerBuild
BoardTop
MockupOverview
BoardgameInRoom
SelectPill

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:

  • Letting the AR tech read the patterns in difficult lighting.
  • Partially keeping existing brand guidelines in mind.
  • Creating a consistent unique aesthetic that fits the game.
  • Clearly communicating essential info to players.
  • Making sure text is legible in different languages.
  • Being producable within time/budget.

OUTCOMES

OUTCOMES

OUTCOMES

Staff trained

1.800 per year

Average playthrough

30-60 min.

Award won

Silver Serious Board
Game Award

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 FanaticsDedication as an understatement

Daily RendersCadence of Pixels

Daily UIInterface exploration

3D PlaygroundExploring polygons

Tangible LettersFont vibes visualized

Fading BoundariesHumans x Digital

LinkedIn
Medium
Dribbble