Naren's portfolio

Practical Product Design

Overview

Practical Product Design is a platform designed to cater to the learning needs of product designers. The platform offers a series of engaging and interactive games that help designers learn, retain, and apply key principles of product design.

My Role

Research, Design

Project Type

Personal Project.

Status

In Progress

View Plugin in Figma

The Problem being solved

Many aspiring product designers struggle with the overwhelming amount of online resources available for learning product design. These resources often lack interactivity and practical application, making it difficult for designers to retain knowledge and apply it effectively in real-world scenarios. The absence of engaging and fun learning platforms results in a gap between theoretical understanding and practical implementation.

User Personas

I reached out to a few fellow designers to learn how they label color styles in their projects, and also shared my idea of creating a plugin to automate the task. They were excited about the idea of such a plugin and encouraged me to try creating it.

Brainstorming ideas

First, I created a flow for the plugin. As I wanted to include multiple types of labels, I decided to use check boxes for each type. Users can select the appropriate label type based on their requirements.

Inspiration

Although I am quite comfortable with HTML and CSS, I am still an amateur when it comes to JavaScript. That's why I turned to ChatGPT for help in writing the JS code.

After 4 hours and over 30 prompts, I finally created the minimum viable product, which includes two labeling options: HEX and RGB color values.

Although I am quite comfortable with HTML and CSS, I am still an amateur when it comes to JavaScript. That's why I turned to ChatGPT for help in writing the JS code.

After 4 hours and over 30 prompts, I finally created the minimum viable product, which includes two labeling options: HEX and RGB color values.

Concept Designs

I published this version to the Figma Community and posted it on LinkedIn. I was surprised to see the positive response from many designers.

Building an MVP

I took a week to gather necessary feedback on the MVP and observed multiple style guides from various design systems.

Based on the suggestions and feedback I received as well as observing some common patterns in multiple style guides, I decided to include 3 key types of labelling options.

I took a week to gather necessary feedback on the MVP and observed multiple style guides from various design systems.

Based on the suggestions and feedback I received as well as observing some common patterns in multiple style guides, I decided to include 3 key types of labelling options.

I took a week to gather necessary feedback on the MVP and observed multiple style guides from various design systems.

Based on the suggestions and feedback I received as well as observing some common patterns in multiple style guides, I decided to include 3 key types of labelling options.

1) Color values - HEX, RGB, HSL and HSB.

2) Custom Color name.

3) Color/Tone format for multiple shades.

1) Color values - HEX, RGB, HSL and HSB.

2) Custom Color name.

3) Color/Tone format for multiple shades.

Implementing these features in code seemed like a complex and challenging task. However, considering the positive response I received for the initial version, I decided to push myself to improve the plugin.

Enter ChatGPT

Since I had already designed and implemented HEX and RGB color values in the MVP, adding HSL and HSB to the plugin was relatively easy.

Since I had already designed and implemented HEX and RGB color values in the first version, adding HSL and HSB to the plugin was relatively easy.

Figma Dev Mode

Designing and implementing this feature was challenging because there is no repository of standard color names. I searched for APIs that could provide custom color names, but none met my expectations. Some APIs had too few custom colors, while others had too many.

I have always loved Coolors.co for their collection of color palettes and gradients. Coolors also has a collection of more than 500 unique custom color names. Since Coolors is also quite popular in the design community, I chose to go with it.

I extracted all the color names from their website using a Python script and mapped them in a "Hex Code" : "Color Name" format in the JavaScript code.

Challenge faced with Coolors approach

The list only contains 540 colors, while there are millions of HEX values. Therefore, the plugin might result in an error or fail to display a color name if the user selects a color value outside of this list. This results in a poor user experience.

Solution

If User selects a Hex value that is not present in the list, the Plugin checks for the nearest color value present in the list and automatically maps the Color name.

In this way the plugin will be able to provide a custom name for any Hex code that a user selects.

If User selects a Hex value that is not present in the list, the Plugin checks for the nearest color value present in the list and automatically maps the Color name.

In this way the plugin will be able to provide a custom name for any Hex code that a user selects.

MVP

The next challenge was to design and implement the ideal user flow for Color Name/Tone format.

