#Skills
- 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.
Skills
Tools
Next.jsStorybookCSS-in-JSTailwind CSSViteJestpnpmHeadless CMSREST APIGitRegExLinters & PrettierResponsive designPerformanceSEOWorkshopProduct AnalyticsAgileOpen-sourceAI
Profile
Creative, Critical thinker, Motivated, Knowledge Sharer
Academic Qualifications
Languages
- English: Bilingual
- French: Native
Interests
Developing, Designing, Photography, Travelling, Cycling, Running, Fitness, Cooking, Volunteering @YoungCodersAU
Social Media
Career Experiences 9 yrs 3 mos
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.
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
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
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
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
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 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.
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 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.
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
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
- ★ MADC 2018: Best PR experience
- ★ One Show Awards shortlist: Media Relations
Architecture
ContentfulHandlebars templatingBootstrap 4SassBEM naming schemeWebpackGulp
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
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.
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
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
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 strategist
– (6 mos) / Contractor
French leader in the training of marine and offshore personnel on safety at sea.
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 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.
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
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
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 & 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:
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.
