Industry

Virtual Reality

Company

Gravity Sketch

Role

Senior Product Designer

UX Audit & Spatial UI

Gravity Sketch is on a mission to revolutionize the way we bring ideas to life and fundamentally change the way 3D design is done today. The platform allows engineers and designers to work collaboratively to explore initial product ideas, share project details, and designs in real-time.

+100k Monthly users

+1 Million downloads

The Challenge

Gravity Sketch's rapid growth led to an organic accumulation of features that, while functional individually, resulted in a fragmented and inconsistent user experience.

To address this, I conducted a comprehensive UX audit to map all interactions. The document serves as a guide to align existing features and inform scalable, cohesive future developments, with the goals of:

  • Enhancing user experience

  • Boosting engagement

  • Minimizing frustration

Ultimately, this approach aims to drive user conversion and business success.

Role overview

Senior Product Designer

Conducted the audit and synch with the company leadership to review findings and prioritize roadmap.

How I conducted the UX audit

  • Conducted a comprehensive overview of the app to understand its structure and functionality.

    • Documented triggers/buttons to get to every feature on the app.

  • Explored key company verticals, focusing on automotive and footwear design.

  • Interviewed design consultants and onboarding specialists working with clients like Ford, New Balance, and Nike to:

    • Gain insights into product perception.

    • Identify broken workflows and usability challenges.

    • Understand common mistakes made by new users.

Findings

Clusters in multiple UX Heuristics

The work aligns with the leadership roadmap and product vision, focusing on enhancing collaboration tools and improving visualization across multiple devices.

Progress So Far:

  • Released features:

    • New Color Panel and Materials

    • Updated Iconography

Next Steps:

  • Remaining findings will be addressed in the next major quarterly product updates during 2025.

Iconography

Inconsistencies cost time and hinder new users from understanding the product's value, often leading to frustration and abandonment. Iconography plays a crucial role in creating a seamless and intuitive software experience.

Challenges with Gravity Sketch's Icons:

  1. Icons were created in silos without a cohesive brand guideline.

  2. Icons varied drastically in complexity, ranging from 5K to 75 polygons. This caused performance issues in the VR app, as panels with high-polygon icons could exceed the "polygon budget," freezing the app or headset.

Solutions Implemented:

  • Developed clear guidelines for VR icon design:

    • Export to Unity with -Y forward and Z up.

    • Icons limited to 300 polygons or fewer.

    • Include hover animations.

    • Standardized material properties: white, grey, and purple.

These guidelines ensured new icons were consistent, on-brand, and optimized for performance.

Streamlining process from Figma to Unity

Some icons were modeled from scratch in Blender and exported to Unity, while others needed to align with Gravity Sketch's desktop app icons. To address this, I created a pipeline for converting 2D icons from Figma into optimized 3D icons in Blender, then exporting them to Unity without exceeding the 300-polygon limit.

Process:

  1. Import SVG from Figma to Blender.

  2. Convert to mesh and extrude.

  3. Apply remesh for accurate geometry.

  4. Decimate for low-polygon optimization.

  5. Export as FBX for Unity development.

Using remesh ensured accurate decimation, producing visually appealing, low-polygon icons.

Color & Material update

The UX audit revealed significant usability issues with the color and material panel, particularly the difficulty of accessing texture controls. Users faced an overly complex process requiring multiple inputs to reach the desired settings deep in the level of hierarchy for a feature that should be easy to access.

The following images illustrate the process:

  • Figma UI Handover: Documentation provided to developers for implementation.

  • 3D Mockups in Gravity Sketch: VR room mockups used in workshops to gather user feedback.

  • Before & After: Developer-created prototypes showcasing improvements.

Before & After

  • Previously, editing textures required holding the grab grip while pressing the color button, a complex process for VR beginners. Besides that, the color menu would always open on top of the object, resulting in poor spatial visibility of the UI.

  • The new design, on the right, features a detachable menu, simplifying interaction and enabling more intuitive, physical manipulation of objects.

Let's connect

2024, London @ Framer

Let's connect

2024, London @ Framer

Let's connect

2024, London @ Framer