constellations of connection 

We engaged Roche’s internal stakeholders to develop an experience that would build a sense of connection amongst employees; with their company, to their purpose within the organization, and to each other. We started by understanding the problem and the project goal. We knew that the company was undergoing a transformation to be more agile and innovative. We also knew that their culture was historically based on research, heavy on science but low of employee engagement. As a result, we identified a gap, that although Roche is an incredible company, they don’t celebrate accomplishments as much as they should.

strategy 

In order to respond to this problem, we developed an internal communication platform that helps Roche employees share bold ideas, small and large successes, and feel more connected and empowered to their role as it relates to the output and impact of Roche. Our strategy was based on the following:

  • Roche affects the lives of millions, but it’s easy to forget this within a company of thousands.
  • Making stories visible and physical disrupts complacency and provides provocation (setting a condition for change).
  • It is not prescriptive about the types of stories; content can adapt and change based on feedback, input and impact (“agile”).

 

project scope 

  • 12 ft X 7 ft custom modular build imbedded with 144 LED lights
  • 5 interactive screen experiences
  • 2 custom websites design and dev
  • 13 weeks from ideation to market
  • Team of 14
  • My role: Lead UX Designer

Creative concept 

Our team developed the name “Constellations of Connections” for the project. It also served as a metaphor for the creative we were proposing. It evokes aspects of the existing brand strategy (North Star) while metaphorically allows for a variety of expressions: 

  • Each aspect of a story is a star in the universe.
  • A collection of these aspects represents a complete story  (i.e a “constellation”)
  • Like the universe, the platform is ever expanding and ripe for discovery. 
  • Connection points can also metaphorically represent people, places, successes, contributions, failures etc.  
  • The Roche universe is the sum of all these connections: Constellations. 

ideation & design 

Our process began with deciding what the connections dashboard would entail. Keeping the following considerations in mind, I embarked on an ideation phase that would inform the interaction of the experience. I also had to account for the difference in design and functionality of the activation versus the microsite.

  • Fun, friendly, progressive and bold
  • Common space: leverage Roche Canada HQ
  • Public vs. Private (which content to situate where)
  • Remote Workers (engage them)
  • Ease of Engagement
  • Branded
  • User-Generated Content / Automation
  • Curation / Post-Moderation
  • Longevity (evergreen)

 

the wall 

Features & Functionalities

  • Brand messaging
  • Star Map
  • New Story Submissions
  • Celebrating Each Other
  • History and Pride Points
  • Patient Impact  Video Clips

Wireframes

IDLE STATE 

The welcome and idle state displays a star map that takes over the entire screen. It will be moving slightly, with constellations, shooting stars and comets fading in and out. Whether the user interacts with it or not, the idea here is to support discovery and exploration. If they choose to not interact with the screen, every few seconds, a star within a randomly selected constellation will light up, and a story will appear next to it. These constellations are based on themes. This feature is meant to provide value to those walking by who don’t necessarily want to engage with the screen just yet, but require the understanding of what the screen does and what content it displays.

EXPLORE & STORY VIEW 

The star map will appear with five constellations, based on different themes, that are scattered in the sky. Users can use their finger to pan left to right on the screen to explore the different constellations and choose a story they’d like to view. Once the story is finally revealed, the header will indicate the constellation theme the user is on. Users can read the story, ‘Like’ it, view other stories in the constellation, or close the story viewer.

SEND A STAR

Employees are able to send a star to a colleague to celebrate them (through the microsite). They select the person, the message they want to send, along with a star of their choosing. Users can submit a star anonymously. They then swipe upward on their device to throw the star into the sky. A feedback message appears to indicate that the person will receive an email with the star.

As users throw a star into the sky, they will appear on the screen, with both the name of the person who received it and sent it appearing Each star will dissolve into the universe as another appears. Not all visitors will have context and information around the initiative. To accommodate for this, after every few stars have appeared on screen, there will be a message to prompt users to send one themselves through the microsite.

To view the wireframes for the full wall experience, including all 5 screens, click here. 

the microsite 

Features & Functionalities 

  • “Stories” feature
    • Recent Stories
    • Theme Browser
    • Submit a Story form
  • Celebrate Each Other: “Send a Star”
  • History and Pride Points
  • Patient Impact Videos

Wireframes 

lessons learned 

Although the reality is that we’ll never have the luxury of time and budget for projects, especially a custom experiential one, there were some lessons learned that will pave the way to better processes for future projects. There are two key lessons to point out: 

  1. Less is moreDesigning an experience around one good idea, is much more impactful than thinking of a series of ideas. We found that there were many separate experiences that made us have to work extra hard to find cohesion and consistency. Ideation therefore was also very broad and didn’t let us dive into one thing in detail. 
  2. QA is not usability testing – Testing for activations is a must, and we have to remove monetary roadblocks and include in our statement of work so there is transparency with the client and our internal team.  Establishing a better UX workflow will allow us to set higher UX standards, adopt a more iterative prototyping mentality and help us anticipate and account for UX changes.