→ 01

Creating the easiest 3D design tool

Vectary 3.0 is an online 3D design tool that aims to empower 3D workflows in online and AR world. The interface is easy enough to have a first project done in less than 15 minutes, even for an absolute 3D beginner. The product brings heavy features such as embeddable viewer, organized CMS for 3D files, or collaboration. Everything is stored in the cloud, so you don't have to bother with project files or manual saving.

Try Vectary

October '18 - February '19

→ 02

My Role

In a span of 6 months, I co-led the redesign and implementation of the engine 3.0 with our Head of Product Milan Gladis. Besides managing the product release, I helped to define and maintain Vectary's design system and designed the interface of the engine's modes. Design responsibilities included research, information architecture, user flows, interaction, visual, prototyping, alongside dev tasking and mentoring of new colleagues.

→ 03
‍

Background

In 2014, Vectary started its long-term commitment of bringing 3D to the masses. With a steep learning curve and a growing community platform, we were able to successfully cover our role and continue to expand with new releases. Vectary 2.0 introduced a new design of the engine and key features, such as the object mode, texturing, or rendering. The upcoming months after the release were essential in defining the trajectory towards our initial goal.

→ 04
‍

Challenge

High level goals:
1. Prepare the engine for the growth
2. Determine where the product features should be heading
3. Create proper guidance for the user

With 2.0, we divided the engine's functionality into multiple modes under which we hid all the tools. The toolset still contained just a portion of what Vectary could reach. At the time, we had an already existing user flows - new implementations in 3D are often hard on resources, so the right decision making in the future progress was crucial. Our ambition was to create a strong base for the complexity which was Vectary already reaching.

→ 05
‍

Solution

Vectary 3.0 brings the full suite for designing, managing and sharing the 3D content through AR and online media. With its approachable design, anyone can pick up the 3D content creation easily and include it in their workflow.

Together with separating space for the modes and tools, and proper maintenance of our own design system, the flow between each of the parts of the product can be kept intuitive and accessible.

Engine's header contaning all the modes.

Unified Design System

The user can use a helping hand through the interactive onboarding, during his first steps in the engine. Through the guide, he can be comfortably introduced to the basics of our functionality.

Preview of the step-by-step onboarding.

Interactive Onboarding

Introducing 17 new tools, the workflow is significantly sped up during the modelling and assembling process. All thanks to the smart deformers and generators, which can be stacked and combined with each other.

Bend - one of the smart tools we implemented.

Smart Tools

Embedding allows a scene can be uploaded anywhere on the web through the iframe code, or the link. The embed can contain an AR view for both Android and iOS devices.

Rotate the embedded 3D model.

Embeddable 3D Viewer

→ 06

Process

At the outset of the redesign, we already had various insights from the usage of 2.0. I conducted multiple testing sessions with users and visited and researched workflows in companies such as Pixel Federation to get a better idea of the needs and the pain points of the market. During the sessions, I placed emphasis on learning their exact current flows and discovering how is the 3D task assignment executed.

In close collaboration with the CEO and the analytics team, we gathered all the necessary information from feedback, testings and analytics tools we had. During a couple of brainstorming sessions, we reframed the whole source of knowledge into a few takeaways on which we based the 3.0.

Engine's interface is not unified

From the testings of each of the user flows, we uncovered multiple flaws in the design, such as long mouse travels, insufficiently communicated transitions between the modes, or hard to find export. Also, the interface had to be prepared for doubling the number of modes without getting messy.

A proper guidance is missing

From the observations of the initial sessions made - where user met the product for the first time, we discovered a helping hand is inevitable. Otherwise, the 3D environment might be overwhelmingly stressful at the first impression.

Users have to do a lot of manual work

Creation of a usable 3D model is often time demanding and requires a lot of manual work to be done. Multiple operations used during the workflow are relatively simple and might be developed into more smart and intuitive ones.

More than 70% of exports were done for AR and social media

This one was pretty much self-explanatory - the primary usage of Vectary was heading towards the AR and the online world. After the release of 2.0, we had an opportunity to experiment with new formats - USDZ by Apple, and GLTF by Chronos Group to get insights into AR.

Our first steps were defined by unifying the current work modes. One of the major challenges was to create an interface that would fit the needs of several different user groups. That meant multiple different flows and functionality usages were needed to be put on the same priority level. We identified the key specs for each business, then mapped out the user flows based on them.

As we were progressing with the UIs, I prepared a prototype of each of the engine's modes. We conducted a meeting with the team, and in the form of a design review we consulted the solution. Few major takeaways were taken, necessary for another iteration.

To establish a release plan and define tasks for the development team, we repeated the same process multiple times. As a result, we created an implementation plan for 3.0, that consisted of dividing the whole team into numerous groups. I took responsible for multiple of them - including the object mode, onboarding, library, and commenting.

During the ending phase of the development, we managed to put all of the pieces of the engine together and conducted testing focused on the power usage mainly. After validating the functionality, we were ready for the release.

Functionality shows how the flow has changed.

A brief evolution of
the prototype.

Main screens from the process of designing the library.

→ 07

Outcome

With 3.0, we prepared the engine for the growth which it can undergo. The unified design system allows new implementations without fear of ending up with an overwhelming and clumsy functionality. Additionally, the implementation of the embeddable viewer successfully laid the foundation for the move towards the mass market and helped Vectary to be a step closer to its original vision.

Overall, the product was very well received by the community. After the release, the team continued with a close observation of its usage. We aimed to catch all the flaws which occurred and be able to provide a stable and reliable tool to the user.

“[Vectary] is definitely a tool that I want to have in my arsenal … It is really something lightweight that I think a lot of designers can benefit from.”

Ran Segall, Flux Academy

“Vectary is making 3D so approachable.”

Meng To, Design+Code