Color Tray Solution for the Shutterfly Creation Path on the Mobile App
Year: 2017
Role:
UX/UI Designer
Goal
Solve the issues listed below and make it easier for users to select a background for their product's design.
Issue #1 - Discoverability of solid colors vs patterns: Users had to scroll through approximately 45 solid colors until they reached the first pattern (equivalent to swiping through nine screens).
Issue #2 - Lack of consistency in specific products: In some products, 'Color' and 'Pattern' were two separate options with the same purpose - changing the background. While users did not find it confusing, showing these options separately was inconsistent with the rest of the products.
Issue #3 - Insufficient real state on the bottom bar: Some products had so many options on the bottom bar, that if we decided to split between solids and patterns for all products, it wouldn't fit the design.
Process & Experience
It was clear to me that I should combine Color and Pattern under Background, and I thought that the best way to improve their discoverability would be to allow the user to toggle between these options rather than scrolling through them. My explorations included many different attempts of icon use, scalability of the number of alternatives, and the use of gestures to discover the different options.
Outcome
Eventually, we decided that we shouldn't have more than just two categories inside the tray to avoid confusion, so I went with a clean and simple solution using text tabs. I tested the interface within a small group, and there was a great response with 100% success in task completion.