Collective Dimensions Exhibit

An interactive cross-platform exhibition for the 2021 Biennale.

TIMELINE

5 months

ROLE

Designer, researcher, front-end developer

TEAM

Professor, Grad student, Undergraduate student developers

TOOLS

Figma, Boostrap, HTML/CSS, Isotope, WebFaction

IMPACT

Designed and implemented prototypes, Shipped experience in Venice Biennale

Collective Dimensions is part of the 2020 Venice Biennale of Architecture Exhibition that was scheduled for 2020 and later postponed to 2021 due to the COVID-19 pandemic. I worked with the team at the MIT Civic Data Design Lab to wireframe and code this application from scratch.

STEP 1: RESEARCH

What is the Venice Architecture Biennale? How does Collective Dimensions fit in?

The Venice Architecture Biennale is a global showcase that occurs in Venice every two years. The theme of the 17th International Architecture Exhibition was “How do we live together?” which explores how people can co-exist harmoniously despite widening political divisions and wealth gaps.

To fit this theme, our project “Collective Dimensions” seeks to quantify the qualities of open collectives: the economic motivation, membership/size, porosity and openness to new members, the platform on which the collective exists, and the manner in which the collective is governed.

Who is our target audience?

The Venice Biennale event is expected to attract around 250,000 visitors, with 114 participants from 46 countries. Prior biennales show that most visitors are not only practicing architects but also university students, as more than half of visitors are under the age of 26. For this audience, we wanted to design something that was user-friendly and interactive so we could take advantage of our online platform to create an engaging digital museum experience.

My teammate Dylan sketched out how users would interact with our application via a touchscreen tablet mounted to a bench.

STEP 2: USER FLOW

Initial User Flow

With our user personas in mind, I used FlowMapp to envision their journey in our current site map. I created this original user flow in Figma to illustrate the simple interactions between our four main experiences represented as pink boxes.

These boxes are shown in further detail via the high-fidelity Figma wireframes and red arrows below.

Original Wireframes

From the About Page you can:

1. Hover over the left sidebar to view the popover explaining each dimension. Here you can toggle the dimensions to find a specific collective.

‍2. Exit the About popup to hover over a card and get a brief overview of that collective.

After hovering over the card to get a brief preview, you can click "Read More about Collective" to expand that card and learn more about the collective.

These four wireframes were used to simplify the overall flow of the initial experience, but do not capture the full experience which is shown below.

Updated User Flow

After presenting the above wireframes to the MIT Architecture Department, we got feedback on how to make the experience more interactive.The revised user flow is shown below:

Instead of only viewing collectives, we added the ability for museum-goers to add their own collective and contribute to a growing collection of crowdsourced ideas
A new feature was added where collective cards expand to include a radar chart that visualizes the collective’s dimensions (openness, completeness, size, analog/digital, centralization) in relation to the other collectives
‍

The blue arrows indicate three ways museum-goers can add a new collective to the online exhibition:‍

Introduction Popup
About Collective Impressions Popup
Add Collective Button From Sidebar

STEP 3: NEW FEATURES

View Introduction and Adjust Sidebar Filters

The ‘Open Collectives’ popup introduces the online exhibition and invites you to either 'explore the archive' or 'add to unknown collectives.'

Upon clicking ‘explore the archive,’ you can filter collectives with the left sidebar, hover over the ‘i’ icons to learn more about each filter and use the buttons below to reset the filters or add a new collective card.

Explore Existing Collective Cards

Once the collectives are filtered, the user can hover over a specific collective card before clicking to “read more."

The card expands to reveal a longer description, photo and radar chart. Upon hover, the radar chart compares the collective's unique dimensions (in red) to the dimensions of an average collective (in grey).

Add New Collective(s)

Users can 'Add a collective' in three ways:

1. Open Collectives’ popup with ‘add to unknown collectives’ left button option
‍
‍2. Left sidebar with ‘+add collective’ button on bottom
‍
3. ‘About’ Popup with ‘+add collective’ button on bottom

The third method is shown in the video where the user inputs the collective's name and description before uploading a cover image and toggling the given dimensions to categorize the new collective.

STEP 4: FINAL EXPERIENCE

Visual Design:

We kept the entire application black and white to evoke an old-fashioned archival theme and avoid color overload. The only bright colors were for big actions such as pink for the “Submit Collective” button and red for the radar chart to compare current collective dimensions with others. The slightly curved Font Awesome typeface follows the minimalist style.

Final Demo:

Project Reflection:

It was a great experience to work on all stages of this application from wireframing to coding the website and connecting it to the backend database server.

Doing the wireframing and the front end development together helped me realize what sorts of designs were feasible which has helped me design more realistic wireframes in the future.

Overall, I had a wonderful time working with such a great team and debugging together to troubleshoot issues. In the end, we were able to create an application from scratch that we are proud of, and also made it responsive across web, tablet and mobile platforms.

For reference, our initial Github repository can be found at the link here.You can also check out the final experience here!