Stork

Stork, is a value-driven global provider of fully integrated operations, maintenance, modifications and asset integrity solutions. Together with 0to9 I've maintained and updated the corporate website network of Stork. One of the biggest additions being the Cooperheat Equipment shop.

This webshop offers a full range of specialised heat treatment equipment, compact heat treatment units, data recorders, panel burners, consumables, spares and accessories. Beside the development of the webshop I've designed and developed the interface for ordering custom products.

Yanmar Power Up

Yanmar asked 0to9 to create a campaign promoting two new engines famelies both offline and online. The core concept of the campaign was power up, to accompany this idea we took the base shape of the Yanmar logo, flip it around to turn it into an upwards pointing arrow, resembling the arrow displays from racing tracks.

For the campaign website we took the concept one step further by starting at the bottom of the page, as you scroll upwards you'll pass the new engines and gain power along the way. By applying calculus within SASS I was able to make the page responsive while still preserving the arrow shaped content blocks.

Bites We Love

Starting of as an existing B2C webshop based on Prestashop, Bites We Love offered a subscription to weekly packages of nuts similar to services as HelloFresh. Trying to expand their services to the B2B market, my team at 0to9 was tasked with the migration of the webshop to a Wordpress and Woocommerce environment. Beside the migration we've redesigned the webshop and created a separate site for the B2B customers.

After creating the new front end of the webshop we've optimised the handling of the orders for the site administrators. Ranging from small quality of life improvements like custom confirmation mails and the option to specify a preferred shipping date, to the ability to send invoices directly from Wordpress and linking the system with the accounting and shipping software of third parties.

NVA - Dutch Association for Anaesthesiology

After creating the website for the NVA 0to9 was asked to create a mobile application. With the scrum team we decided to build the application using React Native. This allowed us to access native features of the device while developing platform independent. The application fetches its data from the NVA website, allowing the client to manage the app content in the CMS.

The main features of the app are a newsfeed, a database of common anaesthetics and a tool providing advise based on a diagnosis. I've created the interface of the tool, based upon the treatment guideline of the NVA and consultations with several anaesthesiologists.

Study Detective

The Study Detective is a tool to help highschool students with choosing a college or university. The student is guided through the process of finding the right course of study by a combination of game design and storytelling.

The applicatie divides the process into four stages: Oriëntation, Immersion, Filtering en Deciding. As part of my dissertation the Study Detective was based upon the research on the best way to guide students.

Pixel Symphony

As light and sound are both comprised of waves, is there a way to map one unto the other, so that the blind can hear an image or the deaf can see a sound? While thinking about this, I started with an assessment to create a web application by combining different javascript API's. After gaining experience by tutoring several classmates, I decided to complete the assessment by creating my own API instead of just combining them.

The API called Pixel Symphony takes an image and converts it into piano music. The music score is based upon the color values of the pixels within the image. By combining this with the (pre OAuth 2.0) API of Instagram it becomes possible to listen to the music hidden in you own pictures.

Logo collection

Neighbourhood

When Residently shifted its focus to partner up with bigger institutionalised property managers, the load on its operations team grew exponentially. To accommodate for these changes, my team was asked to spearhead the development of Residently's Portfolio Management System called Neighbourhood. This product allowed the partners to manage their properties, payment details and contracts without intervention from Residently.

When creating new endpoints, we added extra authorisation and authentication logic to make sure partners can only access their own portfolios. My main focus after this setup was to bring the product to life, by setting up dynamic inputs, form validation and parts of the component library. This library was maintained through a combination of Storybook and Jest, to guarantee both the quality and the overall consistency of the platform.

Mobile App

Having previous experience with app development Residently asked me to join a greenfield team to develop the mobile resident application. The tech stack we landed on was React Native and Redux, and 3rd party integrations like Firebase, Auth0 and Zendesk. The activity/progress feed, passwordless login and the notification system are some of the features I developed.

The app gives residents the option to manage their home on the go. I does this through the following core features: They can request services like painting and cleaning as well as make their home available on Airbnb when on holiday. Residents are notified of upcoming payments and can easily set up direct debit if preferred. Maintenance requests can be made directly to the property manager.

Switchboard

The initial chat system in the Residently app used a SDK from Zendesk to facilitate communication between residents and property managers. But soon after we discovered that this solution was very limited both for customisation as well as scalability. As more traditional managers preferred to email the residents, unwilling to use Zendesk.

As a solution we created a system that takes in an email and outputs a chat message, and vice versa. These emails get processed through SendGrid and stored in a database, with attachments being stored on S3 (AWS). My responsibility was to handle this conversion between (HTML) emails and Markdown messages that would be shown to residents in the app.

To achieve this I had to create an API comprised of several services and sanitisers to clean and structure the message. Plain text emails just needed to have their urls converted into clickable links. HTML emails however, required a more thorough approach. To get an impression of how complex an email can get, click here.

First unwanted tags, like stylesheets and presentational tables, and things like trailing whitespace had to be removed. The resulting HTML was then converted into Markdown. On the app side, the Markdown had to be rendered using a custom style guide which I both designed and implemented.

The biggest complexity however was handling the wide variety of signatures partners were using in their emails. This content, including images, would end up in the chat message making them look very cluttered. For this I created a library of Regular expressions to find both generic and partner specific text patterns to remove the signatures from the messages. Similar rules were used to find embedded images in the signatures.

In addition to this library, I build a test and logging features to warrant the effectiveness of the system. The testing system takes a collection of example emails and shows the parsed result on a webpage as well as comparing it to a pre-generated version using Rspec. For the logging I have created an integration with Slack that logs incoming messages that don't match any of the rules while still mentioning a partner organisation.

Spike Features

These projects were made in the time Residently provided to work on personal development and ideas, called Spike days. As I worked on these, I developed a personal mission to enrich the experience for residents by better using all available data.

For example, I would take floor plan images and convent them into interactive svgs. These could then be used to request services like flooring. By selecting a room and a floor type, residents can preview the result as well as receive an estimate based on the area.

Property search
Knowledge about the resident's property could also be used to help them find a compatible new home if they wish to move out. While working on this feature the app lacked the option to browse available properties, so this was a good opportunity for me to both add this and enrich it. The properties have small labels indicating the difference in price, area, etc. relative to the residents current properties.

Moving AI
With services being one of the main features of the app, I decided to look further than just using existing data. Instead I focused on ways to use Google's Vision AI and user created content to make the process of moving house easier. When requesting a quote, most moving companies require an inventory list. When a resident takes a picture, the app will use object detection to generate this list for them.