HISTOR
UX / UI Design for a paint application to improve the color buying experience
My Role
UX Designer and UX Researcher
Tools
Figma, MS Teams, Devops Azure, Mural, Pen / Paper
Key Skills
User Research, Feature Analysis, Research Synthesis, Persona Creation, Prototyping, Ideation, Mockups, Stakeholder Management and Presentations
Deliverables
Responsive Mobile App Design
Project Team
2 UX/UI Designers, 2 Researchers, 1 Product Manager, 3 Front End Developers, 1 Backend Engineer, and 1 Scrum Master, Stakeholders (Histor)
Methodology
Agile / Scrum
Process
DEFINE
About
Histor - My Color App is a native paint application app of PPG industries serving clients in Netherlands and Belgium. It is for the homeowners who are looking to paint their spaces and get omni-channel color experience that will help them to find the right colors for their living spaces and drive to the next step in their painting journey.
Problem
Choosing a paint color for the interiors have always been a difficult task for our users. The choice of choosing a color over a white wall is always time consuming and challenging. In this project, the challenge was to create and produce Histor app for the homeowners which will help them to experience an exciting journey of choosing paint colors for their interiors and help them ease their painting journey experience.
How Might We streamline the process of selecting paint colours for homeowners, particularly addressing the challenges of time consumption and decision making difficulty, in order to enhance their painting journey experience with the Histor Application?
Simplified & Enhanced painting journey experience
-Solution
A comprehensive set of high-fidelity designs for the Histor Color Application, accompanied by prototypes, a meticulously researched plan, and usability test results were delivered in the end. This solution aimed to provide users with a seamless experience in selecting paint colors for their spaces.
DISCOVER
A thorough RESEARCH processes implemented to uncover user needs and make informed decisions for the development of the ‘HISTOR’ app
During the discovery phase, a thorough examination of the customer journey was conducted to gain insights into users' needs when selecting paint colors for interiors. PPG collaborated with GFK, a marketing research company, to understand the journey of consumers interested in colored wall paint compared to those opting for white wall paint.
The Color Squad, in collaboration with Histor stakeholders, scrutinized the Customer Journey to gain deeper insights into user needs. Through this process, the target customers for the research were identified as Functionals or Creatives seeking to paint with color.
Discovery Research
Customer Journey Review
Customer Journey Review
Discovery Interviews - Session 1
After we got some idea about the customer journey who chose color to paint their walls, we decided to take our next step to understand our users, through Discovery Interviews. The sole purpose of this activity was to just understand the challenges and pain points that they face around a painting project in their house. This is how I designed the session for the Discovery interview.
Discovery Interview was based on some assumptions which we had built as a team. These assumptions were built with our understanding from the market study conducted by GFK.
Session 1 : Discovery Interviews
M1 Assumptions
Here are the list of assumptions we had before interviewing our users. The goal was to see which assumptions from the list can be validated, Invalidated and which will remain Uncertain
Next Steps
Continue to explore non - validated M1 user assumptions
Create M2 solution- based assumptions
Work with participants to determine potential solution direction with ‘Buy - a - feature’ exercise
Session 2 - Buy A Feature
This activity ‘Buy A Feature’ was conducted so that it could help us prioritize the features for our initial design version. In the end of this activity the features which users valued most were revealed. This activity made it all worth to help us bring closer to create solutions related to our M1 assumptions findings.
Before we jumped into this activity, we made list of our M2 assumptions too, and the goal for M2 assumptions as follows
Feature List
The list of features and it shows how many people prioritized each one
What was guiding their decisions?
Participants were asked for their reasoning behind choosing what they did and if they would be happy with an app with only their selections
Everyone tried to cover each step of their process:inspiration, browsing, narrowing, consideration and ordering with the available features
If each step was addressed, most participants said they would be happy with the tool, even if they had to trade off other features they would
have liked
Most people expected certain features by default to cover core functionality. Because these type of features were lower in price, participants prioritized more delightful features first
Which features did people expect by default?
Most people expected Create Palette, inspirational palettes and trends and saving favourite colors
Only one person expected to order liters by default
Find a Store was seen as the most basic feature to include in lieu of the ability to order colors in some way
Half of the participants expect to see some sort of visualizing functionality
A few people said they expected the brand’s trending colors to be in the app no matter what
2 people said sign in should be default but when asked to elaborate they really expected the app to save their favorite colors and searches, which in an app, doesn’t necessitate having an account
Did they think there were features missing?
For the most part participants thought all bases were covered with a few exceptions
3 people mentioned wanting to order liters
3 people wanted to be able to match or search for competitor colors
One person mentioned wanting a guide or ability to get sundry products they would need such as brushes, rollers, drop cloths, etc depending on their project and substrate
Many people communicated interest in AR visualization capabilities similar to those offered by our competitors
M2 Assumptions
Outcome : Continue validating with prototype evaluations
Findings
Trigger Phase Features
Personal Color Recommendations
2 out of 9 people prioritized this feature
Most user’s reacted well to getting recommendations
Some expected to get palettes while others expected to get a few main
color choices.
Expects to answer questions to get recommendations
Wanted to be asked about type of room, their style, size of room, lighting, etc.
Interested in science behind color and why colors work together
Some users expected to send in a photo of their room and have a person be in communication with them
Most people said that this feature would feel gimmicky and untrustworthy if it was a robot, even if well trained
A few people said they would not use, just because they like to make the color decisions themselves
Orientation Phase Features
Browse Color Library
3 out of 9 people prioritized this feature as their default feature
Expects to see all available colors, similar to the color wall at the store
Two people mentioned wanting to view all color at the same time and the ability to swipe between colors
Most users expected some sort of organization by families and sub-families
1 person mentioned wanting to see 5-6 of most popular of each color
2 mentioned wanting to sort colors light to dark
Multiple people mentioned using a color as a starting point
1 user mentioned wanting to create a color using sliders in order to get a match with the paint color
Other feature details are provided below. Please click on the desired feature to know more in depth about the same.
Coordinating colors
Find a store
Compare similar colors
Recently view colors
Inspirational palettes and trend collections
order dry samples and wet samples
Visualize multiple colors in a single photo
M 1 : Assumptions
Findings
Below is the list of findings from the discovery interviews condcted. The list shows findings divided into assumptions which are ‘Validated, Invalidated and what were their outcomes and uncertain assumptions which were neither validated nor invalidated by our users.
Painting Projects
Painting looked at as a part of a project rather than a project in and of itself by most participants
5 people recently moved and are making the space their own or are renovating
4 people wanted to refresh or redecorate a room
2 people mentioned extra time due to COVID-19 as a motivator
Level of experience or enjoyment of the painting application process determined if customers determined if they viewed
painting as a task or a chore
Outcome : We now believe our customers view painting as a task
We believe our customers view their project as just a paint project - Invalidated
Visualizing in a Room
All participants want to visualize the color in their room
They mentioned difficulty knowing how colors will look in different lighting
Interested in seeing colors in daylight vs artificial light
4 participants specifically mentioned the Flexa app
2 participants have actually used Flexa app AR visualizer
We believe they settle for interior photos that are not exactly reflecting their own situation - Uncertain
We believe want to see the color in different lighting- Validated
Trends
Participants want a stylish space and use Pinterest for inspiration
Participants start with the color family, keep trends in mind but don’t intentionally keep up with trends
Most participants mentioned getting inspiration and trends from other people’s/neighbor’s rooms
Participants called out that trends and inspiration felt like two different things
Participants are only keeping up with trending colors when they have an upcoming project that includes paint
Outcome : We now believe trends can be a source of inspiration when starting a project
We believe our customers are influenced by trends - Validated
We believe that our customers want to keep up with trending colors - Invalidated
Digital Solutions
Most participants were not aware that digital solutions exist, an app is not their first instinct to find color
Most participants felt comfortable using digital solutions to narrow down their selection before finalizing their choice once in store
2 participants have experience with the Flexa app
Other feature details are provided below. Please click on the desired feature to know more in depth about the same.
We believe they are open to digital solutions - Validated
We believe they will download an app to select color - Validated
We believe they are willing to download an app for their interior project - Validated
Personas
Once we finished our Discovery interviews and findings, we figured out the personas / users of our product. We realized our users are divided into DIFM (Do it for me) and DIY (Do it yourself) types.
This activity ‘Buy A Feature’ was conducted so that it could help us prioritize the features for our initial design version. In the end of this activity the features which users valued most were revealed. This activity made it all worth to help us bring closer to create solutions related to our
M1 assumptions findings.
Search by Name and Color Number
2 People prioritized this feature
Divided responses to whether or not it would be useful
Some said they don't know names or numbers so they said they wouldn't use it
Others said if they saw a color elsewhere they would look up color name to save it
Many people expected competitor colors to be included
Many people wanted to search by a keywords or color family sections
Examples “Minty colors”, “Dark greens”
Consideration Phase Features
Save Favorite Colors
7 out of 9 people prioritized this feature
Everyone thought this feature was both helpful and would be intuitive
Expected easy access and navigation to colors that they like
Wanted some sort of grouping functionality so they can organize by room
Many different use cases
Might compare colors here
Use to pull up colors to buy paint in store
Use to recall which colors they have used in the past
Inspiration Phase Features
Match from Photo
2 out of 9 people prioritized this feature
Most people expected something "like an eye dropper” where they could get a match with a point of color in a photo
Expected to be able to upload or take a photo
Only One Color vs multiple colors/palette
Most people wanted to see multiple color matches as opposed to one
A few people said if it just gave one, they would go through the process multiple times
Expected 3-5 matches
A few people expressed concern with accuracy with paint color matches and would expect matches to be very close
One participant expected an AR integration that would should you color matches as you pointed your camera.
Visualizer in your own room
6 out of 9 people prioritized this feature
This was the most popular feature by far and would delight users if properly implemented
Most people expected to upload a photo and be able to view a color in it
Most people expected to paint one color
Some said it would be nice to change other surface colors also
A few people expected this to be an Augmented Reality type of feature primarily
Wanted to walk around and change the colors of the walls
Validated assumptions at the end of session 2, Buy a Feature
Our research supports that our solution should:
• Not use color matching devices
• Have a way to see most popular colors
• Use color theory to suggest colors
• Allow for other items in photos to change color (i.e. fabric, floors, etc.)
• Enable the user to create palettes
• Enable searching for colors
• Organize colors by families/sub families
• Have a compare similar colors feature.
• Allow users to visualize with their own room
• Offer both wet and dry samples
• Show the color number
IDEATE
IDEATE
Home
Browse Colors
Personal Color Recommendations
60/30/10 Palettes
Favorite Colors
Match Photo
Color Detail & Favorites
IHUT Adhesive Samples
Visualizing Colors
IHUT Adhesive Samples
In this Ideation phase we synthesized all the data that we collected in our research phase and started working on our ideas through ‘Low Fidelity Wireframes’.
Previous Studies and Goal Recap
Session 1 : Discovery Interviews
Understand the challenges and experience of each person surrounding past and upcoming paint projects
Understand current attitude surrounding high-level solutions such as other apps, existing sample offerings, etc.
Session 2 : Buy a Feature
Reveal how participants interpreted the functionality of potential features to understand their expectations and find potential areas for innovation
Gauge the interest and motivation for prioritizing certain features
Reveal the features users value the most
We as a team used these findings from previous research sessions as a guide to design low - fidelity wireframes.
Prototype & Test
Method
We used Prototype Testing with 2 Low - Fidelity prototypes
What people say is different than what they do
Test early and test often
Low fidelity Prototypes
Inexpensive connected wireframe and pared back design
Limited interactivity
Only key content
Ensures feature concepts work as intended at the hands of real users
Typically done with 5 users to find majority of problems
Different target audiences might require more users only if they will behave in completely different ways
Inspire Me Prototype
Target
Participants who have just begun their project and want to explore options
Participants who do not know what colors they want to paint but know what they like
Inspire users with inspirational images and palettes
Help users determine what colors that would look good in their space
Color in Mind Prototype
Target
Participants who have just begun their project and want to explore options
Participants who do not know what colors they want to paint but know what they like
Inspire users with inspirational images and palettes
Help users determine what colors that would look good in their space
PROCESS
Empathize with users by getting in touch with what they Think, Feel, Say and Do. We used the following process in order to synthesize our findings
Empathy Map
Get in touch with the users expectations and priorities
Rough Affinity Map
Group sticky notes based on feature
Empathy Map
Group, combine and summarize similar ideas
FINDINGS
Home Screen
Expected to be asked about room type first and set image on home page
Consider adding room selection as part of the onboarding process and including set image
Recommend to add sample information to home page
Browse Colors
Sub-families are helpful to participants and made the color selection less overwhelming
Most participants liked having the most popular colors at the top
Participants did not understand what the colors look like from descriptions
Color sub-families require examples of the colors to serve as visual representation
Personal Color Recommendations
Participants want the ability to compare colors
Most people really liked the personal color finder
Expected questions from personal color finder at beginning
Expected each room project to have its own set of questions
Most participants excited about Tinder-like experience
Add/Improve instructions for “Pick 2” section
Favorite Colors
Confused about adding to cart just from favorites
Recommend having add to cart button on both color details page and favorites
Match Photo
To most of the participants the “Match from photo” feature worked as expected
Match page needs clear action button
Not clear to participants that color name was clickable
Most participants thought that Pinterest feature would be the brand’s Pinterest rather than pulling in their own
Only 2 understood how Pinterest feature was intended to work
5 out of 9 of participants used Pinterest boards
Most people didn’t think a Pinterest integration would add much value over regular match from photo
Color Detail & Favorites
Overall good response to Color Details
2 Participants mentioned wanting a full screen flood of color to hold up and compare to surfaces in their room
Participants want to leave notes for themselves on color
BRAND IDENTITY (UI)
Desktop / Web
Mobile
FINAL DESIGNS
We created a final set of hi fidelity mockups after testing the initial prototypes with the end users. The final designs are in ‘Dutch’ as version 1 was planned to launch in Netherlands for our end users.
Home Screens
Browse Colors Screens
Favourite Colors and Match Photo Screens
Color Details and Personal Color Finder Screens
Personal Color Finder Screens
ITERATION
Feeedback : To be asked about room type first and set image on home page of the desired room
As we see we changed our screen design on Home page. Instead of asking about what style or palettes does the user prefer, we kept it basic in the first Home screen
We are first asking about the type of room they would like to choose color for.
It made more sense to consider adding room selection as a part of the onboarding process and including set image
If one does not see the room type, the user can use default room as shown
on the button
Feeedback : Participants did not understand what the colors look like from descriptions
Most popular colors are displayed on the top as is, as this was liked by most participants
Added ‘Sub Family colors’ tab which made color selection less overwhelming for the users
A mix of color swatches are introduced on the other color options instead of just naming the color family. This gives our users a visual representation of what color shades looked like
Feeedback : Participants were confused about adding to cart just from favorites and recommend having add to cart button on both color details page
and favorites
There was a bit of a confusion in earlier wireframes, when on favourite color list ‘heart icon’ was designed along with ‘add to cart’ button. In the iteration, we removed the ‘heart icon’ and only kept ‘add to cart’ icon. This made it easier for the users to add colors even from favourite’s screen
‘Add to cart’ button was added also in the color details page along with ‘heart icon’ and more (Ellipsis)
Feeedback : Match page needs clear action button. Also it is not clear to participants that color name was clickable.
First, 2 options are given on the first match photo screen where our users can either click a photo from camera and then choose the color from the picture clicked, or they can upload a photo from their library and then choose a color from the picture accordongly
In the final design we made it very clear that the color in the picture is clickable by 2 ways.
First, by adding a headline on top of the screen which translated in English means ‘ Tap to adjust the color’
Secondly, as it states the users can tap anywhere on the picture and the color name and the color swatch will show the name and the shade of that particular color tapped upon. This is shown by a clickable ‘circular’ icon on the picture which is movable.
RESULTS
Downloads
2,600
App Users
3,285
Color Clicked
2,457
Color Create / Favorite
1,689
Add To Cart
613
Start Checkout
221
Apart from seeing the success of the app with the users in its first version, we also got an opportunity to present this app with our team in Norway and in the Townhall meet which was attended by all our partners, stakeholders, CEO’s, Managers and employees. Designing and launching ‘Histor’ was one of the most anticipated projects of the year. Working on this project also helped in growing our relation better with the stakeholders. ‘Histor’ marked it’s presence as one of the most profitable businesses in PPG.
LEARNING
I was blessed with amazing team for this project. It was an amazing experience to work with such a supportive team and a company that places great value on Research and Design.
Finding the balance: between the business goal and user experience
As one of the UX designer and researcher on this team, the priority goal was to improve user satisfaction with the product. User stories, experiences, and feedback were important to take into account for better design decisions. However, as a UX designer, I also needed to consider and understand the business objectives and constraints because it provided great insights This helped our team to empathize with our end users.
In this project, user experience and business goals go hand in hand. Histor wanted to enhance its business with DIY and DIFM users and conversion/retention rate. And the user's goals are to ease their color painting journey and to know what Histor is about. As a UX designer, I tried to find the best balance between these two goals.
The first thing I did was to understand why solving users’ pain points and the features I designed were important to enhance business goals. This way I could find a balance between them.
Home screens became effective features for increasing conversion rates. Additionally, Matching photo, color creation, personal color finder screens became features for enhancing user experience and achieving the business goals.
Add User Journey of Eric
Though most users noticed heart icon and generally understood it, users often forgot to save colors while others were unsure of its connection to saving. Currently we have a 32% drop-off between customers who view a color details page and customers who save colors. Since this is key to driving to conversion, there is a large value in improving this drop off.
Users started out skeptical about match from photo but were pleasantly surprised and those that adjusted their match color found it easy to do. 34% of users match from a photo.
Dragging the handle across the photo causes the matched colors to flash quickly, overwhelming many users.
Users were excited about palette recommendations with the first generated palette was seen as the most successful, while the second and third generated palettes caused skepticism due to the lack of contrast between colors.
Some users didn’t realize the palettes were clickable and missed the View Palette in Photo feature.