Course Project for Interaction Design Methods

Prototype for Client Cloverdale Paint

Background

During my 2021 Fall semester at Simon Fraser University, I collaborated with four other Interactive Arts and Technology students on a term-long project alongside Cloverdale Paint.

The project was completed under the supervision and assistance of the instructor of the course, in addition to Cloverdale Paint's Marketing Director. The final product of the project was a web-based interactive prototype referred to as the 'Product Selection Wizard', intended for planning a paint project. The prototype would lead the user through the process of noting the specific of their project, so it could provide the necessary recommendations on the type of paint and products that would be ideal for the user's goals.

Roles

Visual Designer

UX Researcher

UI/UX Designer

Copywriter

 

Group members

Tyler Barlow

Sarah Daniels

Marina Martin

Sevena Sandhu

Duration - 3 Months

Tools: Adobe Creative Suite and Figma

Problem

Based off of our collective user research with approximately 10 participants, we concluded as a design team that DIY Cloverdale Paint customers most often struggled to come up with the tools and paints necessary to complete a project - such as what type of paint they would need to paint the interior of a bathroom, whether they will need primer or not, which colour would work best in their selected space, etcetera.

We needed to craft a user experience that got rid of the noise and simplified the process of selecting the right tools and products to complete any sort of painting project, to best accommodate even the least experienced of Cloverdale Paint customers.

The Process

For the first third of the term, based off of our interviews with Cloverdale Paint franchise store clerks, customers, contractors, and the Marketing Director, we generated two distinct personas in relation to our solution: a DIYer, and a contractor, as potential clients of Cloverdale Paint.

These two personas were further referenced in the development of comprehensive user journeys. These two user journeys detailed the potential personalized experiences of each persona in relation to Cloverdale Paint.

User Research

store clerk persona
user journey
contractor persona
user journey

Style Guide

Of course, the design system of our project and the overall prototype had to accommodate an existing style guide that Cloverdale Paint had already established. It was of course further elevated to accommodate a more minimal and modern look, in improvement of Cloverdale Paint's previous visual branding.

Before and after web design for Cloverdale Paint
A before and after that compares the original Cloverdale Paint web design (left) with our re-design through the prototype (right).

 

Cloverdale Paint prototype style guide
A summarized style guide for the Cloverdale Paint prototype.

Initial Ideations

As we had a full term to truly contemplate the project and how the solution to the problems we gathered from our research would look like, there were several initial ideas we landed on prior to focusing entirely on a web-based Production Selection Wizard.

storyboard for web-based prototype concept
The first storyboard that eventually led to our final concept of a web-based prototype.
view all storyboards

Final Concept

a physical solution to the problem of selecting colours; with paint testers
After further developments and critique from classmates and instructors, the "Product Selection Wizard" was established as the finalized concept for this term project. It provides a solution in the form of a web-embedded application, to best support the lowest common denominator in Cloverdale Paint customers: the DIYer, who will need the most assistance in selecting the right products to complete their painting project.

The Prototype

In conclusion of the three-month user experience research and product design collaboration, this cohesive product was completed as a solution to the challenges the everyday customer of Cloverdale Paint would face.

Booklet

user journey
In addition to the completed prototype, a booklet was crafted to illustrate the summary of our whole semester's worth of work, thoroughly explaining our rhetoric and approach to the problem we confronted, and the reasoning and research behind our finalized solution.

What I Learned

The development of my skills within the domains of UX research, UI/UX design, graphic design, and prototyping as a result of this collaborative project have been invaluable to my scope as a student and designer. After the completion of our term, we developed a comprehensive prototype for a project planner, the Product Selection Wizard.

Intended to be embedded into the Cloverdale Paint website, the Product Selection Wizard would select the Cloverdale Paint products necessary for the user to be able to complete whatever paint project they had planned, ultimately leading them to the point of purchasing said products. The evolution of this concept and its development altogether were based off of a variety of user experience research, gathered from interviews, workshops, and technical research on Cloverdale Paint's branding and approach as a corporation.