The following was an Interactive Data Visualization project to illustrate my thesis. At this point, my thesis was trying to decipher a 'spectrum' between the designer and the user.
Opportunity
We live in Times-Square-like era. We are bombarded with visual content all the time. I saw an opportunity in the way visual content is curated. We, as visual designers, need to access visual content mindfully, and not mindlessly, because we are nothing but the products of what we consume. This also feeds into the products we design. A lot of what I was researching for the subject of my MFA thesis (which makes a case for Poeticity in Graphic Design) fed into considering the factors in play on the Designer and User Spectrum.
![](https://framerusercontent.com/images/QjWcDErRDSKLN1Kz9x3MGqylcS0.jpg)
The tools that make the work closer to the Designer than the User
Sublimity: The measure of spirituality in the design process.
Repetition: How repetitive the designer is in theme, style, voice, etc.
Complexity: The measure of how complicated the designed experience is.
Allusiveness: The measure of the usage of rhetorical tropes and poetic tools in design.
The tools that make the work closer to the User than the Designer
Functionality: The measure of how usable the designed experience is.
Chance: The measure of spontaneity on the designer's part.
Deconstruction: The measure of breaking conventional models in the design process.
Participation: The measure of how inclusive the designed experience is.
![](https://framerusercontent.com/images/YXeWoNViXk5znd0EA1IT2rnRJ8.gif)
Interaction
My idea was to create filters/sliders that the user would manipulate to browse through the content, much like shopping on an e-commerce store.
![](https://framerusercontent.com/images/H9KAaMOrR3l5N52awBSEG5PL28.gif)
Prototyping
The prototypes at this stage were focused on how to best illustrate the space between the user and the designer. Is it even horizontal? Does that matter? Is LTR vs RTL significant? Is there a start or an end to the interaction.
![](https://framerusercontent.com/images/xqPBJUsIV3nm4C85OR0kXkakRNM.gif)
Final Product
The final interaction is coded from scratch by using the Javascript framework of P5.JS. As soon as the user enters, they are prompted with helpful tips on using the platform.
![](https://framerusercontent.com/images/js7vr0iqjIlPcErntetbVTpDeA.jpg)
![](https://framerusercontent.com/images/KhK2W1BiaTg9RCGYyIwEOHaV9g.jpg)
An intro screen outlines how to access the platform for the user/designer and the sliders are used to access the content mindfully.
The 'zoom-out' interaction was crucial to this interaction, as that is where the user is made aware of the spectrum. The parallax effect was designed to distinguish previous searches from new searches.