In this format, color names do not have a standard pattern as they vary depending on the type of color, such as Primary, Secondary, Neutral, Blue, Green, etc.

However, the tone does have a standard format: higher numbers represent darker shades and lower numbers represent lighter shades.

In this format, color names do not have a standard pattern as they vary depending on the type of color, such as Primary, Secondary, Neutral, Blue, Green, etc.

However, the tone does have a standard format: higher numbers represent darker shades and lower numbers represent lighter shades.

Since the color names are not standard, adding an input field where use can enter the required Color name felt like an ideal choice. The plugin will then check each color and applies the appropriate tone automatically.

Currently working on

If user clicks on “Display Label” button without selecting anything, the below warning appears.

If user clicks in “Display Label” button without selecting anything, the below warning appears.

If user clicks on “Display Label” button without selecting any check box, the below warning appears.

If user clicks in “Display Label” button without selecting any check box, the below warning appears.

Final UI

Results and Impact

“Wow, this plugin sounds like an absolute game-changer! 🚀 Can't wait to give it a whirl and bring some colorful magic to my designs!”

Prince Mukherjee, UI/UX Designer

Prince Mukherjee,

UI/UX Designer

“Really practical for color theme prospection on a small-scale project! Thank you 😍”

Myriam O. , UI/UX Designer

Myriam O. ,

UI/UX Designer

“I have tested the plugin with my design systems and it works well. This plugin is great and very helpful. Thank you Naren for sharing it and taking my feedback into account.”

Seng Hout, Lead UI/UX Designer

Seng Hout,

Lead UI/UX Designer

Key Learnings and Challenges faced

In certain cases, creating an MVP and taking suggestions and feedback from target users, rather than working on too many features at once, can save a significant amount of time and energy.
Considering error scenarios or edge cases is crucial for any product. Providing clear guidance helps in reducing user dropout rate.
The results you obtain from AI tools are only as good as the prompts you provide.
When asking an AI tool to perform a task, it is important to provide detailed instructions progressively through separate prompts. Requesting it to do multiple tasks at once will result in failure. (Total prompts for this plugin - 70+🥲)
In the era of AI tools, having basic knowledge in different domains like coding will create new avenues of exploration for designers.

In certain cases, creating an MVP and taking suggestions and feedback from target users, rather than working on too many features at once, can save a significant amount of time and energy.
Considering error scenarios or edge cases is crucial for any product. Providing clear guidance helps in reducing user dropout rate.
The results you obtain from AI tools are only as good as the prompts you provide.
When asking an AI tool to perform a task, it is important to provide detailed instructions progressively through separate prompts. Requesting it to do multiple tasks at once will result in failure. (Total prompts for this plugin - 70+🥲)
In the era of AI tools, having basic knowledge in different domains like coding will create new avenues of exploration for designers.

In certain cases, creating an MVP and taking suggestions and feedback from target users, rather than working on too many features at once, can save a significant amount of time and energy.
Considering error scenarios or edge cases is crucial for any product. Providing clear guidance helps in reducing user dropout rate.
The results you obtain from AI tools are only as good as the prompts you provide.
When asking an AI tool to perform a task, it is important to provide detailed instructions progressively through separate prompts. Requesting it to do multiple tasks at once will result in failure. (Total prompts for this plugin - 70+🥲)
In the era of AI tools, having basic knowledge in different domains like coding will create new avenues of exploration for designers.

Next Steps in My Journey

I am constantly learning more about Design Systems and am fascinated by how much there is still to learn.
At each step, I question myself if the process can be automated in any way.
I am eager to explore how OpenAI's API's can be integrated into Figma plugins to make designers' workflows easier.

I am constantly learning more about Design Systems and am fascinated by how much there is still to learn.
At each step, I question myself if the process can be automated in any way.
I am eager to explore how OpenAI's API's can be integrated into Figma plugins to make designers' workflows easier.

I am constantly learning more about Design Systems and am fascinated by how much there is still to learn.
At each step, I question myself if the process can be automated in any way.
I am eager to explore how OpenAI's API's can be integrated into Figma plugins to make designers' workflows easier.

Check out my plugins in the Figma Profile: figma.com/@naren_abbaraju

Framer 2023

Amsterdam