- React10 / 10
- TypeScript9 / 10
- GraphQL9 / 10
- Figma10 / 10
- Accessibility8 / 10
Hi, I'm Johan
As a Design System Architect with a front-end engineering background, I unite design and engineering to create user-centric products. I focus on building and maintaining unified design systems, ensuring efficiency and consistency in product development. Being a creatively driven critical thinker, I'm passionate about developing ideas that captivate and inspire.
Creative, Critical thinker, Motivated, Knowledge Sharer
- English: Bilingual
- French: Native
Developing, Designing, Photography, Travelling, Cycling, Running, Fitness, Cooking, Volunteering @YoungCodersAU
Propps, Melbourne — Design System Architect
– Present (3 yrs 2 mos)
Propps is on a mission to improve how we buy and sell real estate. As the second product engineer turned design system architect, I earned recognition for a customer-focused mindset. In a team of under 20, I contributed to developing a product for 8k agents and 17k buyers, playing a role in the start-up's $40 million valuation.
Created a robust design system using Figma and React, prioritising accessibility, and supplying extensive documentation for developers.
- Revamped a UI library into a Figma & React design system with 60+ themeable components, implementing Storybook for dynamic documentation.
- Developed and maintained React components with TypeScript and Emotion.js. Deployed a versioned library supporting 10 internal packages.
- Modernised legacy Figma components with Auto layout and semantic styles, standardising naming conventions and providing documentation.
- Implemented testing, linting, and type-checking for quality assurance.
- Ensured accessibility of the components, promoting keyboard navigation, semantic correctness, and contrast ratio compliance.
- Gave talks on Design Systems and Accessibility, and educated the team on design principles.
Created a web application for 8.3k Australian real estate agents, managing 36k+ listings from major agencies nationwide.
- Constructed numerous role-specific routes, GraphQL APIs, sortable and filterable tables, and validated forms.
- Led the gathering, categorisation, and prioritisation of customer feedback and feature requests.
- Conducted in-depth user behavior analysis by setting-up events and graphs using Amplitude.
- Facilitated a workshop that resulted in the adoption of a modern layout, optimizing space utilization, and enhancing navigation.
- Implemented numerous features utilising continuous delivery and feature flags through Split.io.
- Introduced Skeleton loading to optimise perceived load speed and enhance engagement.
Developed a web application utilised by more than 17k buyers in Australia, facilitating the processing of over 66k offers.
- Built a multi-step offer submission form achieving an 80% conversion rate and a 72% satisfaction rate.
- Created an alternative, streamlined, version achieving a 117% faster completion time with a comparable conversion rate.
- Implemented Formik and Yup for complex form validation and formatted the data for seamless submission to an API.
- Created a timeline feature for conveying property updates to buyers, initiated by agents or automated events.
- Implemented a countdown timer to impart a sense of urgency, boosting buyer engagement and offer submissions.
- Created a transparency-enhancing feature that unveils the buyer's offer position in relation to the competition.
Built a single-page digital business card website to facilitate the sharing of contact details and profiles, enhancing online visibility and networking capabilities.
- Built the statically generated pages with Next.js to optimize performance and SEO, achieving a 100% Lighthouse score in both categories.
- Created a dynamically generated og:image that displays the user's details when shared on social platforms.
- Enhanced SEO by integrating structured data markup, establishing canonical URLs, ensuring proper heading hierarchy and more.
- Designed and built flexible templates for personalised aesthetics, enabling users to customise backgrounds while ensuring readability for a pleasing experience.
- Employed Statsig for A/B testing to refine and optimise design and user experience.
Constructed promotional websites for both Propps and its adjunct product — Propps Card, aimed at marketing and converting users.
- Designed and built numerous landing pages, with select ones achieving a notable 23% conversion rate and playing a role in the acquisition of the 45.6K mobile app users.
- Utilised Next.js to create high-performance, SEO-friendly pages through dynamic static generation.
- Incorporated dynamic content by defining schemas and querying data from Hygraph, a GraphQL CMS.
- Engineered a sign-up flow that seamlessly guides users through an onboarding process.
- Designed captivating hero sections with animated backgrounds.
- Built a modal for displaying a QR code linking to the app store, offering the option to share the link to a smartphone through native share or email.
Medtribe, Melbourne — Senior Software Engineer
– (3 mos) / Contractor
Medtribe is a startup that aims to streamline event management for healthcare professionals, facilitating collaboration between teachers and students.
Established the groundwork for a web application tailored to manage event creation, planning, ticketing, certifications, and more.
- Translated TailwindUI Figma components into functional React components using Tailwind CSS.
- Developed interactive components using Headless UI to guarantee accessibility
- Utilized Axios for the retrieval and submission of data to REST APIs.
- Developed dynamic forms with Formik and Yup, adjusting based on user input.
- Established an advanced routing infrastructure utilizing React Router.
- Introduced Storybook for efficient component development, deploying it with Chromatic for streamlined testing and collaboration.
Isobar, Melbourne — Front-end developer
– (2 yrs 9 mos)
Global agency that delivers digital transformation powered by creativity, who believe in Ideas Without Limits, pushing the boundaries of technology and creativity.
Modernisation, development of new features and upkeep of Jetstar's international website in an Agile environment.
- Took part in the migration of the Flight Search experience to React & Redux for faster and extensive results: ⏶4.7% conversion on the Cheap Flights pages.
- Contributed to creating a landing page to promote Jetstar Credit Cards: surpassed the conversion target by 230% in the first month of launch.
- Integrated a responsive utility-based Sass grid I built and open-sourced: Fluxgrid.
- Advocated for performance tracking and optimisations: slowed down the FMP trend, ⏷~9.5% TTI and ⏷~15% bundle size. Set-up dashboards for tracking performance using SpeedCurve.
Joint RSPCA campaign website to help cat owners give their pet the safest and happiest life while ensuring they have no link to loss of wildlife.
Web application dedicated to the sport rights holders industry. Allows editing of live or recorded streams to produce highlights shareable on social media.
- Developed content tagging, filtering and sorting features.
- Integrated audience engagement tracking through social media APIs.
- Integrated social media sharing.
AmazeRealise, London — Front-end developer
– (11 mos)
Leading digital marketing, technology and commerce consultancy which delivers at the UK, pan-European and global level.
Website redesign to embody the new brand direction focused on a premium and lifestyle experience. Deployed into 35 countries of the European market and translated into 27 languages.
- Developed multiple responsive components following AAA accessibility standard.
- Contributed to developing a module that uses the browser Geolocation and Google Maps' APIs to locate the nearest Lexus dealer.
- Built a hero carousel with background video using Slick.
- Contributed to the parallax "Experience" component.
Microsite creation to showcase Lexus' Safety System Plus technology.
- Integrated fullPage.js for a single-page scrolling design.
- Created advanced multi layers CSS animations.
- Developed with a responsive design / device orientation aware approach.
- Optimised performances.
Survie Mer Formation, London — Front-end developer, Designer, Marketing strategist
– (6 mos) / Contractor
French leader in the training of marine and offshore personnel on safety at sea.
- Designed a Growth Hacking strategy following the AARRR model: ⏶12.6% conversion.
- Single-handedly architected and built the front-end.
- Refreshed the UI with a new brand identity, responsive design and cross-browser compatibility.
- Revamped the UX with a focus on user conversion, web performance and accessibility.
- Optimised SEO with the use of Open Graph protocol and JSON-LD microdata.
- Created a tailored AdWords campaign: ⏶10.1% Clics, ⏷6.6% CPC YoY.
- Implemented Google Analytics custom events and goals tracking.
- Created branded transactional email with HEML
TMW Unlimited, London — Front-end developer
– (5 mos)
Award-winning marketing agency which helps some of the world's most respected brands to strategically develop and implement marketing communications.
Analysis website of business banking providers, supported by the HR Treasury.
- Developed tables with filtering and sorting capabilities.
- Created dynamic graphics with amCharts.
- Integrated social media sharing.
Crowdsourced event listing microsite for the Prince's Trust 40th anniversary celebration.
- Developed multiple UI components.
- Integrated Hashtagd APIs to create a wall of social media content.
- Integrated OAuth authentication.
- Integrated social media sharing.
Mobile web browser game based on rope skipping.
MOVE digital, London — Web designer & developer
– (1 yr 3 mos)
Independent web marketing agency focused on Growth Hacking.
Here are a few of the websites I've designed and built using WordPress:
- Bootstrapped with Next.js
- Pulling data from Prismic with GraphQL
- Maintaining a design system with Storybook, deployed with Chromatic
- Type-checked with TypeScript
- Unit and snapshot tested with Jest and React Testing Library
- Using CSS Modules, Sass and post-processing
- Linted with ESlint and Stylelint; formatted with Prettier; enforced by Husky and lint-staged
- Deployed using SSG on Netlify
When I'm not developing websites I like to take pictures, create infographics, doodle and make short films.