An inside look at Pencil: the MR apps that teaches you how to draw

Case Study: Pencil!

Pencil! is a Mixed Reality app that guides users in drawing with step-by-step instructions provided in Mixed Reality via the Quest 3. Using ShapesXR for prototyping and Meta’s multi-modal input for tracking paper, the team quickly developed and refined the app’s design resulting in a highly praised app that redefines how creativity is thought.

Background and Objectives

Pencil! Is a Mixed Reality app to help people learn how to draw. With the power of the Quest 3, we overlay step by step instructions to help creatives on their drawing journey. We were originally worried the hardware wasn’t capable of such an experience and we needed a space to prototype and validate our idea. We also wanted our app to be very accessible and easy to use so having a strong UX was critical.

Decision Process

ShapesXR was the easiest way to get started prototyping and designing. It had all the right tools and systems in place to quickly visualize our ideas early. Shapes is very well designed and user friendly so having everyone in the team learn the tools was a breeze. We were also evaluating different solutions for defining the drawing area and being able to attach UI elements to the controller made it a no brainer.

"It’s a must use tool for prototyping and designing in XR" - Stephen Rogers, Founder of 4th Wall Breakers

Implementation and Use

We first approached Shapes XR as a space to prototype before we started with any coding. It helped us evaluate if the passthrough was good enough to trace elements, and helped us design some of the UX required for the app. Our whole team has been involved in the design process and we had regular meetings in ShapesXR to test out the designs and suggest ideas and ways to improve.

We also utilize Meta’s new multi-modal input in order to track the piece of paper you are drawing on. Our original concept for the app had the overlay static and the player had to constantly move their paper to re-align if it ever moved. But we saw we could attach elements to the controllers in Shapes and utilize it to track the drawing area by placing the controller on top of the paper. Once we tried this in Shapes we knew we wanted to enable this in the real app.

No items found.

Results and Feedback

It’s been a must use tool for the early stages of ideation and development for me, especially when designing for mixed reality. Without it, designing for MR would be a pain.

ShapesXR helped us quickly iterate on designs and led to us having a solid foundation that we could apply to the real application. Being able to test different anchoring and alignment mechanics was a major time saver and a UX breakthrough that had a significant impact on the whole experience.

Response from the community has been great, and the app has been praised for it’s fun and intuitive design, which would only have been possible through Shapes.

I’ve also been encouraged to see constant updates to add even more functionality to the app.