Product Design
Front-End Dev
Content Strategy
ARRAY, an independent film distribution and resource collective led by acclaimed filmmaker Ava DuVernay, struggled to showcase the array (pun intended) of content and resources it offers to the community. Thus, I aligned with executive leadership to land on a visual direction and content strategy that sought to balance the breadth of initiatives with the wealth of content released by ARRAY in a clean, well-structured yet funky way.
This work start with a simple set of words meant to embody the design direction: Warm. Ethnic. Confident. Unapologetic. Radiant. Vibrant. It was imperative to the client that the design make you ‘feel something’. With that direction, my initial moodboard + color palette set the stage.
So here's the story arc... visit the live prototype I developed at (https://array-now.webflow.io/) to follow along.
Upon arrival, users are greeted with an array of color, a horizon of sorts representing the dawning of a new era in film and the core ethos behind the brand of ‘Change is ours to create’. This gives way to the home screen, displayed in either the column or grid views. The columns — reminiscent of film strips that herald nostalgia — are used to highlight key initiatives within the organization; while the grid view showcases the vast assortment of past distributed films for easy access.
This is a snippet of the last iteration for the Home UI juxtaposed with the initial color palette and moodboard I created to inspire the work.
The initial iteration took a stab at seamlessly combining the internal organization pillars with the independent films it produces and releases externally. To bring this iteration to life I built a live site to show interactions and page transitions.
Link to V1 Live Site: Click/Tap Here
In the second iteration, I balanced the tiles with a larger initial block giving ARRAY the opportunity to highlight a singular piece of featured content. This version also introduced elements such as the menu, newsletter sign up and horizontal scroll.
Desktop Prototype link: Click/Tap Here
Mobile Prototype link: Click/Tap Here