KeroKero

Helping Kyoto residents stay prepared for natural disasters

Role

UI/UX Designer

Timeline

6 Weeks

Team

8-Person Team — UF x Kyoto University

8-Person Team —
UF x Kyoto University

8-Person Team —
UF x Kyoto University

Tools

Figma, Photoshop,
Illustrator, .NET MAUI

Overview

KeroKero is a disaster preparedness app designed to help residents and visitors in Kyoto stay informed and safe before, during, and after natural disasters. The app provides real-time alerts, offline accessibility, evacuation maps, and an interactive chatbot that guides users through emergency preparedness with clear, supportive instructions.

I served as one of two designers on a cross-university team of eight students through the UF in Japan: Cross-Cultural Engineering and Design Program at Kyoto University. Collaborating with students from both the University of Florida and Kyoto University, our goal was to create a user-centered solution for a region frequently impacted by earthquakes and typhoons.

The Challenge

How might we design a disaster preparedness tool that feels reliable, approachable, and culturally intuitive for users in Japan?

How might we design a disaster preparedness tool that feels reliable, approachable, and culturally intuitive for users in Japan?

While Japan has many government resources for disaster alerts, most are text-heavy, difficult to navigate, or require constant internet access. Residents and international students needed a simpler, more visual way to prepare, access emergency info offline, and stay calm under stress.

The Outcome

A calm, accessible disaster preparedness app that helps users stay informed, prepared, and supported during natural disasters

Understanding The Need

To understand how people in Kyoto prepare for disasters and what they look for in a preparedness app, we surveyed locals to uncover their biggest challenges, priorities, and trust factors when using disaster tools.

Key Findings

Cross-cultural feedback highlighted that preparedness tools must be both technically dependable and culturally approachable, helping locals and visitors both feel secure during emergencies.

Top Concerns When Using a Disaster App

Preferred Notifications During a Disaster

Locals care most about accuracy and reliability.

Locals care most about accuracy and reliability.

Instant alerts and updates were clear priorities.

Instant alerts and updates were clear priorities.

78% of participants had experienced
earthquakes firsthand

78% of participants had experienced
earthquakes firsthand

89% of participants rated offline
access as very important

89% of participants rated offline
access as very important

Insights

Users emphasized trust, clarity, and reliability over aesthetics or advanced tech. They want an app that works even if internet or power fails.

These insights led us to prioritize:

• Offline-first functionality for key features

• Simple navigation for high-stress situations

• Calm, friendly interface to reduce anxiety during emergencies

Design Goals

Insights from research shaped four main design goals guiding KeroKero’s user experience and interface design.

Offline Access

Keep key tools like maps and checklists usable without internet or power.

Simplify Navigation

Create clear, intuitive flows for quick action, even under stress.

Build Trust

Provide verified, real-time information users can rely on during emergencies.

Promote Calm

Use friendly visuals and tone to make preparedness feel approachable.

Design Process

Empathize

Define

Ideate

Prototype

Test

We began by researching how Kyoto residents prepare for disasters, analyzing survey data to uncover key pain points like unclear alerts, limited offline access, and confusing navigation. From these insights, we brainstormed early concepts focused on trust, clarity, and accessibility.

As one of two designers, I helped turn those insights into wireframes and high-fidelity prototypes in Figma. Our focus was on building trust through clear visuals, calm colors, and intuitive navigation. Through rounds of feedback and iteration, we refined KeroKero into an app that feels reliable, intuitive, and supportive during emergencies.

Sitemap

Branding Guidelines

Lo-Fi to Hi-Fi Wireframes

Design Solutions

Core Design Solutions

Map-Based Shelter Finder

Problem

Residents needed a reliable way to locate nearby shelters and safe routes during emergencies, especially when internet access might be limited.

Solution

The map view highlights nearby shelters, hospitals, and supply stations with clear, color-coded markers. Routes and information are stored for offline access, helping users find safe locations even during network outages. The simple layout ensures clarity under stress.

Checklist & Important Documents

Problem

Users wanted a simple way to track what they had ready for emergencies, and a secure place to keep copies of essential documents that could be lost or damaged during a disaster.

Solution

The Preparedness Checklist helps users track items like supplies, emergency kits, and documents while monitoring progress.

Alongside it, the Important Documents feature allows users to safely upload digital copies of personal records, such as IDs, insurance papers, or medical information, ensuring they remain accessible when needed most.

Chatbot

Problem

During emergencies, users often need quick, reliable guidance without sorting through complicated menus or internet-dependent tools. Many existing disaster apps overwhelm users with technical language or stop functioning when offline.

Solution

KeroKero’s chatbot assistant provides calm, conversational guidance, even without an internet connection. Users can ask questions, access safety steps, or get reminders from their offline library of tips.

Fully Developed Prototype Demo

Our team developed KeroKero using .NET MAUI on a Pixel 5 emulator, bringing the designed features to life in a working prototype. The app includes map-based shelter finding, offline access, checklists, and customizable alerts.

Functional prototype built in .NET MAUI showcasing KeroKero’s key features
in action.

Functional prototype built in .NET MAUI showcasing KeroKero’s key features in action.

Functional prototype built in .NET MAUI showcasing KeroKero’s key features in action.

Reflection and Impact

KeroKero showed me how thoughtful, human-centered design can make something as serious as disaster preparedness feel calm and approachable by focusing on clarity, trust, and accessibility.

This project reminded me how important it is to design for real people and real conditions. Every choice, from the soft color palette to the friendly mascot, was about creating a sense of comfort and reliability when users might need it most.

Working with both UF and Kyoto University students also taught me a lot about cross-cultural collaboration. Listening to local perspectives helped us design features that felt truly relevant to Kyoto residents and showed how empathy and collaboration can make design more meaningful.