The redesign contained a 3.0 release of the 3D engine, completely revamping the interface and adding multiple core product features. The release was crucial for the growth of Vectary, aiming to stabilize the user base and the market focus. As a product owner, I’ve co-led the redesign and a team of researchers, designers, and developers that worked on the release.
1. Challenge
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, and the product showed off multiple flaws that needed a proper solution. New implementations in 3D are often hard on resources, so the right decision-making in the future progress was important in order to not to lock us out of viable paths.
2. Research
Each target group was researched with suitable companies to understand the problem first-hand. This provided great insights into the needs of our end-users, but at the same time, put pressure on the proper prioritization. The product was also fully tracked in terms of the interactions and flows, so we could pull out lots of valuable usage data. Once all of the necessary knowledge was gathered, I’ve run a series of back-and-forth sessions with the core stakeholders, to review the priorities. This resulted in a solid ground for the kick-off of the development.
3. Map & Strategy
Mapping out the full context of the problem we were solving enabled us to keep an overview of each part of the product. This contained a lot of mind maps and user flows, narrowing down the narration of the release.
An example of the usage and costs of existing target groups.
4. Wireframes & Prototype
From the early beginning of the design process, we’ve pushed the wireframes through rapid prototyping to validate the decisions with each step. For most of the part, Figma served great as a quick prototyping tool. Once the UX & UI hit the final form, we’ve moved the prototype into Framer, to create an interactive version strengthened with a custom code.
Early prototype, showing off one of the initial iterations of the new interface.
5. Outcome
5.1. Unified Design System
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.
5.2. Interactive Onboarding
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 the engine’s functionality.
5.3. Smart Tools
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.
5.4. Embeddable Viewer
Embedding allows to spread 3D anywhere throughout the web with the iframe code, or the link, including AR view for both Android and iOS devices.
