Jotun

Jotun is one of the world's leading manufacturers of paints and coatings, combining high quality with creativity and innovation. To help with their online presence, DEPT set up an agile retain team, with me being the lead front-end developer. The responsibility of this team was to maintain and build out Jotun's corporate website focussed on the B2B market. As well as the two portals available to their B2B customers, Hullkeeper and myJotun.

HullKeeper provides easy access to the hull optimization services from Jotun. This enables their customers to cut carbon emissions, protect biodiversity and preserve fuel while keeping their ships hull in optimal condition. MyJotun provides a easy way to find and order products including technical data sheets for all available products. This is complemented by a knowledge base covering a wide range of subjects from paint terminology, to explaining how different power plants operate.

My first responsibility was to improve their SEO, following an audit done just before we took on the website. This covered things like a proper hierarchy of titles present and better handling of the internationalisation and localisation of pages. Following this I upgraded the tech stack consisting of a collection of Razor templates, C# infused HTML, and SPA's build in vanilla javascript. While working on this I noticed the inconsistencies between the B2C and B2B sites, both technically and design wise.

My proposed solution was to create a shared component library that would serve a the single source of truth to work from. I then setup the library using React, Typescript, TailwindCSS, Storybook, Percy and Vitest. With ESLint, Prettier, Webpack and Plop as supporting tools. The library is then managed via Azure Devops and served to the B2B and B2C sites as a Git Submodule.

Ebay Copy tool

Ebay asked DEPT to create a leading customer experience, executing ideas, concepts and designs that would engage their audiences worldwide. eBay wanted campaigns that were consistently relevant to each of their users. For this, DEPT created Creative Automation tools which enables Ebay to create multiple cross-channel communications at the click of a button.

The Copy tool was created by the German DEPT team allowing Ebay to preview how a piece of copy would look in different scenario's. Over time, some of requirements for the tool changed, leading to the decision to revise the tool. I was asked to collaborate with fellow DEPTsters from London and Berlin, with me responsible for the front-end and the deployment process.

To improve the deployment process the project was moved into Git, as well as setting up node/yarn for building via Parcel and deploying to AWS & S3. The next step was to improve the existing codebase, as I noticed that a similar setup was reused for every preview. The final improvement made was better feedback about the content, checking the amount of characters, the dimensions of the content in regards to the other content and available space.

I managed to refactor the code reducing it by 70%, even after adding the new previews and other improvements. Both the client and the internal team were impressed with my contributions and the end result.

London Marathon Events

As the organisation behind several athletic events in the London area, LME wanted to have a consistent base identity between the differently branded event websites. For this they asked DEPT to build out their websites. These sites are powered by Sitecore and build with a front-end stack composed of CSS using Shared Components and React using Hooks and Prop Types.

My responsibilities within the team were twofold: Providing support for the existing sites, estimating new work and coaching the junior team members. The other being the lead front-end developer for two new websites, London Marathon Foundation, and the user portal used to track (your) upcoming events.

One of the challenges I faced while building the foundation site was the lack of responsive designs and different states like hovering. To resolve this I've worked closely with the QA team having regular catchups and working iterative. By designing in code I covered the missing designs and additionally add micro animations improving the user experience.

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.

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.

Gameboy Pokémon Trainer

Inspired by "Twitch plays pokémon", I've build a Proof of concept for ChatGpt playing Pokémon. The tool uses a Javascript based Gameboy emulator, which is then captured by a Screen Capture API. At intervals, it will make a screenshot of the recording, which in turn is processed via Tesseract to identify text in the image. Based on this text, the state of the game is determined, like walking around or being in a battle. It then creates a prompt for OpenAI to ask what the next action should be, the response gets turned into a series of button inputs for the emulator.

The emulator can be controlled via keyboard inputs, as well as using the mouse by clicking on the buttons of the handheld console around the emulator. The console is custom made completely using CSS, and it's design is inspired by the Gameboy Advance and Nintendo Gamecube. The rest of the webpage is designed based on retro games and the buttons are modelled after the type badges of the Pokémon game being emulated. Lastly, I've created a logo for this project combining the ChatGPT logo with a Pokéball.

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.