Match NCS

UI Design & Software Development

Project Overview

Project Name: Match NCS
‍Role: UI/UX Designer and Developer
‍Tools Used: Figma, Visual Studio Code (VS Code)
‍Technologies: HTML, CSS, JavaScript
‍Duration: 3 weeks

Introduction

In the paint industry, accurately matching digital color representations to standardized color systems is a common challenge. This issue is particularly significant when customers seek to identify colors from magazines or digital images without possessing the HEX code. Recognizing this gap, I developed "Match NCS," a Chrome extension designed to streamline the process of converting RGB or HEX color values to the nearest NCS (Natural Color System) equivalent. This case study outlines the research, design, development, and impact of the project.

What is Natural Colour System?
‍
The Natural Colour System (NCS) is a scientifically-based color notation system that describes colors based on how the human eye perceives them. Developed in Sweden, NCS classifies colors into six elementary hues: white, black, yellow, red, blue, and green. Each color is given a unique code that represents its position within a three-dimensional color space, capturing attributes of hue, chromaticness, and blackness. In the painting industry, NCS is widely used to ensure precise color matching and consistency, essential for both interior and exterior applications. For example, the NCS code S 1080-Y70R represents a vibrant shade of orange, while S 3060-G10Y signifies a strong, slightly yellowish green. This system facilitates clear communication between designers, manufacturers, and clients, enhancing the overall quality and satisfaction of color-related projects.

Want to learn more about the NCS System?
https://ncscolour.com/en-eu/pages/the-system

‍Objective: To create a user-friendly tool that enables users to easily convert and match colors from digital formats to NCS codes, enhancing the accuracy and efficiency of color selection in the paint industry.

Process:

Research and Planning

Understanding the Problem
Identifying Pain Points: Through discussions with colleagues and customers, I identified a common pain point in color matching—customers often needed to match colors from printed media without having digital color codes.
Researching Existing Solutions: I analyzed existing color conversion tools to understand their functionalities and limitations, which helped in identifying areas for improvement.

Defining the Scope
Setting Clear Objectives: The primary objective was to develop a tool that could convert RGB and HEX values to NCS codes and also allow users to pick colors from images or printed media.
User Personas: Created user personas to represent typical users, which helped in tailoring the functionality and design to meet their specific needs.

Using Figma, I designed the initial wireframes and prototypes for Match NCS. The design focused on simplicity and ease of use, with clear instructions and intuitive navigation.

Key Design Features:

Design Process

Instant Color Matching: Real-time conversion of selected colors to the nearest NCS code.
Multiple Input Options: Users can input colors via HEX, RGB, or the color picker tool.
User Interface: A clean, modern interface with a large color display panel and clear input/output sections for HEX and NCS codes.

Sketching and Wireframing
Created initial sketches to outline the basic layout and functionality.
Developed wireframes in Figma to provide a more detailed structure of the interface.
Ensured the wireframes focused on user flow and ease of navigation.

Process:

Prototyping
Developed interactive prototypes in Figma, allowing for early testing and feedback.
Focused on key interactions such as color picking, inputting HEX/RGB values, and displaying NCS matches.

User Testing and Feedback
Conducted user testing sessions with colleagues and potential users to gather feedback.
Iteratively improved the design based on feedback, enhancing usability and addressing pain points.

The development phase of Match NCS was critical in transforming the design prototypes into a fully functional Chrome extension. Leveraging a robust development environment, I meticulously implemented the features and ensured seamless integration of the color matching algorithm. Here’s an overview of the tools and technologies used, as well as the key steps taken during the development process.

Developmemt Process

Process:

Development Enviroment
Code Editor: Visual Studio Code (VS Code)
Technologies: HTML, CSS, and JavaScript

Features Implemented:
Color Input Options: Users can input colors via HEX, RGB, or a color picker tool.
Real-Time Feedback: Immediate display of the closest NCS match, with additional details such as color names and comparison visuals.
Saving and Exporting: Options for users to save their matched colors and export data for future reference.

Database and Algorithm
NCS Database: Created a comprehensive database of NCS colors through extensive research.
Color Matching Algorithm: Developed an algorithm to find the nearest NCS code to a given HEX or RGB value, ensuring high accuracy in color matching.

Testing and Refinement:
Conducted thorough testing to ensure the accuracy of color matching and the stability of the extension.
Refined the algorithm and interface based on testing results, improving performance and user experience.

Building the Core Functionality:
Developed the user interface using HTML and CSS, ensuring a responsive and accessible design.
Implemented JavaScript for core functionalities such as color picking and real-time conversion to NCS codes.
Created a comprehensive NCS database and developed an algorithm for accurate color matching.

Setting Up Development Environment:
Configured the development environment in VS Code, setting up the necessary tools and libraries.
Ensured version control with Git for tracking changes and collaboration.

Deployment: The extension was launched on the Chrome Web Store, making it easily accessible to users worldwide.

Launch and Impact

User Feedback:
Positive Reception: Users appreciated the simplicity and accuracy of the tool, noting its usefulness in professional and personal projects.
Increased Efficiency: The extension significantly reduced the time and effort required for color matching, leading to enhanced customer satisfaction.

Future Enhancements:
‍Based on user feedback, plans for future updates include integration with popular design software, additional color input options, and expanded functionality for saving and sharing color matches.

Process:

Launching on Chrome Web Store
Prepared the extension for deployment by creating detailed documentation and user guides.
Launched the extension on the Chrome Web Store, ensuring compliance with all guidelines and requirements.

Gathering and Analyzing Feedback:
Monitored user reviews and feedback to identify areas for improvement.
Engaged with users through support channels to address issues and gather suggestions for new features.

Continuous Improvement:
Based on user feedback, planned for future updates to enhance functionality and user experience.
Prioritized features such as design tool integration and expanded input options to meet user needs.

I hope that "Match NCS" helps professionals and enthusiasts alike by providing a reliable, user-friendly solution for converting digital colors to NCS codes. Through meticulous research, thoughtful design, and robust development, this extension aims to streamline the color matching process and enhance the overall user experience.

Conclusion

Want to work together?

If you like what you see and want to work together, get in touch!

renzlow@gmail.com