Curated Collection Wireframe

Wireframe

Idea Consolidation

We brought together all the ideas around curated collection that received votes during the ideation and created an interface that accomodates the workflow.

We created two possible workflows to determine the engineering feasability of each. The two workflows differed in the following:

  • Workflow #1: Collection of Collection(CoC) specifies which Collections to use as its members. Each collection specifies their usage (e.g. Series Carousel, Series Body, etc.) on the Category card. In the Association card, the CoC designates the series which will use the CoC as its page.
  • Workflow #2: Collections are created independent from context, but CoC is embedded within the context, e.g. series. User finds the collections and assigns the appropriate usages within the context.

Initial Wireframe

Based on the consolidated workflows, we created the initial wireframe to communicate our design with the Engineering and the Product team during the Design & Dev Sync meeting.

Initially, the engineering deemed the second option infeasible, but the wireframe sparked a discussion among the developers to determine the reasonable architecture of associating a collection to a series.

Initial Wireframe for Curated Collection

Annotation

At the end of the sprint, we created annotations alongside the wireframe that matches the final design and complete workflow.

After the developers' re-architecting, the final workflow closely resembles the second option in the consolidation section.

Annotation for Curated Collection