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).

AVG Toolbars

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.

AVG Toolbars

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.

AVG Toolbars

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. 

AVG Toolbars

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.

AVG Toolbars

Contact

diana.calvosa@gmail.com

+972 547 378090

© 2020 by Diana Calvosa.

More about me