vSTAGE Editor
3D Editor & Presentation Engine
Consider product presentations, instruction manuals, spare-parts ordering, and service monitoring—all in 3D and in real-time. This powerful piece of B2B SaaS software is still under development. A wide range of employees are using vSTAGE, from marketing managers to experienced CAD modelers. This means the UI must be accessible and easy to use for everyone, especially for those without prior experience in 3D space. I accepted the challenge.
Pikaboo
Things can become overwhelming very quickly. One important goal was to simplify as much as possible. Only show what you need, when you need it, with the option show/hide UI elements are important to you. Additionally, personas like 'export' and 'overlays' are available to change the entire UI to an optimized experience for these specific tasks. You can see more of this in the demo video below.
High-Fidelity Prototype Demo
Demo: high fidelity prototype made in Figma
DON'T scroll horizontally... unless...
Scrolling horizontally should always be avoided, as most people are accustomed to vertical scrolling. However, there are exceptions, such as in the 'slides-bar'. Traditionally, in PowerPoint, Keynote, and other similar applications, slides are aligned vertically. For us, this made no sense, since progressing to the 'next something' typically means moving to the right and not downward (as seen in image galleries, etc.). This is why we decided to break from this tradition, and users seem to have no issues with it. This decision comes with a caveat: the horizontal slide bar, with which no one is really familiar. The problem is solved by making the 'tracker' significantly larger and always the same width. This way, it becomes an easy target for trackpad or mouse navigation.
Product website made in Figma
Company Website I designed to introduce the products vSTAGE and vHUB
Concept: Onboarding Panel
Navigating and finding objects in 3D space is one challenge; doing the same with the help of UI elements is another. There are potentially tens of thousands of 3D components, and if you want to select, filter, tag, color, or show/hide many particular elements like nuts and bolts, a well-designed UI can make this task painless. My experience with using 3D tools like Blender and Maya gave me a good understanding of how they handle these challenges, and I tried to optimize the experience wherever possible. Other neat features not mentioned here include bookmarks and selection sets, inverse selections, etc. These are all very important tools that can be extremely useful and save a lot of time.
Conclusion
There is, of course, much more. More challenges and more UI work I have undertaken. It's simply too much to showcase here. All in all, I have learned a great deal from this project. For instance, one can spend a lot of time planning and building artefacts for a design system all day long. However, chances are you will need to go back, adjust, and tweak until you have truly reusable UI components that work everywhere, in every last corner of the app.
Gallery
