The Other Side in 3D is an interactive ebook created using Mental Canvas’ authoring software. It is an independent product that served as a proof of concept for the company, showing that people weren’t only interested in creating Mental Canvas content but also simply experiencing it. The Other Side in 3D was released in 2015 on the App Store, where it was an editor’s pick on the home page in nineteen countries, and the #2 most downloaded app in Russia in its premiere week. In the US, it was featured on The NY Observer, as well as AIGA's Eye on Design blog. You can download it for iOS on the App Store.

 

The Other Side began as a print book by the notable illustrator Istvan Banyai (Zoom, many New Yorker covers) in which you’re shown a page and then, on flipping the page, you see another side of the scene that changes your perspective on the first page. Though it was marketed to children, it is a beautiful and thought-provoking book for all ages.

In transforming TOS from print to a fully-interactive 3D ebook, we had a few important considerations:

  • How should we handle the relationship and transitions between the pages?
  • How could we ensure that the app would be usable by children all over the world?
  • How could we integrate the 3D content while respecting the book? And could we use the advantages given by 3D to up the app’s “revisitability” factor?

 

The UI of the book ended up being fairly simple. Most interactions are conveyed pictorally, so that young children can experience the book
as well as older children and adults. Basic
touch gestures (pinch to zoom, single finger drag to pan) allow the user to explore each page. You can tap to make the UI disappear or reappear at will. There is an expandable tray
at the bottom where the user can see all the pages in the book, and tap to jump to the page of their choice.

 

The trickiest portion of the UI to work out was the page transitions. Each page has a “hot zone” along the border, similar to how a Kindle book works. You can flick from that zone to turn the page and automatically show the transition to the next page. However unlike existing 2D book apps, our pairs of pages have a spatial relationship to one another. During the transitions bonus content appears and disappears, sometimes too quickly to see if the transition plays automatically. To enable the user to explore this relationship at their own speed, we created UI so they could manually transition between the pages. If you drag from the hot zone to about 3/4 of the width of the page you can see the transition happening interactively at the speed of your drag.

 

Since this interaction is atypical, we created an interactive onboarding process to teach users how to manually control the transitions. When the user first touches the hot zone on either side of the page, a animated hand appears for them to drag into a target. After they successfully complete the transition on each side, the animation disappears for the duration of the session.

 

For marketing the finished app, I storyboarded and created a teaser trailer to drum up interest for the release. I wanted to convey the idea of flipping, interactivity, and perspective that the app has, but without giving too much of the experience away. I think the trailer did an excellent job maintaining the sense of fun and surprise that Banyai's 2D drawings have.

 

For more information on Mental Canvas
and The Other Side in 3D, visit www.mentalcanvas.com.

 

 

 

 

The Other Side in 3D /

 product design + marketing

Pages menu, expanded view

Onboarding for swipe gesture and a user swiping to see a transition

Video showing the interactions between pages

Social media marketing posts

The Other Side in 3D /

The Other Side in 3D is an interactive ebook created using Mental Canvas’ authoring software. It is an independent product that served as a proof of concept for the company, showing that people weren’t only interested in creating Mental Canvas content but also simply experiencing it. The Other Side in 3D was released in 2015 on the App Store, where it was an editor’s pick on the home page in nineteen countries, and the #2 most downloaded app in Russia in its premiere week. In the US, it was featured on The NY Observer, as well as AIGA's Eye on Design blog. You can download it for iOS on the App Store.

The Other Side began as a print book by the notable illustrator Istvan Banyai (Zoom, many New Yorker covers) in which you’re shown a page and then, on flipping the page, you see another side of the scene that changes your perspective on the first page. Though it was marketed to children, it is a beautiful and thought-provoking book for all ages.

In transforming TOS from print to a fully-interactive 3D ebook, we had a few important considerations:

  • How should we handle the relationship and transitions between the pages?
  • How could we ensure that the app would be usable by children all over the world?
  • How could we integrate the 3D content while respecting the book? And could we use the advantages given by 3D to up the app’s “revisitability” factor?

The UI of the book ended up being fairly simple. Most interactions are conveyed pictorally, so that young children can experience the book
as well as older children and adults. Basic
touch gestures (pinch to zoom, single finger drag to pan) allow the user to explore each page. You can tap to make the UI disappear or reappear at will. There is an expandable tray
at the bottom where the user can see all the pages in the book, and tap to jump to the page of their choice.

The trickiest portion of the UI to work out was the page transitions. Each page has a “hot zone” along the border, similar to how a Kindle book works. You can flick from that zone to turn the page and automatically show the transition to the next page. However unlike existing 2D book apps, our pairs of pages have a spatial relationship to one another. During the transitions bonus content appears and disappears, sometimes too quickly to see if the transition plays automatically. To enable the user to explore this relationship at their own speed, we created UI so they could manually transition between the pages. If you drag from the hot zone to about 3/4 of the width of the page you can see the transition happening interactively at the speed of your drag.

 

Since this interaction is atypical, we created an interactive onboarding process to teach users how to manually control the transitions. When the user first touches the hot zone on either side of the page, a animated hand appears for them to drag into a target. After they successfully complete the transition on each side, the animation disappears for the duration of the session.

For marketing the finished app, I storyboarded and created a teaser trailer to drum up interest for the release. I wanted to convey the idea of flipping, interactivity, and perspective that the app has, but without giving too much of the experience away. I think the trailer did an excellent job maintaining the sense of fun and surprise that Banyai's 2D drawings have.

 

For more information on Mental Canvas
and The Other Side in 3D, visit www.mentalcanvas.com.

The Other Side in 3D /
The Other Side in 3D /
The Other Side in 3D /