Yushun Zhao

Science Communication

Science is often seen as theoretical and dry - making it fun and accessible through storytelling and visual communication.

Visual
Storytelling
01/ 05

Overview
‍
This project is a scrollytelling website designed to make cybersecurity research accessible to the public. It tells the story of how the “Tamarin Prover” security tool was developed, based on the work of Prof. Dr. Cas Cremers.
‍
Role: Web Design, Visual Storytelling, Visual Design, Motion Design
‍
Software: Figma, Webflow, Adobe Illustrator, Adobe Photoshop, Adobe After Effects, Procreate

Visual
Storytelling
02/ 05

Visualization
‍
Visualization helps explain concepts that are usually not accessible to non-professionals.

In one example of this project, visual animations are used to present security protocols on both macro and micro levels, from a global E-commerce example to explaining what security protocols are and why they matter.

Visual
Storytelling
03/ 05

Storytelling

Formal verification, in the context of software systems, is a mathematical proof of every possibility. But what does that actually mean?
‍
Here, the metaphor infinite labyrinth is used in the storytelling, showing how complex the problem can be, to prove every possible path in the maze. In the storytelling, it leads further to the collaboration: humans and computers need each other.

Visual
Storytelling
04/ 05

Design Process
‍
My teammates and I ran several workshops to define the goal, target group, format, structure, and content.

During the conceptual and design phases, I developed metaphors and storyboards to transfer knowledge and support the narrative, and also designed the website, created visual assets, built an prototype with motion design in Figma.

We then tested a part of the website and refined it based on user feedback.

Visual
Storytelling
05/ 05

Science is fun
‍
In this project, I did something I've always wanted to achieve in science communication - making science fun and creating an entry point for everyone who is interested in it, or who doesn‘t yet know they are :D

Visit Site

Science Outreach
01/ 04

Overview

The research festival "CISPA ♥ IGB" was held in St. Ingbert. Visitors gained insights into research on cybersecurity with a diverse program for both children and adults.

Our team presented three demonstrators designed to share practical password knowledge with the public.
‍‍
Role: UI/UX Design, Science Communication, Photography
‍
Software: Figma

Science Outreach
02 / 04

Crack the Password

To crack passwords, computers need energy. In this demonstrator, visitors row on a rowing machine, using their own physical energy to “crack” a password. In this way, they can physically experience how much effort it takes to break passwords of different lengths.
‍
Another screen shows how long it takes to crack passwords depending on their length and complexity. Through this experience, visitors gain a better understanding of the importance of creating strong passwords. Therefore, a password manager is a useful tool to help generate strong passwords and keep them safe.

Science Outreach
03 / 04

Secret Paths
‍
Unlike the “brute-force attack” shown with the rowing machine, this demonstrator explains how people use a “side-channel attack” to discover passwords.

A side-channel attack means finding computer secrets by watching how it behaves, such as how long it takes, how much power it uses, or the small sounds it makes.

The demonstrator playfully introduces people of all ages to the basics of side-channel research. It makes science fun and helps people overcome their fear of technology and mathematics.

Science Outreach
04 / 04

Digitaler Pickpocket

NFC (Near Field Communication) is used in our everyday life. It allows two devices to talk to each other wirelessly when they are very close. For example, when paying at the supermarket.This demonstrator shows how a hidden reader inside a briefcase can steal card information using NFC technology. But with a blocker card, the information stays safe.
‍
The demonstrator helps visitors understand how technology can be misused and how they can protect themselves.

*Currently, this attack isn’t possible in real life.

Research Tools

Tools designed to support scientific work and translate research into practical use.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Research Software
Tamarin Prover
01/ 04

Overview
‍
This project redesigns the analysis-graphic component of Tamarin Prover - a security protocol verification tool.

The original graphic is a static pixel image, which is not easy to use when the graph is large.

The new tool generates dynamic graphs, making it possible to explore and analyze even complex graphs interactively with helpful features.

‍Role: Software Design, UI/UX Design, Visual Design, User Research
‍
Software: Figma

Research Software
Tamarin Prover
02/ 04

Design Process
‍
After running user interviews with researchers also our direct target group, we identified several key needs. Based on these insights, we improved two main areas: the graph and the user interface with additional features.

My teammate and I developed the rough and refined concept together and I created the visual design and visual assets.

The new graphics was also developed further.

Research Software
Tamarin Prover
03/ 04

