First Sketch

First Sketch provides an immersive, guided user journey for first-time users, walking them through essential steps to create their initial sketch. This is achieved via an interactive, step-by-step tutorial that helps users set up their scene, become familiar with the controls, and ultimately craft their own to-scale 3D motorcycle sketch.

Matt Whitby - Product Designer

Will Crane - Software Engineer

Jonathan Ford - Software Engineer

Charlotte Tracey - Senior UX Researcher

Timeframe: 12 weeks

Outcome: Shipped Experience for First Time Gravity Sketch Users

Organization

Gravity Sketch

Type

VR Onboarding Tutorial

Year

2022

Brief

Description

Gravity Sketch VR currently faces a challenge with new users undergoing a solo onboarding process. This poses difficulties for VR novices in grasping the platform's value independently, resulting in poor reviews and a high 15-minute dropout rate for two-thirds of users. This jeopardizes our brand reputation and potential sales leads.

Constraints

  • Enhance the early user experience in Gravity Sketch to quickly convey its value.
  • Identify and prioritize key aspects of Gravity Sketch crucial for first-time users.
  • Utilize an iterative approach for informed decision-making and faster progress.

Timeframe

12 weeks

Discover

This project succeeded our retail demo initiative, offering valuable insights as a starting point. However, its emphasis shifted towards a distinct audience and formed a crucial part of our broader strategy to enhance user onboarding. During the discovery phase, our primary focus was on evaluating the impact of our existing user journey and defining the desired user sentiments and understanding post-engagement.

This was our preexisting 1st time user experience

Prior to this project, our app lacked a comprehensive guided first-time user experience. Upon opening the app for the first time, users were greeted with an introductory video overlay in the lobby. Subsequently, users had to self-onboard by navigating to the 'Learn' tab for in-app tutorials or resorting to external resources, such as YouTube videos.

How this was impacting our users

The self-directed and unguided user experience resulted in poor reviews on the Meta Quest store and a significant level of reported user frustration during initial attempts to learn Gravity Sketch. While highly motivated tech enthusiast designers were willing to independently explore and learn despite the frustration, the average user experienced a higher level of churn or disinterest. This observation was reported by our internal design consultants during their customer training sessions.

What we wanted users to feel

The self-directed and unguided user experience resulted in poor reviews on the Meta Quest store and a significant level of reported user frustration during initial attempts to learn Gravity Sketch. While highly motivated tech enthusiast designers were willing to independently explore and learn despite the frustration, the average user experienced a higher level of churn or disinterest. This observation was reported by our internal design consultants during their customer training sessions.

Define

What

Develop a tailored, guided experience for VR newcomers, leveraging insights and technology gleaned from the retail demo

Who/Where

First-time designers downloading Gravity Sketch from the app store.

Why

Guide users to discover the value in GS, aiming to boost second-day retention among new users within their first week of usage.

How

Conduct iterative design, prototyping, and testing cycles with target audience representatives to deliver a revamped onboarding experience for the app.

Develop

During development, we created and tested two iterations, focusing on exploring and assessing the flow structure for user clarity and completion. We evaluated each iteration with two groups of six users, representing our target audience.

Iteration 1

To speed up prototype delivery, we utilized the UI system from the prior retail demo project. Our main focus was shaping a fresh user flow and specifying a new sketch project for the first-time user journey. This process involved addressing various user states and decision points to cover all potential scenarios.

Past experiences we built & learned from...

Throughout the previous year, we experimented with diverse onboarding approaches and developed a guided retail demo. Leveraging technology, UI insights, and learnings from these prior projects, we informed our user flow decisions to facilitate swift progress. Notably, we incorporated the well-tested retail demo task panel, visual effects, and pop-up system from past user research into our approach.

Link to retail demo project

Defining the flow

To craft the user flow, we considered the entire journey from the initial download to completion of the guided experience. We also factored in scenarios where users might skip or exit early. Aligning with the core skills emphasized in our customer training sessions, we tailored the user guidance to ensure a quick grasp of fundamental abilities within the app. These essential skills encompassed drawing, changing color, undoing, scaling, grabbing, and moving.

