Role Researcher & Designer Type Contract project
Credits
Sicong Sui, curator & Yitao Xiong, technic support
Zyncren Pence, Huang Pei-Yu, Tom Eichacker and Shohei Higa, artworks
Zyncren Pence, Huang Pei-Yu, Tom Eichacker and Shohei Higa, artworks
Project Scope
● Project management
● Information architecture
● Wireframing
● Prototyping
● Site branding
● Coding and updating the site
● Compatibility test and fixing bugs
● Information architecture
● Wireframing
● Prototyping
● Site branding
● Coding and updating the site
● Compatibility test and fixing bugs
Client Info
Project AAA, or Anthropomorphic Animal Avatar, is a part of the curation practice department's online exhibition project in 2021 at Maryland Institute College of Art. Initiated by artist and curator Sicong Sui, the exhibition explores interchangeable identities between humans & animals, extant in every culture that helps to tell the stories of our individual and collective journeys.
Check out the official site 👈
Problems
When we started the project, the curator shared the vision of embedding 4 or 5 artists' multimedia works(360 images, gifs, mini-game) on one webpage. It brought up several questions. Each artist's final delivery date is very different, and their styles vary. The design can be too overwhelming for the audience to process all information on one page.
So the first thing I did was thoroughly research what tools to fulfill my collaborators' needs and what platform could help the client reach out to more audiences. After that, I worked closely with the curator to develop a schedule and set several short-term and long-term goals for this website development.
Goals
According to the original vision from the curator, I catalogized three main groups of website users: curators, artists, and art enthusiasts.
To understand every group further, I interviewed 2-3 people from each group. From this process and later discussion with the curator, I summarized four main goals:
● Intuitive hierarchy for information Most users from each group would like to navigate the website easily without thinking hard.
● Curated layouts for the presentation Most artists & curators preferred a consistent grid system for presenting the images, gifs, and other media works. The website serves as a blank scroll or canvas.
● Compatibility friendly Most artists are concerned about how different devices display their works and ask for stable and flexible embedded solutions for their multimedia pages.
● Social links and other ways for online engagement exhibitions shall be a win-win presentation for artists & curators. The website needs ways for users to follow artists or join in future collaborations.
Solutions
Formulate and build an artistic and functional website with the following:
● One scroll-down landing page with the fixed navigation bar
● Clean layouts with edited images, gifs, and digestible writing intros.
● Third-party website builder with customized plug-ins and a specific game engine that a website can embed.
● Clickable artwork for guiding the traffic toward the artist's social media and other platforms for buying their art.
● One scroll-down landing page with the fixed navigation bar
● Clean layouts with edited images, gifs, and digestible writing intros.
● Third-party website builder with customized plug-ins and a specific game engine that a website can embed.
● Clickable artwork for guiding the traffic toward the artist's social media and other platforms for buying their art.
Project Process
Starting from the website's information hierarchy, I listed all the necessary content and designed the sitemap. After building the structure, I created initial wireframes and iterated them after testing the visual hierarchy.
I specifically changed the order of the navigation bar same as a physical
exhibition wayfinding order:
exhibition wayfinding order:
The artists/themes sections come first, and the info section comes later.
The finalized website wireframes include a homepage, three customized info pages with embedded multimedia links, and a forward email service in the about us section.
After receiving artwork and researching similar projects online, I collaborated with the curator to work on the direction to capture the essence of the modern gallery, including choosing a typeface inspired by The Hound of the Baskervilles by Arthur Conan Doyle.
For embedding the virtual experience, I did the photo editing for the artist Happy and imported it into 360 viewing software.
Click the image to try it 👇
At the same time, I was in charge of coding a mini-game called welcome to the happy house with my co-worker Yitao Xiong. I used Html/CSS/JavaScript to achieve most of the mini-game functions, including embedded audio/loading screen/movable parts/customized mouse cursor.
Click the image to play the game👇
The last part of this project is to test and maintain this website on multiple platforms. I made sure to present the content correctly and responsively.
