As someone pivoting to a design-focused career from a technical background, one of the biggest challenges I had while learning the practice of design was sharpening my visual design skills.
In particular, I recall spending hours agonizing over color choices in style tiles and design swatches, only to end up nine-times-out-of-ten switching up and modifying the palette once I used them in actual designs and saw that they weren't quite having the effect I wanted.
Hence, I came up with the idea for an application called PaletteScry - a color palette picker for designers that would allow them to view how their color choices would look laid out on example interfaces, so they would have an idea of how their chosen palettes would look on an actual interface layout.
Over the course of about six weeks, I performed the research, design, and development of this application myself, and created a functioning website in Webflow for the application.
I conducted competitor analysis amongst a number of online color palette picker tools - some examples follow:
As standard, most of them offer the following:
However, hardly any of them allowed the user to actually view how the chosen palettes would look in an interface layout - either the palettes were simply swatches laid in a line across the screen, or the interface of the palette picker itself would get re-colored for the chosen palette.
Canva contained something close, in that it does offer colorable templates. However, using that takes several few clicks, a login/signup, and some extra customization.
I believe the PaletteScry application could provide value in letting designers see what their color schemes would look like on (for example) a generalized landing page, or a content page.
Based on my research, I decided PaletteScry should offer much of the same functionality for creating, comparing, and saving color themes that are found in other online color pickers, in addition to its own unique layout functionality.
I drew up a user flow map showing how users might complete the task of finding and saving a palette. Click for larger image:
I sketched some ideas for the layout in both desktop and mobile versions:
I designed the interface that would actually allow users to change and update the colors on screen.
I decided to design it around the 60-30-10 rule, a useful and time-honored guideline for creating a balanced color scheme.
Following the rule, the picker would allow users to choose a primary, secondary, and tertiary color to make up their color palettes.
Images of initial, subsequent, and final designs follow. I used iro.js for the color picker functionality.
I chose three example layouts which would give users a better idea of what their color choices would look like on a real interface.
The examples represent simplified versions of common website and application layouts. The sections in each example are colored to closely follow the 60-30-10 rule of the primary, secondary, and tertiary color sections.
I created my design prototypes as fully functioning Webflow sites, to achieve a more fully testable prototype.
I went through several iterations on the design while in the process of creation, aiming for higher usability and responsiveness.
Usability testing was conducted on the prototype to answer the following questions:
Test participants were designers themselves, a number of whom were taking the same DesignLab course that I had.
Test methodology was as follows:
There are no right or wrong answers for the final color palettes, the idea was simply to have participants interact with the prototype in a typical use case.
I created an affinity map summarizing the results of the test:
Link to PaletteScry website, showing iterated designs.
As mentioned, a common suggestion during usability testing was adding functionality to suggest complementary color schemes based on the color choices. This would be an obvious next step, and would likely be a separate sub-project to work out how best the functionality can be added.
I was happy to see most people found the example layouts to be useful, and I am considering adding more examples to represent more kinds of layouts in the future.