Yushun Zhao

Science Communication

Science is often seen as theoretical and dry. Through storytelling and visual communication it becomes fun and accessible.

#WEB_DESIGN

A Visual Story on Cybersecurity Research
1 / 5

Overview
‍
This scrollytelling website makes cybersecurity research accessible to the public, telling the story of how the “Tamarin Prover” tool was developed from 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

#WEB_DESIGN

A Visual Story on Cybersecurity Research
2 / 5

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.

#WEB_DESIGN

A Visual Story on Cybersecurity Research
3 / 5

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 story, showing how complex the problem can be, to prove every possible path in the maze. In the story, it leads further to collaboration: humans and computers need each other.

#WEB_DESIGN

A Visual Story on Cybersecurity Research
4 / 5

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 a prototype with motion design in Figma.

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

#WEB_DESIGN

A Visual Story on Cybersecurity Research
5 / 5

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

#Demonstrator_Design

Interactive Cybersecurity Demos
1 / 4

Overview

The research festival "CISPA ♥ IGB" in St. Ingbert offered insights into cybersecurity through a diverse program for all ages.

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

a child is playing with rowing machine to crack password

#Demonstrator_Design

Interactive Cybersecurity Demos
2 / 4

Crack the Password

To crack passwords, computers need energy. In this demonstrator, visitors row on a rowing machine, using their own energy to “crack” passwords of different lengths.

Another screen shows how password length and complexity affect how long it takes to break them. Through this experience, visitors understand the importance of creating strong passwords and using a password manager to keep them safe.

A poster showing data on how long it takes to crack a password

#Demonstrator_Design

Interactive Cybersecurity Demos
3 / 4

Secret Paths
‍
Unlike the “brute-force attack” with the rowing machine, this demonstrator shows how a “side-channel attack” can uncover passwords by observing a computer’s behavior, like timing, power use, or tiny sounds.

It introduces people of all ages to the basics of side-channel research, making science fun and helping them overcome fear of technology and math.

#Demonstrator_Design

Interactive Cybersecurity Demos
4 / 4

Digital Pickpocket

NFC (Near Field Communication) is used every day. It lets two devices talk wirelessly when they are very close, like for contactless payments. This demonstrator shows how a hidden reader in a briefcase could steal card data using NFC, and how a blocker card keeps that data safe.

It helps visitors understand how the technology can be misused and how to 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; } }

#software_design

Research Software
Tamarin Prover
1 / 4

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

The original graphic was a static raster graphic, 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

#software_design

Research Software
Tamarin Prover
2 / 4

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

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

The new graphics were also developed further.

#software_design

Research Software
Tamarin Prover
3 / 4

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 a search function, a group function and the ghost box.

#software_design

Research Software
Tamarin Prover
4 / 4

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.

#web_design

Science-based Tools
1 / 3

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

#web_design

Science-based Tools
2 / 3

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

#web_design

Science-based Tools
3 / 3

Dr. Headerson
‍
Based on the research in Cispa, we develop the tool to check if a website is protected from clickjacking. It also shows what clickjacking is 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 Guardsphere to prototype their product’s core function. During the sprint, we used well-structured methods like customer journey mapping, the four-step sketch, “Sticky Decision”, prototyping, and user testing.

I contributed as both facilitator and designer.

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 XML test 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 - user flow, paper wireframe, digital wireframe, low-fi prototype and high-fi prototype.

We guided and supported a research groupsin 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‘s product photo with nominee label

#PRODUCT_DESIGN

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 seat 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.