Vectary 3D - Case Study
💎

Vectary 3D - Case Study

Vectary is Online 3D & AR Design platform for Designers and E-commerce with fully-features 3D modelling tools and modes for 3D geometry editing, scene assembling, or photo-realistic rendering.
notion image
I joined Vectary in 2014 as a 4th startup employee and I was involved in most of the decisions we made. My role changed over the years, but my main responsibilities were to design and deliver a high-quality product.
 
Vectary – Online 3D and AR design platform
Vectary – Online 3D and AR design platform
 
💡
I felt like I was building a hammer for the best creators in the world that designed art that I would never be able to design and that was very satisfying.

Reinvented 3D modelling

Vectary brings the third dimension closer to graphic designers with simple UI and whole new principles of how 3D tools work.
I worked on features that were unique in the 3D content creation, but they were much more intuitive with a short learning curve.
notion image
🌈
User interface looks similar to tools like Figma or Sketch so the Designers feel like they still use their favourite tool.
Vectary is a complementary tool to the Designers’ toolset.
Vectary is a complementary tool to the Designers’ toolset.

My role(s)

I was hired to design and build a fully featured 3D Design tool for designers. As time went by, I designed user interface and design system, hired and led designers, cooperate with the development team and coded the first front-end versions of our 3D engine.

Challenge

Building a 3D engine from scratch requires a lot of research and testing. The third dimension brings a lot of complex dependencies that need to be kept in mind while building new features to keep the UI simple and easy to use.
 
🧠
Reinvented 3D tools Face Placing · Grid Snapping · Redefined 3D Gizmo · 3D Embed · Facebook 3D photos · Textures · Library & Integrations · Real-time Rendering · 3D Comments · Augmented Reality · Simple handlers · Jogs · Parametric plugins · UV Mapping · Sharing · Templates · Collaboration · Dashboard · Activity log · Invitations & Team members · Team Sharing
 

Redefined UX & UI of 3D

From the first day, we’re inventing new and easy solutions for complex 3D creation problems that haven’t been seen in any current tools. We established unique flows in 3D through deep research and a lot of prototyping. Every feature I designed has to be as intuitive as possible and I tried to improve them until they’re in a harmony with the rest of the product.
 
🗑️
A lot of prototypes ended up in the trash, but we learned a lot every single time. As a Designer, I had to detach myself from the outcome of my work and just let it go. No hard feeling, no time wasted.
 

Working Modes

notion image
The 3D design tool is divided into separate and extendable modes that segment and simplifies onboarding and it also keeps the user’s focus on a specific task.
 

UI & Design System

notion image
In such a comprehensive and complex tool it was necessary to have a style guide that will be used throughout the whole company. I defined a set of components we use in the design and in the code.
 

Custom Icons

I made more than 1k production icons that were used across our products.
notion image
Each project deserves a set of custom-made icons to visually guide a user through the whole product. Functions, tools, tabs and other actions are easier to understand with simple icons.
<i class="capsule"></i>
I build an ease-to-use SVG sprites workflow. Vector icons keep the illustration sharp on the retina and sprites decreased server requests.
 

 

3D Elements & Tools

We had to define every behaviour in 3D. From simple grid and intuitive 3D Gizmo and draggable handlers through selections and scene orientation to drawing and geometry cutting.
 
notion image

Redefined 3D Gizmo

Gizmo is an interactive 3D handler for basic transformations like moving, rotating, and scaling. We invented an innovative pivot placing and pivot transform tool with a lot of hidden, but intuitive features under the hood.
 

Grid

The custom grid helps with orientation in 3D space. Instead of 4 viewports, we invented an interactive Snap view. Perpendicular scene rotation snaps the camera to the closest side and switches it to the orthographic one.
 
 
 
notion image
 
🧠
Reinvented 3D tools Cut tool · 3D Drawing · Selections · Marquee · Lasso · Paint Select · Loop · Select similar · Grow & Shrink
 

3D Viewer on the Web

Share 3D content on the web with a few clicks and iframe code usage. We designed the easiest flow on how to get 3D on the web.

Augmented reality for iPhone and Android

With a single click, you can generate Augmented reality files for iPhone and Android. An immersive 3D experience is open right after clicking on the AR button.
👈🏻 Give it a try

3D Product Customiser

Without coding skills you can build 3D customizers your clients can use directly on their product website. Simple as that.
 
 

 

Objects List

It’s not a coincidence that object list behaves similarly to mass market used 2D graphic tools. Since most of our users are graphic designers tipping their toes to the 3D world.
notion image
 
notion image

Drag&drop

Use the object list the same as you’re used to. Dragging, searching, renaming, right mouse click menu or folder. We keep them all to feel the user at home.

Parametric Objects

Folder structure with stacking behaviour is the best way to show object dependencies. Children represent a geometry input to the parent object.
 
 
notion image

 
 

Interactive Onboarding

Even the simplest 3D Design tool needs onboarding.
We prepared multiple step-by-step tutorials that guide a user through useful features. At the end of the tutorial, there is always something created.
It was very useful since it contains also a video of how to use each tool. Users loved it!
Popup guides that explained each tool as visual as possible
Popup guides that explained each tool as visual as possible
 

Vectary for Teams

Most agencies or production studios use old-school 3D content sharing via Google Drive and they’re sending feedback through emails as scrawled notes on the 3D scene’s screenshot.
Vectary – Google Drive in 3D
Vectary – Google Drive in 3D
We discovered a huge need for a timesaving collaboration platform in teams. From team dashboard, real-time collaboration, and activity log to comments we cover the whole 3D content creation in the cloud for teams.
 

3D Comments

Vectary – Get feedback right on the 3D scene
Vectary – Get feedback right on the 3D scene
Get feedback from your client or manager, right on a specific part of your 3D project. Connect with Trello or Jira for easier planning.
 

Team Dashboard

notion image
The dashboard was created in a way it’s useful for new users as well as for the power user with hundreds of projects. It has to load fast and allow users to get things done. The goal was to design it clean and intuitively so the users spent their time modelling rather than organizing projects.
notion image

Organise 3D Content

The sidebar is the main navigation in the dashboard. The design I created covers sorting, filters, search, drafts and team folders, with all states for the drag&drop function to copy, move or delete projects.

Drag&drop

Drag a project you have access to manipulate and drop them into the team’s folder or delete it.

Teams & Drafts

Organise workflow of 3D content creation with teams. Add folders, members and unlimited projects.

Folder structure

and move projects into folders and share them with team members. Double click on the name triggers text editing.

Activity Log

To stay up to date with all changes that were made in your team there’s an Activity log to reply to new comments, check project updates or confirm team invites. Important updates are sent also to your email.
 
Activity log with all important messages
Activity log with all important messages
 
 

Let's work together on your next project👉🏻 hello@milangladis.com