# On the Design and Evaluation of Nippon Paint Color Visualizer Application – A Case Study

Kuldeep Kulshreshtha, Andreea I. Niculescu, Bimlesh Wadhwa

► To cite this version:

Kuldeep Kulshreshtha, Andreea I. Niculescu, Bimlesh Wadhwa. On the Design and Evaluation of Nippon Paint Color Visualizer Application – A Case Study. 16th IFIP Conference on Human-Computer Interaction (INTERACT), Sep 2017, Bombay, India. pp.372-376, 10.1007/978-3-319-68059-0_33 hal-01679803

HAL Id: hal-01679803

https://inria.hal.science/hal-01679803

Submitted on 10 Jan 2018

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>

Distributed under a Creative Commons Attribution 4.0 International License
# On the design and evaluation of Nippon Paint Color Visualizer application – a case study

Kuldeep Kulshreshtha¹, Andreea I. Niculescu² and Bimlesh Wadhwa³

¹UX Army, ²Institute for Infocomm Research (I²R), ³National University of Singapore (NUS)
kuldeepk@uxarmy.com, andreea-n@i2r.a-star.edu.sg, bimlesh@nus.edu.sg

**Abstract** In this paper, we present a case study focusing on the design challenges and evaluation process of *Color Visualizer*, a mobile phone application developed for Nippon Paint Singapore. The application enables users to visualize paint color on home interiors and decide on the best color match. *Color Visualizer* was incrementally built upon iterative design & successive development sessions, all based on extensive hours of user research. Design decisions, evaluation results, lessons learned and future work are presented.

**Keywords:** coloring technology app; user research; interaction design

## 1. Introduction

Color has always played a vital role in our lives as powerful tool of communication. Also, it's a well-known fact, that colors can have a profound effect on our emotional well-being. Thus, choosing the right color when painting our home is of crucial importance. However, the selecting process can be daunting not only because of the paradox of choice or conflict of preferences, but also because of the inability to visualize several color effects on real walls. Paint companies are increasingly investing in digital tools to help consumers overcome this challenge. *Color Visualizer* is one such mobile application recently launched by Nippon Paint Singapore [1].

Designing a good color visualizer is a challenging process. Firstly, because digital painting, in contrast to physical painting poses several technical hardships, such as identifying edges and corners in a room image, separate objects from walls, and handle diversity in image attributes caused by different camera types and room illumination. Especially, in cases where walls have irregular edges, rooms vary in style and illumination or pictures have low resolution the challenge is by far not trivial.

Secondly, there are obvious discrepancies in image processing performance between humans and computers that tend to generate disappointment for first time users: humans have excellent skills of understanding space semantics, i.e. distinguishing between walls, ceiling, objects placed in a room and as they often expect computers to see the reality similarly to themselves (see figure 1).

Thirdly, differences in users' proficiency with image processing software, such as MS paint or Photoshop make hard to decide on the most appropriate interaction style: keeping operation tools similar to those found in such programs would beneficiate experts but exclude novice users; on the other side, designing new interaction ways would probably confuse MS paint and Photoshop experts.
Fourthly, budget and strict time limitation are adding up to existing challenges. Thus, the goal of our user studies was to determine what real painting elements are crucial for the app's user experience (UX), how users would 'paint' their walls using the app and whether there are any important user needs left unrecognized.

<figure><img src="image_2.png" /><figcaption>Fig. 1: View of a room: humans (LEFT) vs. computers (RIGHT)</figcaption></figure>

### 3. Iterative design & evaluation studies

The first coloring app developed in this project enabled users to use different color schemes to color the walls by using finger tapping and selecting a color using the color bar. Deleting the color could be accomplished by dragging from an unfilled space into the colored area. Functions, such as saving projects for late re-use or for sharing with friends, as well as identifying paint store locations on a map were included in the app. Figure 2 shows the application's original design: the small size of the phone screen caused the color to spill over requiring several corrective touches.

<figure><img src="image_3.png" /><figcaption>Fig. 2 Screen shot of first design</figcaption></figure>