Evolving the Project Oriented Learning Approach

To facilitate skill learning, we centered the experience on crafting a low-fidelity sketch of a 3D motorcycle around reference geometry. This choice highlighted Gravity Sketch's sketching capabilities, striking a balance between being intriguing without becoming frustrating or overly complex. Importantly, it resonated with one of our key markets – automotive designers. Employing tracing as the sketching method offered ample guidance, encouraging users to sketch in 3D rather than 2D and ensuring successful completion of the steps.

Storyboard of Iteration 1

To convey the design intent of the flow and experience, I crafted a storyboard using screenshots of a 3D Gravity Sketch model. This not only facilitated swift comments and collaboration but also served as a centralized reference for this prototype.

User Testing & Feedback

From our usability testing, key insights emerged. Firstly, the success conditions for the tracing part were too stringent, resulting in users unable to complete certain sketch portions. We lacked sufficient visual and haptic feedback, leaving users uncertain about task fulfillment. The 3D nature of the sketch proved challenging for users, leading to errors in task completion due to inadequate guidance on rotation and movement. Despite these challenges, users successfully understood Gravity Sketch's intended purpose upon completing the experience.

Iteration 2

Iteration 2 enhanced and streamlined the UI and interactions for more ergonomic task communication and improved user attention guidance. It specifically addressed user concerns related to movement and depth by incorporating increased visual feedback and additional instructions.

Refining the flow

Based on insights and feedback from usability testing, we made two key updates to the user flow. First, we introduced a step to teach users how to rotate the sketch, encouraging greater understanding of depth in the sketch. Additionally, we incorporated more messaging to prompt users to frequently move the sketch for better reach. Second, we removed the end animation as it garnered a negative response and lacked perceived value. Instead, we concluded the experience by guiding users on accessing additional learning content, leaving them in a sketch environment to continue learning and creating.

Systematizing the visual design

At this stage, I implemented a more systematic approach to the UI panels by introducing a dedicated color palette and UI kit tailored for onboarding experiences. This aimed to address the usability concerns identified in prior user testing and establish a scalable system for future endeavors. The system consisted of consistent in-context popups with varying visual details based on context, a task panel indicating the number of steps and providing an exit option, and a chat panel for communication, introducing new steps, or transitioning between tasks.

Storyboard of Iteration 2

The slideshow above features the complete V2 high-fidelity storyboard, providing a comprehensive display of the design intent and detailed user flow.

User Testing & Feedback

In this phase of user testing, we encountered no significant blockers in the experience. We noted minor UI and usability findings, but nothing that hindered users from completing tasks. Users expressed excitement and intrigue about the software's potential. With this positive feedback, we felt confident transitioning into the production phase.

Deliver

With the design direction established, we transitioned into the delivery phase, concentrating on refining the experience's finer details. This encompassed developing higher-fidelity shaders for enhanced user feedback, fine-tuning the UI, adjusting task success criteria, and systematizing the technology for future use. The video below showcases the final shipped experience.

Next Steps

Following the project delivery, we persisted in enhancing the user experience by incorporating feedback from the community, user data, and aligning with business objectives. Subsequent iterations included introducing signup earlier in the process, refining UX copy and visual design, and restructuring how users entered the experience.

Learnings

Takeaways

The most significant takeaway from this project was the importance of consistent and early communication with all stakeholders to achieve alignment. Additionally, I developed a greater ability to think systematically about UI, working towards creating more scalable solutions.

What I would do differently

Early in the project, we made a decision to guide users away from certain areas of the VR app that required improvement, with the aim of enhancing the first-time experience. However, upon release, this approach resulted in additional confusion and friction for first-time users who struggled to comprehend the flow. In hindsight, I recognize the value of utilizing available experiences more effectively and adopting a more iterative approach to enhance the overall user experience.

Other work

Want to make something great? Drop me an email.

→ Matthewswhitby@gmail.com