PicMonkey - Mobile Multi-Color Chooser
Background:
After I started teaching and left Microsoft, I did a number of shorter consulting contracts for various mobile apps companies including PicMonkey, a local startup that has since been acquired by Shutterstock. PicMonkey’s website and mobile app make high-powered image editing and design tools accessible to the “everyday creative”. Their web product had a vast library of multi-colored graphics users could add to their content and customer. The mobile app was limited to single-color editing which limited users to a small subset of single-color graphics. I was tasked with exploring ways users could choose between and edit multiple colors, so we could expand the library of graphic available to mobile users.
My role:
User experience, visual design, micro-interaction & motion design
When I started, the mobile app had only single-color graphic elements with the ability to scroll through the colors to choose a different one or custom color sliders to create your own.
An exploration for rebranding REI’s Outlet business. To connect with the audience, I used modern lifestyle photography and amplified the heritage aspect of REI’s brand, rather than focusing solely on the featured product.
Process & details:
I started the ideation process with and audit of how the functionality worked on the full site product. Users can browse the graphics library by category, drop an element onto your composition, and edit adjust any of the colors. When selected, the contextual Graphics panel allows you to click the swatch for an existing color and choose a new one from pre-defined palettes, or mix your own custom color. You can repeat this process to modify any of the colors used in the graphic.
The full PicMonkey site has a library multi-colored graphic content users can select use in their composition. You can click a swatch for any color used in the graphic and assign a new color of their choice. (Note: This is a screenshot of the desktop site - I did not design this.)
As is the often the case when I start working with a new group, the cross-disciplinary team at PicMonkey was accustomed to very solution-focused ideation. I worked with them to start feature explorations by reframing the goal as a User Story to make sure we were aligned on what the user is trying to do and why they care about it, without any preconceived solutions seeping in. I also encouraged lower-fidelity exploration of ideas, moving to high fidelity after design, PM, and engineering aligned on an approach.
After initial ideation, I presented four interaction approaches to enable the desired functionality including the benefits and limitations of each option.
The team and I agreed that the on-canvas color selection approach is the one we wanted to move forward with, choosing to limit the number or colors in a graphic to 5 colors, to avoid fulling the screen with color-choosing UI when the graphic is selected. During my time at PicMonkey, I built and deployed their Sketch library for the mobile product, which made moving the exploration to high-fidelity fast and easy.
I created and deployed the mobile version of PicMonkey’s design library in Sketch, enabling our team to quickly construct high-fidelity screens.
Since this approach introduced new interface elements that would initially animate-in, I learned Principal which is what the design team at PicMonkey was using to prototype micro-interactions and animation. We had senior engineers working on site in Seattle, but a number of our developers were overseas and worked overnight, so prototypes and detailed specification helped our offshore team move forward with less oversight when we weren’t online to answer questions.
The prototype shows that the first time a user adds a multi-colored sticker we'll use motion to attract the user’s attention to the new control as it expands out. The color-picker is only visible when a multi-color graphic is actively selected. If they tap away or re-select the element, I recommended no subsequent animation on hide and reveal to maintain a fast and responsive feel. The contextual control is there when you need it, and out of your way when you don’t.
This is an example of some of the additional documentation I created to support the engineering group with detailed specifications of the interaction and intended functionality.
Outcome:
The development and release of this feature unlocked a much larger amount of rich content that users could customize and add to their creations while bringing the mobile experience to closer parody with the full-site. I didn’t stay at PicMonkey long enough to learn specific metrics measuring the success of this approach, but recently noticed that even years later the method I designed is the pattern still used for color selection and editing today.
The final interface design allows users to use the on-canvas color selector to isolate a color in the multi-color graphic and use the color selection slider to change it to the color of their choice. The illustrations on the right are samples of the new multi-color graphics this feature enabled access and use.
This work was created in consultation with designer: Danielle Johnson