A first user study with 18 participants (11 female & 7 male) age 24-35yrs was performed in our lab. Our interest at this stage was to determine whether basic users' expectations toward the app were generally met. Participants were selected to fulfill the following criteria: own a house in Singapore, own an iPhone 5 and above, had significant involvement in painting their own house in the past 12 months or had plans to engage in painting activities within the following 12 month.
Participants were asked to perform the following tasks with the app: 1) ‘paint’ walls and ceilings using pictures taken from their own home or from the test lab<fnref n="1" /> 2) save the ‘painting’ projects for later use; 3) buy paint using the app; 4) share the ‘painting’ screenshots with friends and relatives. Additionally, they were presented with two alternative features adopted from Photoshop: layering and masking, i.e. using a ‘virtual’ tape to cover furniture when ‘painting’ the walls. The features were part of other coloring applications from a competitor brand and we were interested to find out whether such functions could be useful for our app as well.

The sessions were conducted by a moderator accompanied by an observer. After completing each task, participants were interviewed using unstructured in-depth interview techniques. The questions were based on their immediate experience with the app. When discrepancies were found (between what was done vs. what was reported), laddering techniques were used to explore unconscious motivations behind users' actions. Each session lasted for 1h and 15 minutes. Both interviews, as well as users' interactions with the app were recorded to facilitate further analysis.

The results uncovered several app deficiencies, such as confusing menus, unclear color recommendations, as well as lack of control when painting or deleting colors. The coloring screen was found to be complicated and hard to use while exported pictures were missing color codes making hard to identify the same color nuance in the shop. Users seemed uncomfortable sharing the pictures in social media, however saving and emailing pictures was found to be a useful feature. Masking and layering functionalities seemed to create problems to those unaccustomed to Photoshop who were unable to complete this task without facilitator's help. In general, participants found the app to be difficult to control, “unpredictable” in action and “inefficient” in execution. Overall, the impression was of a poor UX. The results obtained from the first user study made clear the app wasn't ready to launch yet.

Based on participants’ feedback and careful analysis of video recordings, the team decided to re-design the coloring screen and simplify the coloring process. Confusing elements, such as ‘delete color’ was replaced with an eraser brush. An undo functionality was added to allow for more flexibility. The color bar was replaced with a color picker: users could select a color from a thumbnails palette and apply the color to any desired picture area. For coloring, re-coloring or erasing, simple tapping could be used. A gallery of pre-masked pictures was added in response to requests from several (mostly males) participants: such pictures would enable users to visualize on the spot how painted walls would look like in a fully furnished environment – see fig 3.

Another evaluation session was run with 30 participants (14 female & 16 male, aged 24-35yrs) to validate the improvements. Selection criteria, interviews techniques and scenario tasks remained identical to the first user study. Results confirmed improvements: the app was considered easy to use and allowing for a finer control during coloring and erasing. The colored walls shown on the user interface had a natural look with a better color effects visualization on shadows, sunlight and lighting.

Further, participants requested to use single taps to cover most of the wall/ceiling and tap rub to color the leftover area. Users also expressed the desire to see the color variation on the walls in picture thumbnails for comparison, as well as to have gallery

<footnote n="1">¹ Pictures could be taken using the camera phone or chosen from the photo gallery.</footnote>
pictures displaying typical Singapore home environments, i.e. the current app used mostly images from Western homes.

The design and development time between the user evaluations took almost 3 months. With another two months of fine tuning, the app was launched in December 2016 in iOS and android version. Currently, the app usage has grown in the past few months up to 30k downloads.

<figure><img src="image_4.png" /><figcaption>Fig. 3 App improved design</figcaption></figure>

## Conclusions and future work

While painting is a simple task in real life, translating it into the digital world turned out to be a challenge. In-depth interviews and user behavior analysis were of fundamental importance for understanding the user journey's utmost details. Such details sum up the ultimate user experience. Along the way, we learned a few lessons worth sharing: 1. design for simplicity; 2. focus on people's natural tendencies – for example, it was observed that users usually accomplish a task by single tapping at an interactive element; 3. wrongly assumed background knowledge in graphic tools, such as Photoshop and MS paint could be counterproductive. Particularly relevant to our application, we learned that the colour picker was indeed a useful feature for inspecting selected colours while the 3D model of a real room (with painted walls and furniture as in fig. 3) helped users to decide more easily on the best colour match.

In the future, we plan to incorporate single toggle button for coloring/erasing, enable rubbing to add paint in left out areas, replacing colors using the palette with just one finger tap, keeping a history of colored room pictures for comparison, manage user expectation by recoloring uploaded pictures with the last used paint color. We also plan to persuade users to continue using the app by making coloring a fun experience so that Nippon can increase its sales and creates stronger brand connection with its customers.

## References

[1] Nippon Paint Mobile App - Color Visualizer http://www.nipponpaint.com.sg/colours/nippon-paint-mobile-app/