Climate Disaster Project
The Climate Disaster Project was a deliverable I was asked to create during my undergrad studies in collaboration with non-profit the organization The Climate Disaster Project. They asked for help with the creation of both a promotional website and a search engine for an archive that they are planning to create. The goal of my work was to analyze their brand and mission and then used UI/UX design principles to create a digital space for them that would be inviting for users use to learn and share their own stories.
Skills:
User Experience Design
User Interface Design
Search Engine Design
Visual Identity Design
Copyright
Wireframing
Programs:
Adobe Illustrator
Adobe Photoshop
Adobe XD
Figma
research
Research for this project began by listening to an interview with the client and analyzing their needs and how they wanted to be represented. From my notes, I summarized my findings in the statement below.
“Our client, Dr. Sean Holman, who is the director of the Climate Disaster Project, wants to share stories with the world about people impacted by climate change around the world. There is a desire to show an audience that we are all climate disaster survivors and that we are not alone in that, although often we are under the impression that we are. The key values of the client seem to be equality, individualization, and humanization. This is done through stories that are gathered through interviews and interactions with groups of people impacted by climate disasters. This is a post-truth and post-climate change project. It does not seek to argue or prove anything. The main goal is to foster a space to build a community that will hopefully have an impact for lifetimes to come.“
From there I looked at the interview files and photos they currently had to understand their direction and the tone that I should be using. My aim was to remain serious about the topic of climate change while simultaneously remaining inviting.
interviews
The next step for me was to conduct interviews with people who I perceived as potential users. I chose three people I knew who were interested in the climate and questions I wrote to better understand what they might look for in a site like this.
Their responses varied, but I was able to derive some key takeaways:
- Not every user has a detailed background with information on what is happening with regard to climate change.
- Visuals are a must if the information is to be conveyed in a way that grabs the user’s attention.
- People don’t often associate climate change with “community”.
concept map
The next thing I did was create some concept maps to better visualize the topics that the organization attempts to address. The concepts I am drawing upon come from interviews, articles, transcripts, and images all related to the organization. It took about a week to go through all of these materials but it was worth it as it gave me a much deeper understanding of what is most important to address and how it ties into my interview findings.
low-fidelity wireframes: promotional website
The first website the client wanted us to create was a promotional website. The goal of this was to get the word out about their organization and address what they do. I used what I learned from my interviews to choose what I thought would be important to include. I then began three sketching low-fidelity options, which can be seen below.
mid-fidelity wireframes: promotional website
I chose the third low-fidelity sketch as a guide in my creation of a mid-fidelity wireframe. At this point, I also had to begin ideating my copyright for the website. I wanted to write in a way that best reflected the tone of The Climate Disaster Project.
first iteration: promotional website
After creating my unfinished first iteration of the website, I was able to get some feedback from classmates. They help me with a number of suggestions. I also allowed myself to become inspired by their work.
I also decided I needed to include a call-out that references community to better address the issue of associating climate change with “community” that I found in my research.
promotional Website
my design
For my final design, I refined my first iteration quite a bit. I edited the images to help them stay more on brand. I also included a list of partners and the call-out as referenced above. Among these changes were also minor adjustments to the text, layouts, and the inclusion of my copyright for the organization.
Overall, I think this website accurately represents The Climate Disaster Project and addresses all key findings in my research.
search engine filters
A key component of the course was to create a rich-prospect interface for browsing the search engine. To do this effectively I needed to extract key themes from the documents and resources. After analyzing all the materials, I grouped the items I picked out and separated them into different filters: type of media (photo/video, audio, or text), location, disaster, date, and season.
low-fidelity wireframes: search engine
The next step was to work on a search engine. I used the filters in the previous exercise to guide this process. I decided to use my first sketch to guide the next steps of my process, which includes a map. I also thought this would be a good starting point to visualize the whole world as one community facing climate change.
mid-fidelity wireframes: search engine
My mid-fidelity wireframe helped me better see how things might look in a real digital interface. This helped me better bring my sketch to life.
first iteration: search engine
For the first iteration of my search engine, I separated the content by photo/video, audio, and text with filters on the side for the disaster type, the date of the disaster, and the season it occurred. However, after presenting this to users, I realized something that would better create a sense of community would be to have the results appear as people with their respective photos/videos, audio, and text attached.
Another thing I took into consideration was a suggestion to make the map more zoomed in. Users could not effectively interact with the map when it was this zoomed out. With these changes in mind, I quickly created a new version of the search engine.
user testing: search engine
I have included more in-depth notes on the feedback I received below and how I incorporated it into my final design. I have also condensed my findings below:
- The functionality of the pins on the map needs to be improved, does not create a clear picture of where users are from. I addressed this in my final design by making the points clickable and expand when users interact with them.
- Users were unclear on what the Climate Disaster Project was and what is their goal. I addressed this in my final design by creating better content that engaged better with the user.
- The colors are not engaging. Although I was bound by predetermined brand colors, I wanted to find a way to make the page feel more modern. I did this through the use of gradients.
search engine
my design
The final design is more modernized and crafted to fit the feel of the promotional website. The map has been zoomed in and instead of pins, icons of participants were used instead for a more personal feel. A number on the map represents more than one person with a story in the same location. When you click on it, the images of the participants in that location appear. This is demonstrated in the images below.
The drop-down filters are also interactive, although not functional as it was not needed for the purposes of this project.
The search results are not people but instead of documents as suggested after undergoing user testing. There is the option to view more content similar to how social media works where a user could scroll endlessly if they desired. This was designed to better engage users and get them to stay on the page.
I also made the search bar more prominent with a call-out to engage users. I thought it would be a nice touch to add a call-out to help more clearly communicate what the climate disaster project is about.
A Figma file is linked below the image where you can interact with the prototype in a more realistic manner.
All photos are credited to Jennifer Osborne.