vSTAGE Editor
3D Editor & Presentation Engine
Think product presentations, instruction manuals, spare-parts order and service monitoring. All in 3D and in real-time.
This mighty piece of software is still in the making and currently available for businesses only. All kinds of employees are using vSTAGE. From the marketing manager to the experienced CAD modeler. This means, the UI has to be accessible and easy to use for everyone, especially to people without prior experience in 3D space. I accepted the challenge.
vSTAGE has been around for a couple of years now, even before I joined. Some businesses use it as their main tool when it comes to marketing, sales and to show off their machines at exhibitions. Below are before/after screenshots. The 'after' is on the right :)
Things can get overwhelming really fast. One important goal was to show only what you need and it is up to you to decide, which UI elements are important to you. Also personas like 'export' and 'overlays' are available, to change the whole UI to an optimized experience for these tasks.
You can see more of that in the demo video below.
Prototype Demo
Demo: high fidelity prototype made in Figma
Scrolling horizontally should be avoided, since most people are only used to vertical scrolling. There are exceptions though, like here in the 'slides-bar'.
Traditionally (in Powerpoint, Keynote and others), slides are aligned vertically. For us this made no sense, since going to the 'next something' usually means to the right and not down (image galleries, etc). This is why we decided to break this tradition and users seem to have no issues. This comes with a caveat: the horizontal slide bar no-one really is familiar with. The problem is solved by making the 'tracker' way bigger and always the same width. This way it becomes an easy target for trackpad or mouse navigation.
Concept: Onboarding Panel
Navigating and finding objects in 3D space is one thing, doing the same with help of UI elements was another challenge. There are potentially dozens of thousands 3D components and if you want to select, filter, tag, color or show/hide many particular elements like nuts and bolts, a good UI can make this task painless. My experience with using 3D tools like Blender and Maya gave me a good idea of how they are dealing with it and I tried to optimize the experience wherever possible. Other neat features we can't see here are bookmarks and selection sets, inverse selections etc. These are all very important tools that can come in handy and safe you a lot of time.
Conclusion
There is of course a lot more. More challenges and more UI work I have done. It's just simply too much to show here. All in all I have learned a lot on this project. For example you can do a lot of planning and build 'atoms' all day long. Chances are you will have to go back, adjust and tweak until you have real reusable UI components that work everywhere, in every last corner of the app.
Gallery
