This project was reported by WTTW. This is a non-profit group project. One can access the project websie at I'm Still Survivng.
Screenshot of the Website I'm Still Survivng'
I’m Still Surviving is a living women’s history of HIV/AIDS. Here you will find hundreds of excerpts from 39 women’s oral history narratives, each of whom comes from cities and towns in one of three states: New York, Illinois and North Carolina. We have built a set of historical frames that can be viewed in the SEE section, and listened to in the HEAR section.
Part of the Brainstorm Process
During the ideation process, the direction of the exhibition process also focus on making the history narratives “told” by the women themselves. Audios and quotes recorded from these women are the core of the exhibition. In this way, instead of known as a group of anonymous medical subjects or just a figure in statics, these women were able to speak out their voice to the public.
The above diagram illustrates how the information architecture leads audiences.
The first move we stepped out is to build up the information architecture for the entire exhibition sys- tem. After serval round of iteration for the information architecture, we determined to design a webpage with the Content Management System provided by Webflow. The information architecture illustrates above.
In our anticipation, the website should perform in a manner of telling one story from different perspective and via different media forms. Therefore, the exhibition content on this website are divided by 2 categories, “how to learn the history” and “what the history is about”. Thus, audiences can navigate the website based on “SEE”, “HEAR”, and “READ”, or when they enter each section, they can learn the history (story) through different themes (e.g. Family Dynamics, Health Cares, etc.).
We also take the experience how people come into the digital exhibition from outside world serious. First people can learn the exhibition from an IRL poster on their local street. By scanning QR code or enter the URL they will be able to navigate materials related to the poster they encounter with in the real life. These materials will act as an introduction before audiences digging deeper and exploring more.
This is a list of Contents we stored in the Content Management System (CMS).
This is a graph illustrates how we refers items from one category to another.
The graphs above on the bottom-right is a demonstration about how the User’s Visit Flow Map works with Webflow’s Content Management System (CMS). The CMS provide the team an opportunity to manage all histories(stories) in one place, and automatically changes the content on the web page. In a nut shell, the CMS is acting like a database.
One version of wireframe I made for the project I'm Still Surviving'
The final wireframe developed by me is displayed above.
During framework developing session, we went through all the interaction details about how to realize our initial design objectives by using the information architecture. The wireframe we developed in this session provided us a visual understanding how the information architecture can be more interactive to visitors and how to prevent our visitors don’t get lost in a 3-layer interaction system.
The above graph is the flow of user interaction in the High Fidelity Prototype.
By utilizing the Webflow platform we finally developed the working prototype for the website. Some screen captures are shown above.
(Scroll the iFrame Down Here to See Effects)
The above is a demo of the website's scroll animation.
News Report of the Launch of stillsurviving.net on Chicago Tonight
I’m Still Surviving is a living women’s history of HIV/AIDS. Here you will find hundreds of excerpts from 39 women’s oral history narratives, each of whom comes from cities and towns in one of three states: New York, Illinois and North Carolina. We have built a set of historical frames that can be viewed in the SEE section, and listened to in the HEAR section.
Thank you for reading. This is the end of this project.
Sincerely,
Siyi Zhu
July 5, 2021
