JohanMouchet

Design System Architect

Johan Mouchet

Hi, I'm Johan

As a Design System Architect with a front-end engineering background, I unite design and engineering to create user-centred experiences. 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.

Skills

  • React10 / 10
  • TypeScript9 / 10
  • GraphQL9 / 10
  • Figma10 / 10
  • Accessibility8 / 10

Tools

Next.jsStorybookCSS-in-JSTailwind CSSViteJestpnpmHeadless CMSREST APIGitRegExLinters & PrettierResponsive designPerformanceSEOWorkshopProduct AnalyticsAgileOpen-sourceAI

Profile

Creative, Critical thinker, Motivated, Knowledge Sharer


Academic Qualifications

SUPINFO, London

Master of Computer Science

SUPINFO, Marseille

Bachelor of Computer Science

Languages

  • English: Bilingual
  • French: Native

Interests

Developing, Designing, Photography, Travelling, Cycling, Running, Fitness, Cooking, Volunteering @YoungCodersAU


Career Experiences

Propps, Melbourne
3 yrs 2 mos

Design System Architect1 yr 10 mos
Early Product Engineer1 yr 4 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.

Propps

Design System

Created a robust design system using Figma and React, prioritising accessibility, and supplying extensive documentation for developers.

Key Achievements
  • 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.
Architecture
FigmaStorybookReactTypeScriptEmotion.jsJest + Testing Library

Propps

Offer Hub

Created a web application for 8.3k Australian real estate agents, managing 36k+ listings from major agencies nationwide.

Key Achievements
  • 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.
Architecture
ViteCSRReactReact RouterApollo GraphQLTypeScriptEmotion.jsJest + Testing LibraryStripedate-fnsTanStack TableFormik + Yup

Propps

Buyer Hub

Developed a web application utilised by more than 17k buyers in Australia, facilitating the processing of over 66k offers.

Learn more
Key Achievements
  • 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.
Architecture
ViteCSRReactReact RouterApollo GraphQLTypeScriptEmotion.jsJest + Testing LibraryFormik + Yup

Propps Card

Profile

Built a single-page digital business card website to facilitate the sharing of contact details and profiles, enhancing online visibility and networking capabilities.

Learn more
Key Achievements
  • 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.
Architecture
Next.jsSSGReactApollo GraphQLTypeScriptEmotion.js

Propps Card

Landing pages

Constructed promotional websites for both Propps and its adjunct product — Propps Card, aimed at marketing and converting users.

Learn more
Key Achievements
  • 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.
Architecture
Next.jsSSGReactTypeScriptEmotion.js

Medtribe, Melbourne

Senior Software Engineer3 mosContract

Medtribe is a startup that aims to streamline event management for healthcare professionals, facilitating collaboration between teachers and students.

Medtribe

Established the groundwork for a web application tailored to manage event creation, planning, ticketing, certifications, and more.

Key Achievements
  • 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.
Architecture
ViteReactTypescriptTailwind CSSReact RouterAxiosdate-fnsJest + Testing LibraryStorybook

Isobar, Melbourne

Front-end developer2 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.

Jetstar

Modernisation, development of new features and upkeep of Jetstar's international website in an Agile environment.

Key Achievements
  • 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.
Architecture
Sitecore CMSWebpackReactReduxFlowJestEnzymeStorybookSass + CSS Modules

Zoos Victoria

CatVR: Safe Cat, Safe Wildlife

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.

Learn more
Key Achievements
  • Developed a community submissible forms with client-side validation.
  • Integrated social media sharing.
  • Awarded
Architecture
ContentfulHandlebars templatingBootstrap 4SassBEM naming schemeWebpackGulp

Klip Studio

Web application dedicated to the sport rights holders industry. Allows editing of live or recorded streams to produce highlights shareable on social media.

Learn more
Key Achievements
  • Developed content tagging, filtering and sorting features.
  • Integrated audience engagement tracking through social media APIs.
  • Integrated social media sharing.
Architecture
ReactSemantic UICreate React AppLessBEM naming scheme

Pearson

Asia

Websites creation related to education for Pearson's launch in three new markets through Asia.

Learn more
Key Achievements
  • Contributed to content authoring.
  • Modified components to suit the market.
  • Developed registration forms.
Architecture
Adobe Experience Manager

AmazeRealise, London

Front-end developer11 mos

Leading digital marketing, technology and commerce consultancy which delivers at the UK, pan-European and global level.

Lexus

v11

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.

Key Achievements
  • 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.
Architecture
SDL Tridion Sites - headless CMSNunjucks templatingMongoDBSassBEMIT CSS architectureBackbone.jsjQueryGruntRequireJSVagrant environmentHeroku CI/CD

Lexus

Safety System Plus

Microsite creation to showcase Lexus' Safety System Plus technology.

Learn more
Key Achievements
  • 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.
Architecture
Identical to Lexus 'v11'Three.js

Navico

Lowrance

Delivery within a short turnaround of a global eCommerce website for a manufacturer of consumer marine electronics.

Learn more
Key Achievement
  • Developed multiple responsive components following AAA accessibility standards.
Architecture
EPIServer CMSHandlebars / Razor templatingSassBEMIT CSS architecturejQueryGulp

Survie Mer Formation, London

Front-end developer, Designer, Marketing strategist6 mosContract

French leader in the training of marine and offshore personnel on safety at sea.

Survie Mer Formation

Redesign, development and marketing strategy aimed at increasing acquisition and conversion rate.

Key Achievements
  • 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
Architecture
Twig templatingMySQL databaseSassBEMIT CSS architecturejQueryGrunt

TMW Unlimited, London

Front-end developer5 mos

Award-winning marketing agency which helps some of the world's most respected brands to strategically develop and implement marketing communications.

Business Banking Insight

Discontinued

Analysis website of business banking providers, supported by the HR Treasury.

Learn more
Key Achievements
  • Developed tables with filtering and sorting capabilities.
  • Created dynamic graphics with amCharts.
  • Integrated social media sharing.
Architecture
AngularJS 2Kickoff framework:GruntSassjQuery

Prince's trust

#partofPT campaign (Over)

Crowdsourced event listing microsite for the Prince's Trust 40th anniversary celebration.

Learn more
Key Achievements
  • Developed multiple UI components.
  • Integrated Hashtagd APIs to create a wall of social media content.
  • Integrated OAuth authentication.
  • Integrated social media sharing.
Architecture
Kickoff framework

Sport Relief

#Skipathon campaign (Over)

Mobile web browser game based on rope skipping.

Learn more
Key Achievements
  • Created canvas and CSS animations: PoC
  • Ensured iOS and Android default browser support.
  • Used Device Orientation & Motion APIs
  • Integrated OAuth authentication.
  • Integrated social media sharing.
  • Reached target of 1 million Skips.
Architecture
ReactKickoff framework

MOVE digital, London

Web designer & developer1 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:


Open-Source

johan-mouchet.com

My portfolio.

  • 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

Fluxgrid

Yet another responsive utility-based CSS grid customisable with Sass.

  • Built with Sass, PostCSS
  • Bundled with Parcel.js
  • Distributed on npm
  • Archived in the Arctic as part of the GitHub Archive Program

Personal Works

When I'm not developing websites I like to take pictures, create infographics, doodle and make short films.

Personal work on unsplash
Personal work on unsplash
Personal work on unsplash
Personal work on unsplash
Personal work on unsplash
Personal work on youtube