Features
‍
To meet researchers' needs and make their work easier, we also designed several new features for tamarin prover in it's new interface, such as search function, group function, ghost box.

Research Software
Tamarin Prover
04/ 04

Graph
‍
The new interactive graph has been implemented. Here is the example graph of the TLS 3.0 protocol analysis. As you can see, it is complex and enormous, and the new version allows analysis at multiple levels of detail.

Science-based Tools
01/ 03

Oversaire
‍
This was a startup project in 2023, based on the master’s thesis of Matthias Michels.
‍
Working together with two engineers, I created the web design of this project.

‍Role: Web Design, UI/UX Design
‍
Software: Figma

Visit Site

Science-based Tools
02/ 03

Oversaire
‍
The idea is to offer a service that automates data protection for data protection officers and web agencies.

Science-based Tools
03/ 03

Dr. Headerson
‍
Based on the research in Cispa, we develop the tool to check if a website is protected from clickjacking. And shows what is clickjacking and the possible ways to improve the website.

‍Role: Web Design, UI/UX Design
‍
Software: Figma

Visit Site

Founder Collaboration

Supporting founders on their journey from ideas to impact, through design sprints, workshops, and creative problem-solving.

This was a 5-day Design Sprint with the Startup Guarsphere to build a prototype for their product's core function.

I contributed as both facilitator and designer throughout the sprint.

The Persona Workshop with the startup Detesia aimed to identify the target group in a structured way.

I filmed the whole process and created a recap video with explanatory animations.

For the startup InputLab, I created graphics as metaphor to make their idea easier to understand — how to imagine XML data, why generating test XML data matters, and how it helps.

Together with my teammate, I gave a Rapid Prototyping lecture at the university as part of the course “IT Founder’s Lab” for cybersecurity students.

I also created a storyboard and filmed a short video to illustrate the rapid prototyping process.

We guided and supported a research group in building an arcade prototype during a hands-on workshop using woodworking tools and a laser cutter.

I also filmed and photographed the entire process and created a recap video.

I created a 3D wooden map to show the distribution of house-supported startups across various fields of cybersecurity.

Laser cutter, woodworking tools, and paint were used for this project.

Design Sprint with Startup Guardsphere

Persona Workshop with Startup Detesia

Visual Metaphor for Startup InputLab

Lecture & Workshop - Rapid Prototyping

Team-building Workshop: Prototyping

Cybersecurity Startups Map

Product Design

Physical product design is where my joy and passion live: inviting people to touch, feel, listen, and experience.

STACCATO
An Interactive Bench with Sound

Overview
‍
My master's project STACCATO is an interactive, playful bench for public, that offers people different ways to play with sound, while waiting, resting, or playing. Whether they are alone, with friends, family, or even strangers. Everyone can enjoy it and connect with others in a relaxing and playful way.

How does it work
‍
It’s basically a bench that makes “music.”

There are three ways to create sounds with it:

1. Sit on one of the yellow seats.
‍
2. Touch the armrests and connect them with your body or with someone else’s.
‍
3. Swing the side armrest to produce an analog sound of rain.

Design Process
‍- Sketches & Mockups
‍
From my research earlier, I applied the concept of affordance in my design. An affordance is the possibility of an intuitive action on an object. For example, a chair affords sitting, and so does a bench. An armrest affords resting the arm on it.

Based on this idea, I sketched a lot variations, built mockups and also created different scenarios.

Design Process
- Technique
‍
I placed a switch inside the sea to control the sound when someone sits down. With the Sparkfun WAV Trigger, the seat can play sounds when the switch is turned on. Using the SparkFun Instrument Shield, the bench can produce sounds when people touch, hold hands, or kiss. It plays higher or lower notes depending on how much current flows through their bodies.

Design Process
- Prototyping
‍
Based on the technical drawings, the bench was built with a 20 × 40 mm steel profile to keep the two-layer seat structure simple and stable.

It has two armrests. The analog armrest, mounted on a spring, creates rain-like sounds when moved. The digital armrest was sandblasted to improve its surface for electrical conductivity.

To hide the switch inside the seat, I built multiple layers of wood and glued them together.

Finally, all parts were polished, sprayed, and assembled together with the electronic components.

Play it!
‍
Put on your earphones (or not) and see how the bench actually works and sounds. I hope you enjoy it and have fun with it.

STACCATO is a toy for those who are still kids at heart, and for those who once were.