Molecules to Medicine • Mathijs Sterrenburg

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

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.

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.

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: