UI/UX Design
Project
Threekit
Client Info
Threekit develops a 3D Configurator Platform designed for companies to showcase their products in real-time on the Web or using AR. My role as a UI/UX designer was to help improve the general look and feel as well as the user experience in addition to redesigning Threekits web and responsive design of the platform.
Role
UI/UX Designer
Software
Figma
Illustrator
Details
2021
Responsive Design Platform
Threekits web-based powerful 3D configurator used by top companies to showcase their products in AR or on the Web needed a mobile version so clients can edit catalog products with extensive attributes such as lighting, scene stages, and product information. As there was no native app for mobile devices a responsive version of the desktop application was needed as per client’s requests. Unlike typical responsive designed websites, the threekit platforms’ powerful features were a challenge to incorporate into a responsive design as they utilize 3D software type editing tools in addition to extensive cataloging tools.
My Role
My primary role was to create a responsive mobile version of the Threekit web-based 3D product configurator platform. This included updated UI elements and touch navigation which can be used on all mobile devices. In addition, I worked with the development team to hand off the final design for implementation.
The Challenge
- Create a responsive design of the desktop Threekit product
- Retain key functionality from the Desktop version
- Update navigation design for touch devices
- Compatibility with all mobile platforms
Responsive Design Layout Changes
Full desktop functionality was the primary focus for the mobile version of the configurator platform. The recent desktop UI navigational additions which included a re-design of the easy-to-access main sidebar menu system anchored to the left of the screen were utilized for the responsive design. This menu was moved to the top of the screen and accessible easily with touch devices. In addition to the main navigation forms, icons and fonts were updated to fit the mobile layout and the important key catalog function was retained for the clients to be able to navigate and use with ease. A 3D editing component was cut due to the complexity of the feature utilizing 3D models, cameras, and lighting.
Responsive Design Result
The responsive design update of the Threekit configurator platform met all the criteria for usability clients were looking for, importantly the catalog features with future updates focusing on incorporating the 3D tools and long-term a native mobile application.
Community
Re-Design
The Threekit configurator platform community and educational website used extensively by new and existing users and clients was outdated and needed a focused update. Navigation and overall user experience had to be easier to access all the information, glossary, and community forums. Additionally, the self-led training and onboarding process was to be overhauled for easy step-by-step to get the user up and running on the platform.
My Role
With Threekits configurator platform adding more features the community education and tutorial portal with extensive information about the platform need a redesign. My role was to redesign the overall user experience as well as the visual look and feel. In addition, promote new avenues to help existing and new clients to better understand the platform through online learning as well as other education channels.
The Challenge
- Create a newly re-designed and easy-to-use Education and Training Portal
- Re-Design the Community site for an easier and more user-friendly user experience
- Organize large amounts of training videos, articles, blogs, and education/training assets so they are easily accessible
- Promote user training, videos, and material through various channels
- Market webinars, classes, and various training documentation
User Experience + Visual Re-Design Highlights Landing Page 1
Focused highlights of the landing page with updated key components and features in addition to navigation and overall user experience updates.
Landing Page focused updates
- Add top-level navigation for easy one-click access to areas of the website
- Update quick links to key education centers on the community portal
- Add quick tips to showcase key features of the configurator platform
- Promote online learning for clients through webinars with rotating banners of classes, documentation, and training
- Easy access to key features of the education portal such as onboarding, product release notes
User Experience + Visual Re-Design Highlights Landing Page 2
Continuation of focused highlights of the landing page with updated key components and features in addition to navigation and overall user experience updates.
Landing Page focused updates
- Quick start to the self-led training link accessible based on importance from the landing page
- Developer-Kit information key features
- Community-related posts based on recent activity
- FAQ of most common questions anchored to landing can continue to the full FAQ from here
Community and Education Training Portal Result
The Community Portal re-designed encompassed a full navigation user flow update. Access to areas of the site is fewer clicks away and important information is presented in the level of importance first. Promotional education through webinars and other channels is promoted and data such as tutorials are one click away and saves the user from searching the site through sub-menus.
Landing Page
Landing Page – Navigations
Community
Getting Started
Training & Tutorials
Platform Information
