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
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.
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.
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.
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.
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.
This work was created in consultation with designer: Danielle Johnson