Designing a 3D visualization platform to drive sales and technical training

Company
Visao
Categories
Strategy and UX, Design, DesignOps and training
Expertise

Warning: Attempt to read property "ID" on string in /home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/quick-infos.php on line 121
UI
Warning: Attempt to read property "ID" on string in /home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/quick-infos.php on line 121
UX Co-creation workshops
Warning: Attempt to read property "ID" on string in /home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/quick-infos.php on line 121
User research

Project
Overview

Visao offers an interactive 3D visualization platform that helps sales, engineering, marketing and training teams better present, explain and showcase their products.

For more than three years, we’ve worked closely with Visao and their team to evolve this solution, contributing at every key stage of the design. Through a human-centred approach and regular co-creation sessions, we’ve helped make the platform more intuitive, consistent and suited to a wide range of use cases and user profiles.

Project goals

  • Rethink every step in depth, from building the viewer (Model Studio / Viewer Studio) to its use on the client side (Viewer).
  • Create a clear user experience for non-technical, beginner and even advanced users.
  • Create an adaptable, consistent Design System that equips the development team to maintain the product in the future.
  • Offer a smooth experience suited to different contexts: trade shows, online sales, marketing, training.
  • Design solutions that showcase a wide variety of sectors: manufacturing, industrial, agricultural, museums, construction and many more.

Project stages and key design and strategy focus areas

  • 1. Define together

    User definition workshop covering each user type and their use (marketer, salesperson, trainer, client) and each context (industrial, engineering, medical, sales and marketing).

    User journey design based on needs: adding the 3D model, visual settings, storytelling, annotations, client viewer.

  • 2. Co-design the product

    Facilitation and design workshops: rapid validation of UX hypotheses, exploring concepts related to the viewer builder’s modules and steps.

    Weekly check-ins: co-creation with the in-house team, ongoing agile design management.

    Benchmarking existing competitors on the market to focus on the product’s distinctive features.

  • 3. Support and learning

    Training & DesignOps: introducing collaborative design best practices and training the team in UX methodologies.

  • 4. Structure the visual language

    Design system: creating a modular, documented system (UI components) ready to scale, ensuring consistency between the creation modules and the viewer.

    Web app design: the creation interface (viewer builder) + the interface seen by end clients (3D viewer).

Assessing the landscape

Before proposing any solutions, we felt it was essential to question the key steps and actions needed to create a viewer truly suited to specific client types and contexts. This approach let us ground our design choices in the concrete situations where the viewer would be used, such as:

  • presentations at trade shows and exhibitions
  • integration into a marketing website
  • sales support, in person or remote
  • adding a 3D configurator to an e-commerce platform
  • creating an interactive 3D instruction manual

Defining use cases

Segmenting use cases (by field and by context) helped us identify client profiles, then structure a clear, interconnected map of the essential, cross-functional, missing or improvable features for the Visao platform.

<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />

Adding a new model in UX / Developed version

Model Studio interface

The viewer creation app involved several essential steps, some of them very complex, to set up the model for the viewer.

The first step was to define the model’s basic information (Details) and track conversion and rendering (Settings). Next come lighting adjustments (Lighting) and choosing the scene background (Background).

Panel view for adjusting a model's details and information (UX) / The developed version

Viewer Studio interface

Once the 3D model is ready, the next step is to create the final viewer. The Viewer Studio becomes the interactive container where the model truly comes to life.

This interface lets users stage the product with features such as sequences, animations, annotations, detailed descriptions and custom views.

The goal of the viewer redesign was to completely rethink the creator’s experience to make it easier to build engaging narrative experiences around 3D content.

The sequence creation step in UX / The developed platform

Theme management

The Visao platform automatically adapts to the appearance set by the user in their operating system, whether light or dark mode.

Version «Dark Mode» de la plateforme Visao

Final viewer

The viewer reflects the work done in both the Model Studio and the Viewer Studio, delivering an immersive experience to the end user that stays true to the creator’s intent.

You can try the viewer yourself here.

Vue du Help Center qui permet de se familiariser et de comprendre les fonctionnalités clés de la plateforme
<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />

Help Center view / Annotations and contextual content / Sequences / Measurement and pinpointing features

Mobile and AR

Since the viewer can be used in many contexts (trade shows, museums, stores, on the road), it was essential to optimize it for a smooth experience on mobile devices.

The augmented reality feature lets users view the object directly in its real environment, giving a more concrete sense of its scale, use and fit. This is especially valuable at trade shows, particularly when equipment is too large or complex to bring on site.

Mobile version of the viewer / AR feature

Collaborators

  • Digital Art Director, Senior UI/UX Designer

    Serena
    Capozzi

    Driven by innovation and research, I love exploring the codes of visual communication and how they apply to everyday life....

  • Founder of Alternateeve Studio - Altee RH / Technical expert

    David
    Boitard

    David loves designing solutions that are both effective and easy to use. With Diapason, they have worked on creating several...

  • Founder of Diapason, UX and Customer Experience Designer

    Julie
    Simard

    Passionate about the possibilities of collaborative design, Julie had long dreamed of launching the Collective. Her first intention was to...

Ready to create projects that resonate?

We've got the right tempo.

We've got the right tempo.

Drag
Play