CRAIG ROBERTS
Portfolio
Personas and Research

(Within) - Between Exhibition Site

How much information can a pixel hold?


(Within) – Between digital experience is an experimental exploration of digital navigation that highlights the concept of the exhibition. The (Within) – Between Exhibition highlights the drawing of abstract relationships between eighteen distinct points of view. The overarching concept uses punctuation marks to highlight moments within and between each student’s thesis. Each thesis encloses itself in deep investigation, connects seemingly unconnected concepts, or comes to conclusions on a contemporary design debate. (Within) – Between punctuation marks are metaphors for the relationships between thesis because punctuation marks also enclose, connect, or end topics.

 

(Within) – Between digital experience extends the concept by allowing the each thesis to live within its representative punctuation, and uses punctuation as a tool to navigate between thesis.


(Within) – Between is built from the ground up with custom front-end coding, innovative and experimental user experience design, and creative interaction design.

 

Visit the website by clicking here.

Personas and Research

Personas and Research

After we settled on the concept of the exhibition, we began developing personas based on the past MFA exhibitions and our collective communication and marketing goals.

Flow Chart and Empathy Maps

Flow Chart and Empathy Maps

After understanding our personas' mindsets, we understood that our intended users valued understanding the exhibition's concept and were looking for an unexpected experience,

Deliverables2.png
Deliverables3.png
Deliverables4.png
Deliverables5.png
High Level Flow and Information Architecture

High Level Flow and Information Architecture

Our of our users came to the site looking for direct and simple content. The site flow remains simple and direct, allowing the site to be as useful as possible by not costing users valuable time by buring content.

Wireframes

Wireframes

The site's content is simple and so are the wireframes. The exhibition statement that has served as the dominant visual device for all the exhibition collateral makes a return one the web experience.

Also,  the main communicative symbol throughout the exhibition are the punctuation marks, so the website propels them to the site's focal point.

Finally, the most exciting feature of the (Within) – Between digital experience is navigation system. Each punctuation mark has a space between that can be zoomed to reveal content. Also, each mark then becomes a navigation tool to travel between content.

 

Deliverables8.png
Deliverables9.png
Interaction Design

Interaction Design

Since were strained for time, and to immediately test user flows, I coded all the interactions using HTML, CSS, and JavaScript. I went through multiple interactions of the code, responding to testing and feedback on each iteration.

The faded load in communicates all the content is present, which is important because the initial page lacking text is unexpected.

The button to allow the switch between thesis statements and designer names makes the finding content simpler for returning users.

The punctuation mark wiggle indicated that the marks are interactive and imbue them with visual importance.

Finally, the zoom in and slide motion between projects further communicates the concept of the exhibition. These interactions take advantage of the affordances of the digital medium to communicate the concept while providing a pleasant, and unexpected experience.

  

 

wb3.gif
  

 

wb4.gif
  

 

wb6.gif
wb7.gif
Screen Shot 2017-05-07 at 3.45.19 PM.png
560c6440257677.57782c6a03ab2.jpg
1c64c940257677.57782c6a06497.jpg
db930940257677.57782c6a05893.jpg
e40a2f40257677.57782c697d09a.jpg
a93a8640257677.57782c697dd23.jpg