To implement the new design language, I devised a five-step strategy
Index and research the content
Create visual design rules
Design the modular components
Establish interaction rules
Establish rules on modular parts connections
Discover all the possible content types and research their properties/limitations and how they scale across platforms and devices.
Establish the rules around typography, colors, images, grid systems, etc.
Image Crop Rules
Design the semantic components as the building blocks for the card layouts. This architecture answers engineering needs to have a system that can handle rapid development and aggressive release cycles.
The previous model depended heavily on blue links in addition to ambiguous touch surfaces.
The goal with the new design was to create a model that makes direct interaction with the card surface be the prime method and to bring content forward.
Icons used to indicate actions within modules
Even though modular parts are supposed to be fully flexible, you still need some ground rules around how they connect. Otherwise you will end up with a disarray of clashing visual elements and inconsistent interactions.
The challenge was to let users improve the system, and nudge it toward the right path without explicitly telling it what to do since that would defeat the purpose of an intelligent predictive system.
Asking users questions was a method used to enhance the signals which the ML system could use to improve its suggestions over time. The learning layer was part of the scrim layer.
© Ali Ali 2020