Part 2 - Developer Insights
In Part 1, we introduced the Pinecil Smart Soldering Iron Display and demonstrated the initial implementation in CGI Studio. As development progressed, the project provided several valuable insights into UI implementation and optimization. These experiences helped us refine both the application and the overall user experience. Below, we share some of the key learnings from the development process.
Insight #1: Implementing the Circular Temperature Slider
One of the most interesting UI elements was the circular temperature slider. Importing the graphical assets from Figma into Scene Composer worked seamlessly, enabling a fast transition from design to implementation. During integration, special attention was required to ensure precise rotational behavior of the slider knob.
As with many circular controls, the pivot point plays a critical role in achieving smooth and accurate interaction. Fine-tuning the pivot position ensured perfect alignment of the knob with the circular track and delivered the intended user experience.
Key takeaway: CGI Studio’s design import workflow enables rapid implementation, while precise pivot point configuration provides full control over advanced circular UI components.
Insight #2: Optimizing Temperature Value Rendering
The original design used the Inter font. During runtime evaluation, we noticed that temperature values appeared to shift slightly when digits changed, due to varying character widths.
To improve visual stability, we switched to Roboto, resulting in a cleaner and more consistent presentation. Alternative approaches, such as fixed-width value formatting (e.g., %03d), could achieve a similar effect depending on project requirements.
Key takeaway: Small typography decisions can significantly enhance perceived UI quality and readability in embedded applications.
Insight #3: Enhancing the User Experience
Hands-on testing of the first implementation revealed several opportunities to further streamline the workflow and improve usability.
More Flexible Temperature Control
The initial version allowed temperature adjustments only from the start page. Based on user workflow observations, we enhanced the design to support temperature changes at any time, either through the circular slider or one of six predefined temperature presets.
Simplified Preset Handling
The original preset workflow required several interactions and made it easy to unintentionally modify a stored value. The updated concept separates preset selection from preset editing, making everyday operation more straightforward while maintaining full flexibility.
Consistent Navigation and Layout
A unified layout strategy was introduced across all screens. Consistent button placement and navigation patterns make the interface easier to learn and reduce the effort required to move between functions.
Harmonized Value Presentation
Temperature and timing values now follow a common visual style throughout the application. This creates a cleaner appearance and helps users quickly interpret information regardless of the active screen.
Conclusion
This project highlights how CGI Studio supports an efficient transition from design concepts to a fully interactive user interface. Practical implementation and usability testing provided valuable opportunities to refine both technical details and user workflows.
The result is a more intuitive, consistent, and user-friendly application while also providing useful insights into implementing advanced UI controls and interaction concepts in CGI Studio.
In Part 3, we’ll take a closer look at the updated design and the improvements made to the user interface.