Alvin Groen's profile

HBO: MOSAIC

UI/UX
A new storytelling experience from Steven Soderbergh.

HBO Presents: MOSAIC — a new film experience from Academy Award®-winning director Steven Soderbergh, starring Sharon Stone, Garrett Hedlund, Jennifer Ferrin, Paul Reubens, Devin Ratray, Frederick Weller, and Beau Bridges.

In MOSAIC, as in life, the path you pick affects your perception of reality. What one viewer may consider a fundamental fact on one path may be an insignificant piece of trivia on another — or may not even be a ’fact’ at all. As its title suggests, MOSAIC isn’t complete until all the pieces are viewed in their proper perspective.










Visual Language

Early 2016 Your Majesty got approached by Steven Soderbergh to collaborate on the User Experience of MOSAIC and develop a visual language for the user interface of the iPad app. After a discovery phase of mood boards, multiple visual explorations and motion tests, the decision was made to move forward with the painterly direction and explore further.






After watching the film for a bit, a choice moment appears. Select which character’s perspective you want to adopt to continue your journey.




Motion test from choice moment and transition to next clip. The film was shot in a way that each clip starts on the portrait of an actor.




The user tapped on the screen and the interface appears on top. The user now taps on the map icon in the top right.




At the map the user can see their progress in the film, which paths they have unlocked and which character they're currently following.




The user tapped an unlocked path and will see a portrait of the selected character, and objects hinting to what will be seen in this clip.




A motion test of an older version of a choice moment.




Prototype

Before we continued developing the visual language in the painterly direction we decided to create a simplified look and build a fully functional prototype of the MOSAIC app to test with users.






The full map, in which the user can swipe through, at the intro state.




Showing progress on the map, in part 1.




The user unlocked part 2 and continued watching.




All paths have been unlocked and watched.




The user tapped on the screen and the interface appears on top. The user now taps on the map icon in the top right.


​​​​​​​

At the map the user can see their progress in the film, which paths they have unlocked and which character they're currently following.




The user tapped an unlocked path and will see a preview.





Unlocked paths are highlighted with animation to indicate how the user can continue.




ROLE: Design & Motion
AGENCY: Your Majesty
DATE: February, 2016




HBO: MOSAIC
Published:

HBO: MOSAIC

A new storytelling experience from David Soderbergh

Published: