Redesigning the Vectary 3.0 — 3D and AR creation tool online
--
Vectary is a 3D & AR content creation platform right in your browser. With millions of assets, complex, but simple 3D modeling tools, photorealistic rendering, augmented reality, and new Web3D features Vectary has become a key player for Web 3.0 needs.
My role
As the Head of Product, I was responsible for researching, leading, and planning the platform’s redesign, and managing 2–3 designers, but I was also an individual contributor who set up the new redesign structure, Design System, and an icon set of 300+ icons.
My priorities
- Universal Design: Bring an interface that’s similar to visual tools Graphic Designers use daily and find a symbiotic combination of 2D interface and 3D features
- Consistency: Set up the Design System and supervise the designers to keep the alignment with our design rules and guidelines
- Simplification: Focus on simplification of complex 3D functionality — research, and invent new easy-to-use 3D tools
Problem
Our main objective was to align the Vectary platform with Web 3.0 needs, refactor the codebase, and make the user interface simple and intuitive for visual graphic designers while accommodating the demands of parametric design and sharing 3D content online.
- User Interface Simplification: Optimise the balance between complexity and user-friendliness of the 3D engine interface with a focus on graphic designers who are new to 3D modeling.
- Scalability: Infrastructure and interface have reached their limits, hindering our ability to efficiently handle the platform scale while maintaining visual and functional debts
- Parametric design Support: To meet market demand, we needed to integrate parametric design seamlessly into the platform.
- Web3D Integration: Integrate market needs for sharing and presenting 3D content on the web
- Monetization improvements: Decrease the churn and shorten the learning curve by implementing onboarding and features that will help users with 3D creation
Personas
Freelancer
- Designing for clients and agencies
- Using Adobe, Figma, and Sketch
- Interesting in new tech and tools
- Want to learn 3D
Studio
- Delivering complex solutions for SMEs
- Team of Graphic, 3D Designers, and managers
- Needs for time and cost optimization
Company
- Selling products via e-commerce
- Owns 3D models from manufacturer
- Can effort 3D modeling service
- Showcase products on the web and in AR
Processes
The code refactoring and redesign were estimated to take 12 months while delivering new functionalities into the existing product. We reached that milestone and released a brand-new Dashboard and Engine interface.
- Market Research & Analysis: We started with the community and collected more than 250 issues and feature requests
- User interviews: We conducted in-person user testing and gathered interesting patterns from Hotjar recordings
- User personas and journey mapping: The definition of our users’ needs and “Jobs to be done” helped us to specify real problems and potential solutions
- Prioritization: By using MoSCoW we selected objectives with the highest RoI, engagement improvement, and churn-reducing potential
- Concepts, and Prototypes: We jumped into the first concepts and shared them internally and with our power users.
- Design: I started building a Design System with a focus on consistency and scalability
- Iconography: I designed or redesigned more than 300 icons to better explain the functionality
- Specifications: As a product team leader, I was specifying all the next steps
- Development cooperation: Planning the next steps, leading sprint sessions
- Testing: Our Product Team did a QA and all the testing before we released the product
- Analytics setup: We defined the main KPIs we want to track and we set events up in GA
- Prepare marketing materials: We worked on a new marketing website while wanted to test a new monetization alternative
- Release
Risks
- Will we deliver on time?
- Can we build a similar UI to Figma or Sketch?
- Is the modular system a scalable decision?
- Will object stacking work?
- Can we revolutionize 3D tools?
Solution
Simplify the user interface that will be easier to use for Graphic Designers while keeping the current feature set and supporting new Web 3D functionality. Scalability should be supported by the implementation of the “Modes” users can easily switch and focus on specific jobs to be done. Isolation of the modes helped us to get rid of dependencies we struggled with not only in the interface but also in the code.
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.
Modes:
Object: Assembly of the scene by intuitive drag&drop of objects on the scene
Edit: Mesh editing with all professional tools a 3D designer needs.
Library: Discover a vast library of 3D assets from the internet or let the user connect his own library
Team: Support collaboration and easy communication over the process of creation
Render: Create photorealistic visuals right in your browser’s window
Embed: Set up the 3D presentation and embed the 3D scene directly on any website or tool like Shopify or Notion
Export: Allow immersive AR functionality and extend 3D file format compatibility
The future of the Web is 3D
Huge improvements in virtual, augmented, and mixed reality shows us the direction of evolution in communication and e-commerce will take. You can see the likes of Ikea or Amazon already trying to incorporate Augmented Reality into their customer experience.
Each market will be disrupted by the experience presented in new apps or tools. We picked 3D because it has become the major dimension of the Web of the not so distant future.
Every smartphone can extend the space around us through the camera. New apps, games, and business solutions are created every day with extraordinary experience and performance thanks to this new dimension and new hardware. The need for 3D content creation grew rapidly and has never been more important than today.
Value of 3D content
The third dimension contains more emotional and visual value than 2D images. 3D will completely replace the status of flat and static content soon with better performance of our devices. This opens up virtually unlimited opportunities for your business. Product presentation in a customer’s home in 3D through augmented reality is an opportunity you didn’t have a few years ago.
Vectary knows the importance of 3D content creation and brings an intuitive and accessible online software to present 3D content on the Web and in AR.
Simple and Smart User Interface
The long learning curve in 3D modeling software causes a 3rd dimension to get less attention than it deserves. The redesigned Vectary 3.0 will bring a whole new user experience in 3D modeling, collaboration, rendering, sharing, and embedding. The interface follows the familiarity of 2D software for graphic designers and users’ requirements with a focus on fast onboarding and quick results.
Starting with 3D designing has never been easier thanks to Vectary 3.0
Separate modes to stay focused
The 3.0 engine is divided into 8 separate modes based on the user’s flow and needs. Each of them has a specific use case and contains only tools the user needs in that specific process, which helps him to stay focused.
Parametric Objects and Tools
Assemble the scene in the Object mode using primitives, personalized 3D text with more than 600 fonts, or uploading your 2D image and placing it into the 3rd-dimensional scene.
Great news for parametric tools(plugins/add-ons). We brought them back and we also added new generators and deformers.
Parametric tools like Bend, Subdivision or Symmetry can deform connected objects and keep the source still in its previous state for later editing.
Lights help you to get realistic visuals. And thanks to the camera you can save the view and set the depth of field to blur the objects out of the focus point like in a real photo.
Smart Mesh modeling
One of the most intuitive 3D modeling tools ever is covered under the Edit mode with smart mesh tools. The toolset for mesh editing is the fusion of many functions you can find in other 3D modeling apps. Each tool is easy to use and smart enough to allow you to create only the valid geometry. Great for beginners and also useful for professionals.
Vectary is one of the fastest pieces of 3D modeling software ever thanks to the smart mesh tools in our Edit mode.
Edit mode also covers some modifications for parametric tools like bend, camera or spotlight.
Library with 1M+ objects
Drag & drop hundreds of thousands of 3D assets and materials from the Vectary Library and external repositories thanks to the integration with Google Poly, MyMiniFactory, and Sketchfab repository. TheNounProject provides direct access to more than a million vector icons which are converted to 3D geometry being after dropped into the scene.
We understand it’s difficult to track the authorship of 3D files, that’s why we pay special attention to licensing. Every project contains the data of imported files, their authors, and links to the original projects.
Collections. With carefully curated objects and materials, you can create your scene with a professional output by dragging and dropping prepared assets.
The simplicity of the Library is ideal for Education or beginners who want to jump into 3D modeling and learn the basics of the 3D world. Including moving objects in a 3D space or even basic transformation principles of 3D objects. All tasks are so simple that can be managed by an eight-year-old.
Comments and Real-time Collaboration for Teams
Team mode allows you to invite team members to work with you in real-time on the same project and get your client's feedback by commenting on specific parts of the scene. You can invite your team members to share and collaborate on your company’s 3D assets easily, online. We prepared special pricing packages for teams. Check the pricing at vectary.com/pricing
Embed Mode & Viewer
The most valuable feature for E-commerce and Web designers is the Embed mode. It lets you show a 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. Web Designers can use the viewer to show the 3D content on the website.
Render right in your browser
Our real-time rendering system prepares the preview of the final render immediately after any change on the scene. For more realistic visuals use lights to get shadows and the camera to blur surroundings with the depth of field function. The Final render can be prettified with filters like saturation, noise, or vignette.
Do not search for the size of Instagram’s photos anymore. Presets with resolutions for social media content are prepared to save you time.
Export & Share project
Our Engine supports a wide range of file formats for import and export, so you can easily add Vectary to your design flow. Thanks to integrations like Sketchfab or Thingiverse, you can easily share your project on different platforms. 3D printing is supported by Shapeways service worldwide, through which you can print your designs and eventually sell them.
3D disruption is coming sooner than you may think.
One more feature… the Dark Mode 🌙
After years of requests, we prepared the Dark Mode for late-night designing… Enjoy ;)
Start creating 3D today
Get started to learn a new dimension right now and discover possibilities of 3D content creation with Vectary 3.0 in your learning, designing or business. Go to » vectary.com and start creating today, or read Vectary’s official release article at https://www.vectary.com/3d-modeling-news/introducing-vectary-3.0-the-future-of-the-web-is-3d-and-ar/.
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 Product Designer who designed online 3D design software Vectary from scratch.
