Portfolio
Web Development | Product Design & UX | Data Visualization | Data Engineering | Tech Management | OSINT Tooling | Geocomputation
Telegram: Chronology of a Radicalization
Concept, UX design, and implementation of a multi-chapter interactive storytelling report. Built with Svelte, Astro and Notion API (CMS). Visual design by https://www.parat.cc/
![Screenshot](/_astro/cemas-telegram-video.DTT5kvMp_Zph6YO.webp)
Website DataViz Facilitation UX Design Scrollytelling
Academic Freedom Index
Concept, design, and implementation of a semi-static, self-updating website with https://astro.build/, Svelte, and D3. The Hero is an interactive D3-based globe that displays the current Index results in a tooltip. A modal renders time-series data (1900-2022) for 6 metrics. Data is fetched on-demand. Charts can be exported as hi-res screenshots.
![Screenshot](/_astro/academic-freedom-index.C1LzG-Yn_Z183m96.webp)
Website DataViz Facilitation UX Design
Afrozensus Data Explorer
Concept, design, and implementation of a feature-rich full-stack Web App for the Afrozensus survey. Users can explore survey results and group/facet single survey items with socio-demographic variables. Built with SvelteKit, Supabase and a D3 flavour. Data is queried from a Postgres DB. Data engineering by https://twitter.com/lisa_reiber.
![Screenshot](/_astro/afrozensus-explorer.AVf3jaDX_1bRevl.webp)
Website Fullstack DataViz App Facilitation UX Design
Follow the Money - Crisis Spending Report
6 double-paged infographics composed of 78 charts; 12 standalone charts of various types; produced with R & Affinity Designer
![Screenshot](/_astro/follow-the-money-dataviz.B4VqxeEz_Z1hhEph.webp)
DataViz Mapping Print
Democratic Innovations to Youth Work
Multi-language website built with Svelte, Astro and Notion API (CMS).
![Screenshot](/_astro/diyw-activity.QscexWV2_csCgD.webp)
Website Facilitation UX Design
Network Analysis App
Design and development of an interactive Svelte-based standalone module, integrated into a legacy (non-JS) application. Dynamically renders 500+ nodes and 1K+ edges. Receives and sends events to interact with the parent application.
![Screenshot](/_astro/svelte-sna-network-graph.-hh4Ctd3_2sUMGy.webp)
App DataViz UX Design
Der Spiegel: DAX Stock Game
Implementation of a Svelte-based interactive feature to explore historical DAX stock market data.
![Screenshot](/_astro/spiegel-boersenspiel.Bdti9ZYm_Z1ntHJi.webp)
Feature DataViz
Der Spiegel: Bar Chart Race
Implementation of a Svelte-based feature which combines scrollytelling with a bar chart race (bars grow and shrink based on scroll progress and swap positions depending on their rank).
![Screenshot](/_astro/spiegel-taxi-race.oXkfJTOz_Z2tKeRi.webp)
Feature
Map for FES Afghanistan
Leaflet map which displays region-specific sections of a written report in a multi-tab pop-up.
![Screenshot](/_astro/fes-afghanistan-map.BGXlOsxu_Z6onAC.webp)
Feature Mapping UX Design
Afrozensus Website
Design and development of the official website of the Afrozensus project and the 2020 Report. The report is presented with a 2-part scrollytelling feature. SSR, built with SvelteKit & Svelte Scroller.
![Screenshot](/_astro/afrozensus.9dBd-RBF_qhQMJ.webp)
Website Scrollytelling Facilitation UX Design
Berlin-O-Mat: Berlin 2021 Elections
Joint web project with Tagesspiegel and Humboldt-Universität zu Berlin for the 2021 State-level (Berlin) and local-level (boroughs) election. Hybrid voting advice application with a two-layered data model.
![Screenshot](/_astro/wahlomat-berlin-o-mat.otCGP0Bf_Z1oIyh8.webp)
Feature App
Follow The Money - Web Feature
Compagnon website for a research report. Scrollytelling + animated SVGs to narrate the executive summary.
![Screenshot](/_astro/follow-the-money-scrolly.BUa9Uadu_Ta0F7.webp)
Website DataViz Scrollytelling Mapping UX Design
Militias in Afghanistan - Case Study Maps & Charts
Code-generated multi-layered case study maps based on UN HDX geodata and DIY hillshaded elevation data (rayshader & NASA SRTM). A single parameterized R template that was rendered for 5 case study maps.
![Screenshot](/_astro/gppi_alp.Bff1nhkC_RYqms.webp)
Infographic Mapping DataViz
Chemical Weapons - Web Project
My first end-to-end product journey (concept, design, implementation, data pre-processing). Feature-rich static website for a multi-chapter essay & an interactive data portal. Months of intense design and development work. Features: map-based scrollytelling, case study components, timeline, audio snippets.
![Screenshot](/_astro/cw-website-storytelling.hgDVs1Om_20lOzG.webp)
Website Scrollytelling Facilitation UX Design
Chemical Weapons - Data Portal
Interactive map & data table view with dynamic filtering, incident clustering, and incident cards. Made with leaflet, crossfilter, dataTables, and a bit of D3. The data is auto-fed via a CI/CD-based end-to-end data pipeline.
![Screenshot](/_astro/cw-website-data-portal.gWpKjE5__Z9B93c.webp)
Website App DataViz Mapping UX Design
Nowhere to Hide Report
Three case study maps, highlighting changes in territorial control during selected campaigns of chemical attacks. Two styleguide-compliant bicolor schemes represent gains/losses by rebels and state/regime actors. A full-page illustration outlines the deadly path of a helicopter regiment.
![Screenshot](/_astro/map_syria_cases.hiEZaW-j_Z6D53b.webp)
Mapping DataViz Print
Data Engineering & CI/CD - Workshop
Introduction to data-centric DevOps & CI/CD. Hands-on workshop on implementing a ETL data pipeline with R & GitLab CI/CD.
![Screenshot](/_astro/data-engineering-101.jCOemsxC_aR8LJ.webp)
Workshop
Design Thinking / Product Vision / Storytelling Sprints
I have successfully facilitated Design Thinking and Product Vision workshops with participants from academia, NGOs and policy. Together, we were able to make the abstract become manifest and actionable.
![Screenshot](/_astro/designthinking.8tuu3PkZ_Z1aBwx7.webp)
Workshop
Information Security 101 - Talk/Workshop
360° introduction to individual and organizational risks and mitigation strategies for not-for-profit organisations.
![Screenshot](/_astro/information-security-101.DlstHbBR_Z15JnA1.webp)
Workshop
Human Centred Design & Design Processes - Talk
Introduction to the "Why" & "How" of designing for usability. Focus is on understanding and feasibility from a non-profit persepctive.
![Screenshot](/_astro/human-centred-design-101.BiTNd3II_Nxj9D.webp)
Workshop
Krieg vor der Haustür
Colored regional map for the book's front matter, picking up the hue from the book's cover theme. Three tile-sized maps for the back matter, zooming in on single states and subregions.
![Screenshot](/_astro/map_mena.BnDnB3j8_Znej0z.webp)
Mapping Print
China's Silk Road
A full-paged b/w regional map of Asia, including the challenge of emphasizing four subregions.
![Screenshot](/_astro/map_asia.C9UFtIbc_Z1qF7Uv.webp)
Print Mapping
Urban Spaces
Conception, technical project coordination, and content implementation of an online-first research paper design, complemented by a regular print product. This pilot involved a team of 30 people, and took more than one year from the first workshop to launch.
![Screenshot](/_astro/urban_spaces.DzuwT9WD_ZxMLMb.webp)
Project Management