Kelly Moore Paints Palette Creator
A Focused Design
Design Education & Consultancy

Kelly Moore Paints Palette Creator

Color and inspiration from Kelly-Moore. High-quality, zero-VOC paints preferred by homeowners, designers and painters since 1946.

Role Summary

I was hired by an agency (Traction) to help them assess the deficits in the current website version of this and prepare a general UX approach on how to take this into a responsive design  

Project Summary

Kelly Moore is a west coast regional paint manufacturer, who primarily sold to the construction market. They had a rather unwieldy, technically outdated (done in Flash) color selector that was difficult (bordering on unusable) on the website and would not work at all on a mobile platform due to its technical constraints. 

We were tasked to come up with the same basic functionality (parity) as well as add a few features that would allow them to expand selling paint to both private parties and interior designers (the markets they decided to focus on for the initial launch of this new product offering)

Project Constraints

There were a few assumptions that were made before I came onto the project with the teams at both Traction (the agency) and Kelly Moore (the end client)

  1. It needed to mimic the basic functionality of the existing site. The users should be able to select colors both from existing colors and collections that they may already be familiar with and along a spectrum
  2. Four colors would be the maximum you could put into any on a palette
  3. Textual content should have a single spot in all parts of the flow for ease of development of the responsive website.
  4. Pallets, for the first phase, would be saved locally on your computer (due to time constraints and technical resources) with the eventuality of saving them to an online account
  5. The site needed to be responsive so the structure we came up with needed to address how that would happen so that the developers would understand how to design it to work on all devices

Wireframes

Kelly Moore Paints Palette Creator

Initial Screen

  • Disclaimer Text
    Disclaimer text was needed to make sure users understood that the color viewing on the screen was an approximation and that they should obtain samples for accurate colors
  • Sort By/View Collections
    This allowed users to view all colors in chromatic order or to group them by Kelly Moore Collections
  • Color Selection Area (Swatches)
    This shows already existing color swatches in chromatic order
  • Color Selection Area (Picker)
    This allows the user to get to a different hue quickly (i.e. going from viewing the yellow swatches to the blue ones) 
  • Content Box
    It was decided that for ease of development there should be one standard box for all content that could easily be adjusted for the different screen sizes
  • Selection Tabs
    It was decided to use tabs for ease of translation into different screen views as well as on the larger screens ease navigation, which was a problem in the previous version
  • Example of Selected Color
    This shows how the colors will look once selected. The minimal information required was the color name and color number, which is how Kelly Moore references their colors

Kelly Moore Paints Palette Creator

Individual Color Detail

  • Color Name
  • Color Number
  • Additional Colors
    Additional colors were given to allow users to pick additional colors to view that would work well with the selected color
  • Add to Palette
    When added to the palette is selected it moves to the current palette tab below

Kelly Moore Paints Palette Creator

Edit Palette

  • Edit Palette
    Editing the palette can happen at any time after at least one color is selected. Once the edit button is selected you can navigate through the existing palette and overwrite any one of the colors by selecting a new one and saving the change
  • Save Palette
    Save palette clears the current palette tab and moves all of the selected colors into the saved palette tab.

Kelly Moore Paints Palette Creator

Saved Palette

  • Palette Name/Description
    For initial launchIt was decided it would default to Palette 1, 2, 3 etc - but can be edited upon clicking edit. In future phases the idea would be you would save upon click
  • Edit Palette
    Once the edit button is selected you can navigate through the existing palette and overwrite any one of the colors by selecting a new one and saving the change
  • Email
    Allows you to email palette details

Kelly Moore Paints Palette Creator

Full Palette

Once you have selected your first four colors it will tell you that your palette is full by changing the state and throwing an informational message asking you if you would like to save or edit the palette

Kelly Moore Paints Palette Creator

Email Palette 

  • Email form
    Upon clicking email you are given the form to allow you to select who it goes to, your name & email address and adding the note
  • Confirmation & error messaging
    Will show if any form field is not filled out
  • What happens upon send

Kelly Moore Paints Palette Creator

Emailed Palette Email Layout

We made the content very simple with minimal dynamic fields and text to allow a quick and simple first step implementation.

As the information moved to being saved on the server there was talk of making this layout more robust including additional like colors and more detail

Summary

  • The project already had a fairly large amount of constraints decided that I had to work within, which was challenging because some of them were not the best from a usability standpoint
  • The turn around for the agency to produce this work was extremely fast, therefore making us have to compromise on intended functionality in the beginning for the time to gain longer-term gains in the product
  • The website that utilizes some of these initial concepts  https://kellymoore.com/mycolorstudio-color-palette/