Stephan Giesau

References

Electronic Healthcare Record

Project

The electronic healthcare record, German „elektronische Gesundheitsakte“ (eGA) by IBM allows insurants to manage and store their personal health data securely on their smartphones. For the first time, billing data collected by the health insurance is available to the insurant – including consultations, hospitalisations, medications and immunizations.

In cooperation with IBM, the health insurance Techniker Krankenkasse is integrating the eGA into its own mobile app, TK-Safe, and offering it to their insurants.

Contribution

Integration of new eGA features into the TK-Safe Android version
Quality control in preparation for the go-live in March 2019

Tools & Technologies

Android
Kotlin
ReactiveX / RxJava

Compulsory Health Insurance

Project

For a major German health insurance company, the technically and visually outdated website was migrated to a modern, responsive layout – including the basic layout of their global website and customer portal.

Contribution

Technical lead for front-end development
Focal point for communication and synchronization between the insurance departments, IT supplier and design agency
Technical consulting and instructing the external design agency concerning the creation of design assets
Setting up a modern front-end build architecture

Tools & Technologies

HTML 5
CSS 3 / SASS
JavaScript
node.js / npm
jQuery

Lufthansa

Project

For Lufthansa, largest european airline, IBM maintains and developes new features for the internet presences of LH.com and (previously) Miles-and-More.com.

Contribution

Technical concept for the design system used on new profile pages, „Lufthansa ID“
Implementing the major redesign for Miles & More
Validation of change requests and documentation in statements of work

Tools & Technologies

JavaScript / ES6
HTML 5
CSS 3 / SASS
JSP

Projects

diffsite

Project

A tool to visually compare two versions of a website with side-by-side matching, or overlay using opacity (onion), swipe and color blending modes.

Switch between multiple comparison modes and screen sizes
Support for public and local sites (via localhost)
Automatic detection of AMP pages and linked canonical page

Motivation

I developed diffsite to support the preparation of A/B tests with various clients, by detecting visual differences to make test results more meaningful. This tool combines functionality of many other comparison tools in a single app, speeding up QA a lot.

Tools & Technologies

Vanilla JS
JavaScript / ES6
Webpack
CSS3 / SCSS
HTML 5

Prefetchalyzer

Project

A tool that helps you identify the impact of applying prefetch strategies on your web app resources, by analyzing pages across a simulated user's journey (e.g. product page, cart, checkout) on the site. Prefetchalyzer analyzes which critical resources are needed on following pages, and suggests when to prefetch these resources in advance for increased loading speed.

Upload of any user journeys, recorded as HAR format
Automated analysis of resources with various filters
Export of results to conduct performance tests or embed prefetch hints in HTML

Motivation

There are many tools which analyze performance problems on single webpages – but barely one that allows to analyze a complete user journey across multiple pages. This way Prefetchalyzer can find speed optimizations which are not detected in other tools.

Tools & Technologies

Vue.js
TypeScript
Material Design Components
HAR format

Bow Warriors

Project

An open, browser-based multiplayer game. Choose your character and hit others with arrows to earn points for your team!

Realtime gaming, supporting keyboard and touch screen controls
Choose one of six characters

Motivation

I am very interested in graphical projects and game development in general. After reading a tutorial about multiplayer games with Phaser and Socket.IO, I wanted to implement one on my own. Project goal was to explore the features of the Phaser engine, e.g. animated sprites, tilemaps, touch controls and controlling the game lifecycle.

Tools & Technologies

Phaser 3
Socket.IO
TypeScript
node.js / Express Server
Tiled Editor
Game Assets

Filehoster

Project

SG Filehoster is a simple, web-based PHP library to run a filehoster, without the need of a database connection. To keep it simple, Filehoster supports only basic features like sharing files with password protection and expiration dates.

Clean web UI included that allows to upload, access and manage files
Several obfuscation and low security mechanisms, e.g. deep-linking protection
Highly configurable to control the UI and security aspects

Motivation

My projects as a freelance graphic and digital media designer require a fast and simple way to share work results with customers, e.g. flyers and layout files. Data storage should be secure and private, and provide an option to add an expiration date for certain uploads, e.g. drafts.

By implementing this project, I tried and used new concepts and features introduced with PHP version 7+.

Tools & Technologies

PHP 7
Composer
HTML 5
CSS 3 / SASS

ExpenSync

Project

ExpenSync is a digital book of household accounts, allowing to track, categorize and analyze income and expenses. All data is stored and synchronized using Dropbox, making it available on multiple devices.

Accounts, expense categories and UI are customizable
Calculation of monthly and global balance by account
Visualization of expenses with dynamic filtering options

Motivation

Being one of my first web app projects, ExpenSync grew and developed over the years. I included many technologies, which are used in progressive web apps (PWA) today, into this project – e.g. offline storage, Chrome apps and native HTML 5 APIs.

Tools & Technologies

Framework7
Dropbox API
localStorageDB
JavaScript / ES6
HTML 5
CSS 3