Back

Dualite

Revamped interfaces, resolved UX issues, designed responsive websites, and supported the launch of Dualite 2.0.

Product Design

Internship

Tech Industry

Dualite

Redesigned the Website and Dashboard, fixed UX issues, added new features, created Figma templates, and supported the product launch.

Product Design

Internship

Tech Industry

My Role

Product Designer

Internship

Timeline

May 2024 - Aug 2024

Overview

Dualite is an AI-powered design-to-code tool that converts your Figma designs to high-quality responsive and reusable code.

As a Product Designer at Dualite, my primary role involved revamping the Website and Dashboard, aligning them with the new design system and integrating features like Page Mode and Component Mode, collaborating with a graphic designer for assets. I addressed UX issues in the existing Figma Plugin UI, restructured the Dashboard's information architecture, and designed responsive website layouts. I facilitated developer handoff, resolved design limitations, created Figma community templates, and contributed to marketing efforts during the Dualite 2.0 product launch.

Achievement

In July 2024, I contributed to Dualite's 2.0 product launch marketing, helping them achieve #1 Product of the Day on Product Hunt.

Dualite Website Revamp

Focused on aligning with the new visual identity for the 2.0 launch, highlighting features like Page Mode and Component Mode. I designed responsive layouts in Figma, collaborated with a graphic designer for custom assets, and worked closely with developers to ensure seamless implementation of the new design, creating a modern, user-friendly platform.

It's Live

Website Highlights

Additionally, I animated assets designed by graphic designer within Figma and optimized them for web integration by converting them into Lottie animations using Lottie Labs and Lottie Files. This ensured smooth, lightweight, and scalable motion graphics for the website.

Dashboard Redesign

The dashboard serves as the central hub where users manage design-to-code conversions generated via the Figma plugin.

The existing dashboard suffered from scattered design conversions, making it difficult for users to locate specific conversions. It lacked effective filtering options and clear categorization for the Page Mode (static frames and prototype flows) and Component Mode (static and interactive components) features. This resulted in a poor user experience and inefficiencies in workflow management.

My role was to address these challenges by designing a streamlined user flow and implementing filtering mechanisms to differentiate between various conversion types. I also ensured the dashboard design adhered to the updated design system, incorporating the Page Mode and Component Mode features seamlessly.

The dashboard serves as the central hub where users manage design-to-code conversions generated via the Figma plugin.

"Due to an NDA, I cannot disclose specifics; so the above overview focuses on my role and design strategy."

"Due to an NDA, I cannot disclose specifics; so the above overview focuses on my role and design strategy."

Figma Plugin UI

I worked on refining the Figma Plugin UI by addressing critical UX issues in the existing user flow. Collaborating closely with developers, I identified design limitations and adapted solutions to align with technical constraints while enhancing the plugin's usability.

UI Onboarding

We discovered a high drop-off rate after users logged in, mainly due to their unfamiliarity with the tools and UI.

To address this, I designed a 3-step onboarding process that highlights key features, ensuring users can easily navigate and utilize the product.

We discovered a high drop-off rate after users logged in, mainly due to their unfamiliarity with the tools and UI.

To address this, I designed a 3-step onboarding process that highlights key features, ensuring users can easily navigate and utilize the product.

Design Selection

When users select a design in their Figma file, the plugin UI was intended to display the original design. However, due to development limitations, the original design could not be retrieved, only the first and last frame names and type data could be collected.

To resolve this, I designed graphics that clearly display the selected design, making it easy for users to identify through the frame name.

Feedback form

Dualite aimed to expand its product by introducing new features. To gather feedback on their features to gain deeper customer insights into usage patterns and to inform new feature proposals.

The form included questions about users’ favorite aspects of Dualite and suggestions for additional features they’d like to see.

Dualite aimed to expand its product by introducing new features. To gather feedback on their features to gain deeper customer insights into usage patterns and to inform new feature proposals.

The form included questions about users’ favorite aspects of Dualite and suggestions for additional features they’d like to see.

Conversion Settings

Users faced challenges with design sizing and unwanted internal triggers being converted into code, disrupting the output.

To address this, I designed a settings popup that enables users to customize their conversions, providing control over sizing and trigger management for a cleaner result.

Users faced challenges with design sizing and unwanted internal triggers being converted into code, disrupting the output.

To address this, I designed a settings popup that enables users to customize their conversions, providing control over sizing and trigger management for a cleaner result.

Community Templates

Dualite provides free design templates on their Figma Community page. I created six unique templates, focusing on diverse use cases to cater to broad range of design needs. These templates are now live and accessible to the community.

View All Templates

Figma Flex Wrap

I used Figma's Flex Wrap tool for internal testing at Dualite to ensure design responsiveness.

Reflection

This internship was an invaluable experience that challenged me to solve real-world design problems while enhancing my technical and collaborative skills. I am deeply grateful to the team at Dualite for their guidance and support throughout this journey. This experience has prepared me to approach future challenges with greater confidence and creativity.

Testimonial

Bhakti has great work ethic, and a sincere hardworking attitude complemented by her sharp design and UI/UX skills. Had a pleasure working with her, and her learning curve is great and she picks up new things quickly and the mindset to whatever it takes to get the work done is phenomenal.