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.

Tablet board game floating game markers

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

  • Create a solution that provides new employees the same information in a more engaging and insightful way.
  • Reduce the time spent explaining the entire value chain.
  • Incorporate a way for new employees to actively learn together. Increase cooperation, interactions and time spent learning about each other in the process to encourage team spirit.
  • The solution must be easy to set up & disassemble because the event reoccurs repeatedly with short build-up times. 
  • Must be able to withstand some wear & tear, subject to normal usage. Must be easily replacable if needed.
  • Must be an extension of the brand's identity, matching the aesthetics & innovative spirit of the Experience Center. 
  • 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. 
  • Use Mixed Reality to create realistic & immersive trainings that teach users essential life-saving skills in ways that can't be replicated with traditional trainings.
  • Lower the barrier to entry by making training accessible for anyone that wants to learn at any time in an organisation.
  • Boost learning retention, confidence, and cost-effectiveness through flexible and scalable usage.
  • Make sure products are user-friendly & easy to use despite the target audience's hesitance towards new tech and having interaction patterns that (almost) nobody is used to.
  • Create a company brand that stands out as fun, inspiring and solution-focused compared to competitors that mostly focus on the newness of the tech or feel very administrative and dry.

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.

  • 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. 

The process

  • On-site briefing and meeting with heads of brand in Zurich.
  • Create paper prototypes, dummy designs and throw-away concepts to find out what does and doesn't work. Weekly alignment on directions and ideas with key stakeholder.
  • After ideation go into agile development, bi-weekly release cycle. 
  • Continuous internal testing and occasional on-site user testing with target audience and the clients.
  • 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. 

The outcomes

  • High NPS score from both the client and the end users for its innovative design, unique experience and overall solution.
  • Around 1800 new staff members trained per year with an increased sense of engagement, learning retention & team spirit.
  • Playthrough time ranging from 30-60 minutes per session, reducing the time otherwise spent in a lecture by around 2-3h.
  • The innovative AR tech became reusable for new projects.
  • Managed to win the Silver Serious Board Game Award.
  • 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. 

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. 

Molecule spinning
Game gall empty
Roche staff game hall
Roche staff playing AR table game tablet
Petridishes game markers on table outside
Tablet game next to game board
Game board table
AR hologram
Petridishes game markers stack

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. 
Building illustration

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.

AR game feature exploration sketch
AR game feature exploration sketch
AR game feature exploration sketch
AR game feature exploration sketch
AR game feature exploration sketch
AR game feature exploration sketch
AR game feature exploration sketch
AR game feature exploration sketch
AR game feature exploration sketch

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.

Game board marker sketches
3D render AR office scene
AR game concept moodboard
Petridish sticker process
Top down view game board table cardboard
Hands holding Tablet AR game mockup
Game board table 3D render
Hand controlling tablet game

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.

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