Cloverdale Paint is a Canadian manufacturer that sells paints and paint products. While their physical retail shopping experience is well-established, their e-commerce presence is minimal. I and my team worked towards developing a web-based product, intended to provide a potential route for Cloverdale Paint's e-commerce - specifically for individual, non-business clients. The project was completed under the supervision and assistance of the instructor of the course, in addition to Cloverdale Paint's Marketing Director at the time. The final product of the collaboration was a web-based interactive prototype referred to as the Product Selection Wizard, intended for an individual do-it-yourself customer, or DIY'er, who is looking to plan their own project - and needs a seamless experience in understanding which Cloverdale Paint products they will need to support their individual goals.
3 months
The objective of this collaborative project was to create a digital product and experience that improved the dynamic between the client, Cloverdale Paint, and DIY customers. Utilizing the results of a workshop involving eleven participants, in addition to several interviews, we concluded that DIY Cloverdale Paint customers struggled to come up with the tools and paints necessary to complete a project. The type of paint they would need to paint a specific space such as a bathroom, whether surface primer was always needed or not, or which colours would work best in certain lighting, were common grievances among the participants. We looked to develop a digital user experience that got rid of the noise, and simplified the process of selecting the right tools and products.
Screen capture of Cloverdale Paint's website landing page, in visual contrast to the Product Selection Wizard.
The persona Libby is meant to capture the essence of the DIY'er and their relationship to Cloverdale Paint as a current or potential customer. A focus on the DIY'er in the development of a persona for the Product Selection Wizard was developed based off of gathered user research.
Libby's goals are to refresh her living space, without having to rely on a professional painter.
Libby hopes for a sense of accomplishment from completing her very own DIY painting project.
Libby lacks the knowledge she believes would be necessary to successfully complete a painting project. She is unsure of what type of paint and tools she will need to execute her vision.
The Discovery phase of Libby's user journey indicates Libby's experience in gaining inspiration for a potential DIY painting project. There is a heightened sense of excitement, in combination with the typical anxieties surrounding individual lack of knowledge and skill.
The Browsing experience involves both Libby's in-store experience at Cloverdale Paint retail locations, as well as on the internet searching for inspiration.
The Buying step focuses entirely on Libby's in-store experience at a Cloverdale Paint retail location, specifically in regards to her dynamic with a Cloverdale Paint retail employee. This is where Libby may begin to develop an improved understanding of the type and amount of paint she needs, and what tools will be necessary.
The Painting action is where Libby begins her DIY painting project. This is where Libby may notice the consequences of a lack of knowledge, or not having the right tools - for example, apparent flaws on the wall she painted due to not using the correct primer.
The Completion step is where Libby gets to take a look at her completed project. While she may get the occasional compliment from guests now and then, she will always notice the mistakes she's made for being ill-prepared.
The visual identity of the Product Selection Wizard was based of the existing Cloverdale Paint brand identity, as we were in contact with their Marketing Director throughout the course of the project. However, the approach to the fonts used and icon designs were developed independently. The colour palette was inspired by Cloverdale Paint's existing brand identity. The icons implemented in the Product Selection Wizard had thick, rounded dark strokes, a flat design, and no colour fill. Source Sans Pro was selected as a simple sans serif font.
We completed a virtual workshop with 11 participants; consisting of 6 novice, 2 intermediate, and 3 experienced DIY painters. The age range of the participants was 20 to 55. The workshop was broken down into six activities, which are listed and explained below. The conclusion of the workshop was based off of the participants' concerns with two specific experiences; colour selection, and navigating product information. Choosing colours was often mentioned as the most important and difficult step. In regards to accessing product information, the participants agreed that less is more. Individual DIY'ers do not need to know all of the technical details about specific paint products; they cared most about Quality, Price, Ease of Application and Coverage.
The online questionnaire was distributed online to the participants. The results of the surveying is as follows:
A mind map is a method for gathering user input based off of a variety of prompts. The main insights that were gathered as a result of this workshop activity were:
This is where participants were presented with a set of steps towards shopping for paint products as cards, that they then had to individually place in subsequent order. This is how we were able to understand how DIY'ers think about the steps and logical flow of shopping for paint.
The The Word Association activity provided a list of words, mostly adjectives, in which the participants were told to drag and drop to specific screen captures of existing e-commerce UIs. These UI captures were gathered from Cloverdale Paint's and its competitors' websites. This is to help us understand what is working and what isn’t among the e-commerce presence of Cloverdale Paint and similar retailers. The main findings are as follows:
The Rating scale is a sorting activity where participants rank the importance of various paint qualities. By learning what is and is not important, we can recognize what to prioritize when it comes to how paint information is displayed, whether in-person or online.
The H-Form activity asked participants to convey their positive and negative feelings, as well as any suggestions they might have during the experience of selecting a paint colour.
Low-fidelity mock-ups illustrate each step necessary for the user to complete the Product Selection Wizard. Each step is described in detail in the following map. Low-fidelity mock-ups provide a basic visual structure for the final product's user interface.
The final product of the collaborative project was a Figma prototype, alongside a booklet detailing each step of the design process in-depth. The prototype shows a complete walkthrough of a specific scenario in the Product Selection Wizard. The scenario shows a user looking to purchase a set of products for painting a kitchen space.
OPEN PROTOTYPE IN FIGMA
The booklet that was created alongside the prototype illustrates the design process that led to the final products of the collaborative project. The ethos grounded in research and analysis is delved into further, in addition to a thorough analysis of the user experience research through both interviews and the workshop. The reasoning behind key design decisions and UI details are further explained as well. All artifacts are presented as well, including personas, user journeys, and previous design concepts that were ultimately scrapped.
1 / 24
As Cloverdale Paint currently possesses minimal reach towards DIY'ers, as assessed from external research as well as through user research, supporting that potential group of customers was the foundation of this term-long project. By walking users through each decision that goes into buying paint, we can foster a higher sense of confidence in DIY'er customers. Using the Product Selection Wizard will encourage DIY customers in becoming more knowledgeable about the steps required to complete a painting project. Offering a simple, accessible, and comprehensive online shopping experience where DIY'ers are supported and educated would support Cloverdale Paint in expanding their DIY'er customer base.
In terms of the technical skills I have developed, this project was one of the first I collaboratively completed that heavily required making use of Figma prototyping tools. Developing the Product Selection Wizard meant applying micro-interactions and transition animations in a way that was meaningful and cohesive for the length and complexity of the prototype. Running the workshop composed of various user research activities alongside my team members was a unique experience as well, and further cemented the importance of understanding the target user in the development of a digital product.
