Redesign of 3D app Vectary in 2019
Making a simple 3D design tool from scratch is a challenge for every UX/UI designer. I’ve been working in Vectary from the very beginning and this is what I’ve learned with our latest redesign.
A few weeks ago, we released the 3rd version of the online 3D design tool Vectary, and I would like to share with you the product changes and decisions we had to make during the process.
What is Vectary?
Vectary is a fully featured 3D & AR content creation software right in your browser with millions of assets, real-time collaboration, rendering, augmented reality and the newest and the most important feature — 3D embedding on the web.
Collecting feedback
Collecting and evaluating the users’ feedback was the first step in the whole process. We made a long list of more than 250 issues and feature requests that were popping up in our Zendesk, social media channels and internal team of testers. Every UI designer can confirm that the most important thing was not implementing everything that users suggested, but think what their problem was.
The most important thing was not implementing everything that users suggested, but think what really their problem is.
All the suggestions were prioritized with the overall vision of Vectary to help turn the web into a 3D/AR space.
Here is a selection of the most significant changes in Vectary:
1. Simple and Scalable User Interface
The redesign of Vectary 3.0 brings a whole new experience, a lot of new features and more than 25% of 3D space in comparison to the previous version.
Most of our users have no previous experience with 3D modeling. They are mostly graphic designers, web designers or students. This is the major problem of the 3D software out there: it’s complicated and it takes weeks to make a solid result. We believe creating 3D should be as simple as creating 2D graphics and everyone who enters it should be able to create amazing 3D designs instantly.
We believe creating 3D should be as simple as creating 2D graphics.
With this in mind, we designed a user-friendly interface that follows the standards of 2D design applications to keep the onboarding as smooth as possible.
Header with Modes
Vectary is a powerful tool, but this was not visible at first sight. Many users of the previous version didn’t know they could edit the geometry or create 3D models from scratch. Also switching between modes wasn’t so smooth.
To merge a lot of features into a single page, we used tabs in the header. The 3D editor is now divided into eight separate modes based on the user’s flow and needs. Each of them includes tools for specific use cases to keep you focused. An extendable interface is now ready for new modes like Painting, UV unwrapping or Animations and also we are able to start providing custom enterprise solutions very easily in a short time.
Toolbar
Although the previous version was quite simple, it was a little bit confusing to find where your favourite function is. Buttons were distributed all over space. We arranged all tools in the mode right under the header into a single row. Specific tools for each mode are aligned to the left side and shared functions across other modes like snapping, view type and render preview are adjusted to the right side of the toolbar.
Object list
An object list can be compared to a layer list in the 2D software. A major change in this panel is invisible at first glance. We introduced new parametric modifications and we had to find a way to show the connections between objects. A lot of concepts led us to the conclusion that extending the folder structure with stacking behaviour is the best way to show object dependencies.
Parameters
The right side belongs to the object’s properties. Most objects are editable also by changing values like width, height or segments and complex objects have more specific parameters. Because the parameters can be sometimes very complex with many functionalities. We’ve been working with hiding dropdown menus. As a user gains more and more knowledge in the 3D they can dig deeper in the tool.
2. Object mode
Not everyone wants to create 3D models from scratch. Sometimes a really well assembled and transformed 3D objects can do the job. You can create beautiful scenes very quickly using simple drag & drop and basic transformations like a move, rotate and scale in the gizmo or in the sidebar.
The toolbar in Object mode contains more than 35 draggable parametric tools. Start with simple Box, Cylinder, Sphere, or choose one of next 8 primitives. Image Plane for png or jpg images uploaded from your PC or Web. My favorite Object mode tool 3D Text with more than 600 fonts from Google Fonts library. Uploaded vector illustrations in SVG files will be automatically converted to 3D mesh geometry. You can even import your own model. Every object is convertible to the geometry for continuing with mesh editing in Edit mode.
Parametric objects
The most exciting features are parametric tools — Generators and Deformers where you can twist, bend, deform, and randomize objects. It’s really fun to play with it and create fantastic scenes that would be normally very hard to build from scratch. This is also a great example of how UI design prototyping works in Vectary. All these UIs were designed primarily by developers with the assistance of a 3D designer. How we did do it? The secret lies in the preparation of UI elements that work together. Think of it as a Lego — you have a set of bricks that can be put together to create a unique result. In Vectary those bricks are UI components which help to create new tools very easily.
3. Smart 3D Modeling in Edit mode
You can decomposite geometry to the core, but the biggest challenge is to make the editing tools simple enough even for people who don’t think about 3D geometric shapes every day. For this purpose, we use smart handlers and jogs.
Vectary is one of the fastest pieces of 3D modeling software ever — all that happening online in your browser.
4. A library with 1M+ objects can be overwhelming
Our library of 3D assets, materials and environments became incredibly complex and the challenge was to show the crème de la crème of it. That’s why we introduced curated Collections where we’d like to show assets from talented designers from our community.
5. Comments in 3D space
Team mode allows you to work with colleagues and teammates in real-time on the same 3D scene or get feedback from your client by commenting on specific parts of the scene. It works like the inVision app but in a 3D world. The difference is that flat 2D commenting on a visual is not enough, you need to comment on one side of the object and also on the other part of the object that might not be even visible. That’s why our comments work like stickers you can place anywhere.
You can also invite your team members on the dashboard and collaborate on your company’s 3D assets easily and online.
Embed Mode & 3D/AR Viewer
The most valuable feature for Web designers is the Embed mode. It lets you show an interactive 3D product preview or any 3D elements on your website. The viewer is ready for Augmented Reality which your visitor can use by projecting objects into their environment in real-world size using their smartphone’s camera on iPhone with iOS12 and Safari. Web embedding is under constant development and we would be thankful if you gave us your feedback.
Render right in your browser…fast!
Real-time rendering is one of Vectary’s greatest features. However, when it comes to time spent waiting, graphic designers are not so patient. They want everything now. This is why we added a render quality option so you can instantly see changes in depth, light, and shadows without the need to wait for the details.
Inspired by Instagram, the final render can be prettified with filters like saturation, noise or vignette.
Exported render image contains baked shadow with realistic transparency for easy implementation on the web or in graphic visuals. Very useful is the PNG export presets for the most used social media platforms to save you time. You don’t have to search for the size of the Dribbble image anymore.
Export & share projects… on phones
Designing an export to various 3D formats brings many challenges. Take USDZ for Apple’s ARkit. The file can be checked on iPhone and iPad with iOS12 and above, but Vectary is primarily a web app… Do you see a problem here? We needed to transfer the result to the user’s phone so he would get immediate feedback in augmented reality. Thus every export got a separate page and was delivered to the user’s email, which can be comfortably opened on the phone.
One more feature… the Dark Mode 🌙
After so many interesting problems a 3D design tool in the browser brings, Dark mode was just the cherry on the top. And surprisingly it became one of the most popular features in Vectary 3.0
Start creating 3D today
Get started to learn new dimensions right now and discover the huge potential of 3D content creation with Vectary 3.0 in your learning, designing or business.
We created a simple step-by-step onboarding tutorial to show you the basics. Go to » vectary.com and start creating today or read Vectary’s official release article on the 3.0 version/
Thanks for reading. If you enjoyed this article, feel free to hit that clap👏 button a few times ( 👏👏👏👏) to help others find it.
Follow @milangladis and @vectary to stay up to date.
Author: Milan Gladiš is a Head of Product at 3D design software Vectary
