UI/UX

Cool off California

Role

UX Designer
Figma Lead

Team

Goldie Chu
Lily Hu
Benjamin Tran

Timeframe

Summer 2022, 3 months

Managers

Melissa Floca
Rukmini R.

Problem Statement

In partnership with the San Diego Supercomputer Center and ‍WIFIRE, Mindshifts on Megafire is a 6-hour design challenge hosted by UCSD’s The Design Lab. Participating students design concepts of installations with the goal of increasing public understanding and acceptance of prescribed burns as an important tool for ending wildfires.

Initial Product

Our winning design was a hybrid exhibition: a physical mural with informational points which linked to a mobile application, both teaching residents in fire-prone communities the benefits of prescribed burns to increase social awareness and acceptance of the activity.

Testing

While the pop-up was a unique approach, our team worried about its practicality and effectiveness.

To probe for potential issues, we interviewed 4 users through a digital simulation of our installation. Having them engage with a Figma prototype of the pop-up, we examined how likely they would:

Approach our physical installation in the wild, and
Scan the QR code to examine our mobile website.

Gauging how much users would interact with the prototype, and identifying the best contexts of attraction, we unveiled these key takeaways:

User's likelihood to approach depends on availability
-> The experience must be shorter than 5 minutes

Users are unlikely to read heavy text
> The delivery must be brief but memorable

Installation must stand out and capture attention

Transitioning

Testing

Following our testing and feedback sessions, the team gathered secondary research to find strategies already proven to capture and engage user attention. We notes that people retained visual information over written information, and that animated pictures elicited greater motivational attraction than still images. After making a pros and cons list, we decided to take the chance to animate a PSA rather than installing an informational mural.

Expert Knowledge

Our team met with burn bosses for a Q&A sessions. During this, we gained an in-depth understanding prescribed burns and their execution, safety, risks, and impact. We also explored why negative public reception and pushback occurs.
These interviews lent to our problem statement as it allowed us to discover that education and anxiety reduction was truly the solution to increasing prescribed burn social awareness and acceptance.

Animation

Purpose

Now an animation, the first component of our exhibit remains as the initial exposure to our whole exhibit, introducing the audience to prescribed burns. During ideation, we individually drafted our own mascots and stories. While I participated in the process of drafting the final story and mascot, Sparky, most of my effort went into organizing this information for our animator.

Website

Purpose

Our website remained the same in its purpose, being a post-animation educational step. Now that an animation will introduce users through a digital setting, we are prioritizing a desktop website along with the mobile platform. While the animation introduces prescribed burns, the website provides the history and steps of the process and an FAQ for further curiosities. The website also acts as a central hub to showcase the other winning teams and their exhibits. Ultimately, this second half of our exhibit teaches the technical information to our users, alleviating the anxieties surrounding prescribed burns.

Figma Sandbox

Each team member iterated on different website structures, both desktop and mobile. The screenshot below is a sandbox of all of the ideas and iterations throughout our project.

Limitations

Here are the two main challenges we encountered, and how we overcame them:

Final Product

Reflection

Throughout this project, my team and I collaborated with multiple teams, industry professionals, and an animator. It was also the first I contributed to a full-fledge animation which was a fun and unique experience! I hope to work on a expansive project with a dedicated team in the future

Reflection

Cross-Team Collaboration (Kind of)

While the internal design process was relatively smooth, communication from other teams within the internship was lacking, hindering developments on certain parts of the site. For future projects, I plan to push harder for communication, along with exploring other ways to ease it.

User Testing (Lacking)

While our team had alternate sources of iterations for our website, e.g. meeting with burn bosses, consistent check-in's with project managers, and referencing existing sites, user testing should be prioritized as certain usability issues will only be noticed from the perspective of users.

Experiences (Fun!)

This was also the first I contributed to a full-fledge animation which was a fun and unique experience! It was interesting to apply the design process to the animation process, particularly the storyboarding and character design. I hope to work on a expansive project with another dedicated team in the future.