top of page
logo_white.png

Ruoxue (Astra) Zhang

UX & Interaction Designer

Wildfire Lookout

Jan 2019 - May 2019

Academic project 

home_img.png

An app for residents in wildfire hazard areas accessing up-to-date fire data and evacuation plans 

Click here to open interactive prototype

My Major Contributions:

  • Designed low/high fidelity & interactive mockups;

  • Designed promotional website and poster

  • Made promotional video

  • Iterated on designs based on feedback;

  • Led usability tests and evaluation sessions.

 

Team: Ruoxue Zhang, Mariam Moattari, James Heaton, Henri Smulders, Noah Sutter

ai icon.png
sketch icon.png
Invision icon.png
github icon.png
xcode.png
Android_Studio_icon.png
CIC Poster.jpg

UX Design Process

process.png
logo_white.png

Empathise

Our problem space rose from an interview between a teammate and a resident lived in California.

Problem Space

Wildfires are becoming more prevalent especially in California, and evacuation actions become very common. We want to provide a platform for residents living in these areas to access up-to-date wildfires data and evacuation plans and easy-to-understand information.

logo_white.png

Research

To understand the problem better and learn about the context, we conducted several research activities.

Research Activities

doc research 2.png
doc research 1.png

Documents Study

  • Study articles and online resources about CA wildfires.

interview.png

Interviews

  • 3 Interviews with CA residents;

  • 1 Interview with Napa County fire department captain.

Competitive analysis.jpg

Domain Research

  • Learn about the related services;

  • Compare and analyze 3 competitors.

logo_white.png

Ideation

After understanding the problem and the context, I summarizes our target users to personas and generated 3 use cases. My teammate came up with the system architecture.

3 Personas

persona1.png
persona3.png
persona2.png

3 Alternatives

Approach 1

Non-digital solution​

 

The first solution is simply asking a person to run down every street in the community, and shouting out information of wildfires. People may stop the person and ask for more details.

Approach 2

Digital solution with sensors

 

Creating a sensor grid that could be distributed throughout California to identify fires in real time and having an alarm in each home to notify people.

Approach 3

Digital solution (app)​

 

An app on iOS and Android that provides many layers of fire data overlaid on a map as well as notifications or texts when fire conditions change, and user reported data to supplement data available publicly.

Decision: We evaluated pros and corns of the three alternatives, and we found out Approach 3 was the best one for our case, since it's a relatively low cost and effective way of circulating information - people only need to download the app to learn about the wildfire data. The app also provides a platform to connect people with similar concerns.

3 Use Cases

story1.png
story3.png
story2.png

System Architecture

System Archi.png
logo_white.png

Prototype

I made wireframes and got feedback from users. Then, after modifying the design ideas, I made the high fidelity prototype and interactive one.

Wireframes

flow.png

High Fidelity Prototype

Interactive Prototype

Login.png
Firemap.png
Data Layers Menu.png
iphonex_userimput data.png
Data Layers Menu2.png
Myfriends.png
Firendlocation.png
Delet alert.png
Add new alert.png
Resources.png
Settings.png
Disclaimer.png
logo_white.png

Evaluation

During the prototyping phase, I made two learning prototypes to prove the concepts and design solutions.

Usability Tests

Usability Test For Learning Prototype 1 

Fire Map Feature

 

Questions to be answered:

  • Is the way displaying fire info on the map intuitive?

  • What is the best balance between displaying information and minimizing data usage?

Design pivot:

Users wanted to see more than one type of information. Icons need to be differentiable and at the same time, familiar to users.

FirePoint-28_3x.png
Location Dot.png

Fire Point

Marker

Regular Map

Marker

AlertPoint-28_3x.png

Alert Point Marker

Usability Test For Learning Prototype 2

Alert Feature

 

Questions to be answered:

  • Do users feel secure after setting up the alert feature?

  • What information does users expect to get after receiving an alert?

Design pivot:

The former alert feature was common pushing notifications for the direct users. However, based on the feedback, we shifted our focus to set up alerts for the direct users as well as secondary users.

notification center.png
Delet alert.png

​Common Notification Center

Alert For Both 1st & 2nd Users

logo_white.png

Development

After several rounds of prototyping and evaluations, developers in our team implemented the interfaces on both IOS and Android platforms.

xcode1.png
Python server.png
firebase.png
android1.png

Xcode

Android Studio

Firebase

Python Server

Restaurant
E-commerce

Open This Interaction Project

Stress Smacker
bottom of page