Toggle
An AI-powered online platform designed to simplify texturing, easily export product photos and display 3D objects in augmented reality (AR).
Overview
I was hired to do a full platform re-design. With applications in e-commerce, architecture, and product design, Toggle 3D needed to be a powerful yet user-friendly tool for professionals working with 3D models.
Role
Senior UX/UI Designer
Company
Nextech3D.AI
Project
Full re-design of Toggle 3D
The Problem
Toggle was created too fast and was lacking thoughtful flows that would easily allow users to
texture, color and export their 3D models
No Design System
Toggle was developed quickly and lacked a design system, resulting in inconsistent icons, color usage, and styles
No Testing
Quick iterations also ment no time for testing. This lead to a product that had sections that made it hard to use which result in a lack of user product adoption.
Rough Design
I was tasked with redesigning the product to address its outdated, inconsistent design that lacked visual appeal.
Testing and Collaboration
To better understand the pain points, I conducted user tests and competitive research. Collaborating closely with the technical team, I learned about system limitations to ensure that our designs could be implemented without compromising functionality. I also worked with our Principal Product Manager and UX design team to establish a cohesive design system, making the interface more intuitive and visually consistent.
Design System
I personally created and established this entire design system from scratch
Current Design Audit
To start I reviewed and documented the existent UI and identified all the inconsistencies in the current components throughout the product. Differences in all UI elements.
Research
Then I had to understand the products goals and user needs by doing testing, technical interviews and determine all of our requirments including competitors best practices
Visual Language
Finally was then able to define a cohesive color palette, typography system and iconography that align with the Toggle brand. Including spacing, sizes and scales
Accessibility Testing
I also ensured key colors were accessible to most users by testing them extensively against various color blindness conditions, such as deuteranomaly, protanomaly, protanopia etc..
Colors
I developed a gradient generator to ensure all gradients were based on a primary color, with lighter or darker shades created by changing the primary opacity percentage and using a white or black background accordingly.
Flexible Components
I created flexible components in Figma using Auto Layout and Instance Swap to ensure quick adjustments and consistent layouts. This approach allowed seamless customization while maintaining a cohesive design, saving time and enhancing adaptability
Component Library
While designing each new user flow, I simultaneously built and linked a centralized library in Figma to house all the UI components and design patterns, ensuring consistency and efficiency throughout the project
Documentation
Another important part was to provide detailed guidelines on how the components would work not only to other designers but also to our technical team.
Test and Iterate
Testing the design system across different product teams helped us ensure it worked as expected and or iterate new design ideas to help the system be as flexible and consistent as possible
Implement Across the Product
I worked with the develpment team to integrate the design system into the existing product to ensure consistency in using it across all product touchpoints.
Mantain and Evolve
As we got other designers involved in the product we were able to mantain the design system and update it as new features and patterns emerged.
Design Comparison
Drag the arrow in the middle of the designs left and right to see the before and after results
Single Figma Design Flows
A small selection of Figma flows that were carefully designed by me, based on thorough research, technical feedback, and testing
