CIN COLORiT

CIN’s COLORIT app was specifically designed for all kinds of users and purposes. We wanted to create a flexible and easy-to-use app for any user — with a taste for interior design, regardless of their level of technical knowledge or editing.

Research is key for insights, user real needs and inspiration. Curiously, we discovered that there are not many of those that have the same concept and features we wanted to implement. We decided to do deep research on apps that work with images to understand the market and features users are used to, in order to guarantee usability in working with photographs which is a central point in the application. But still, it inspired us to create the “Dominant Colors” feature — which shows the four predominant colors of the image. We were able to learn from the research, as it helped us to improve the ideas that we had in mind.

For the user interface part, some elements were carefully chosen by CIN — the font (which is their brand font) and colors (soft, pastel tones that give a more artistic look to the app). One of our main UI tasks was to not distract users from experimenting with the images/photos. For this reason we tried to simplify all the elements in the design:

• Created a white background;
• Chose not to use the top navigation bar, we used small "home" and "go back" buttons instead, to leave more space to the image/photo uploaded;
• Made a visual focus on the editing tools to motivate the user to try them.

We also adapted CIN’s logo to the colors of the app to achieve a more consistent design and aesthetic. 

Addressing the simulator first was our starting goal in development. If this didn’t work, nothing else mattered. Hang on tight, the journey is just starting.

The simulator allows the user to test the colors he likes on his walls even before painting. Through a photograph, the user can visualize the color and choose with confidence. For this purpose, we used native resources and developed two options: 

• Take a photo using a smartphone and paint the wall on the photograph with the color he likes.
• Upload a photo from the gallery and paint the walls with the desired color.

When the user finds his color he can save it or share it through social media.

The app also presents pre-created environments of kitchens, living rooms and bedrooms, where the user can try different colors available in the color card. This is the perfect opportunity to test those bolder colors you wouldn't normally pick.

Aiming for a seamless painting effect some challenges have arisen. Here are the most important ones:

• A mask that would capture all the contours of an image, without elements like shadows or light affecting the color perception. This mask is one of the most important factors because it defines the limits to how far we can paint. It took several attempts with different methods for this mask to work on all kinds of images.
• The limit of the area the user would paint after he pressed any point on the image without it erasing the existing shadows. For this, we’ve used several versions of the same image: one that only had the shadows/luminosity; and another that had the area that would be painted with the desired color. After continuous improvement attempts we got to the final version, showing an image that in reality is the junction of several types of it.

After overcoming these challenges, we reached the final stage of development where we had to make some refactors in the code. We had a lot of logic to create the image and this, of course, has a cost in the processing of the smartphone. It was necessary to conduct several tests to identify which functions were costing more time and processing capacity in order to develop alternative ways to perform the same functions with less resource usage and optimal app performance.

Have you ever fallen in love with the color of the walls in a hotel you were staying at? Or have you ever envied your friend because of the amazing color choice at his house? With CIN COLORiT you can find the most similar colors from real life on CIN’s color cards. That is what the color identifier is for. 

Here’s how it works:

• Take a picture / upload a photo;
• Select the color manually or visualize the predominant color palette;
• Click on the one that you want and add to your favorites or to your MyCIN account.

Colors Catalog

Here you can see all CIN colors from the catalog — the ones that you saved as favorites and the ones associated with your account.

After discovering the perfect color, the app helps you find the nearest CIN store.

How many times have you put off painting the walls in your living room, which were already in dire need, because you couldn't decide on the color? Together with CIN COLORiT, we’ve made this mission easier and created an amazing and unprecedented experience for its users. All features are important, useful and convenient, but there are a few that stand out the most: the painting simulator and the color identifier.

Introducing these new features in the app, allowed CIN to meet the needs of its target audience, providing them with a more realistic preview of the final result and giving them more confidence when choosing the color. On top of that, CIN earns their trust and stands out from the competition.