Climate Disaster Project
Landing Page & Data Management System
Project Brief
Over the course of a semester, my class worked with the Climate Disaster Project, an organization of volunteers and students in journalism, photography, design, and other concentrations aiming to bring more awareness to the effects of climate change through the documented testimonies and experiences of climate disaster survivors. A majority of our work was focused on researching and developing data archives and a landing page for their website.
Research & Sketches
I began work on the landing page layout, collecting the information I needed to include, then sketching 3 different layouts. The first was more traditional module design, the second more organic, and the third a bit more experimental with zigzags and odd angles. I ended up choosing the second design to emulate the Climate Disaster Project’s existing logomark, which consists of mostly organic shapes and is more rounded.
I also sketched out 3 designs for the rich prospect data interface, ranging from more traditional representations to less rigid or structured organizations. The end result is based on the third concept, where the data is organized in dots, each one being an individual and their story, that can be narrowed down and searched through with filters based on content.
After designing the initial mockup of the archival interface, I asked 3 individuals of different majors and backgrounds to click through the interface and feel free to mention anything confusing. From each feedback session, I noted my observations of their actions, my response to their actions, and my analysis of their interactions with the interface. I then summarized the insights to focus in on the necessary changes to make the interface more user friendly and efficient, and incorporated those changes in the final interface.
Landing Page
Much like during the ideation phase, I wanted to focus on continuing the brand elements and make the projects purpose the main focus. I maintained the organic forms and flow of the site, in addition to color palette and typefaces from the brand guidelines available to me. The first thing site users see is a quote from the project’s manifesto and a button to report their own story and experiences. This is over a background of an image taken from the Australian fires to illustrate the impact of climate change on the environment. Directly below are 3 sample testimony summaries from disaster survivors with their picture, event, name, and story. At the time I didn’t have access to their names and stories, only having their images from ongoing work, so I filled in the space with filler text to show content placement in the medium fidelity mockup. Below I continue the same approach as above with the mission statement and rollover process descriptions with images of survivors. I close out the page with a summary of the Climate Disaster Project’s work with volunteers and students and their partners.
Data Management System
With so many individual experiences and stories, information could become difficult to sift through and messily organized, so I deliberately chose to keep the organization simple and easy to narrow down and view. In this data archive and management interface, all the individual testimonies are represented as a dot, and as the user searches keywords or selects filters, the number of results narrows down to make their search more manageable. The size of the result screen can be zoomed in and out and the user can click and drag across it with the toolbar on the right. When the cursor rolls over a dot, the survivor’s image shows and the user can click on it to show the survivors name, image, location, and event as well as an audio recording and transcript of their full interview and a summary of their statement with the option to read more and share their story on social media and other platforms to spread awareness. This organization simplifies the data to be easier to look through and is more logical and less distracting than if all the testimonies were presented all at once. It’s designed for users to easily learn more about the reality of climate change and its real life consequences.