Visit website

Corellium

I'm still working at Corellium, and while I've only been there for one year, my time has been packed full of shipping new projects and features.

ReactJavaScriptTypeScriptTailwindStorybookNextStripeSegmentGTMGoogle Analytics

Corellium are pioneers of a unique Arm-based device virtualisation platform, working to advance security and development work on mobile, IoT, and beyond.

Design System

I was one of the first dedicated Frontend Engineering hires brought on board to help the company as it moves to scale up its growth. Our team had a large number of future projects planned, so we quickly identified the need for a comprehensive design system.

Our goals were to create a system to allow us to quickly build new interfaces, introduce a consistent visual style and improve developer experience. We called it Magic 🧙.

It was built out as a Storybook-based design system on React, Next, Typescript, CSS Modules (w/ PostCSS), Tailwind, and deployed for preview on Vercel. This stack formed the base for all future frontend projects.

Corellium.com

Once our design system was ready we moved onto rebuilding the marketing website as our first build test. The majority of the website content is loaded from Prismic.

Trial Request Flow

Next up was the trial request flow which website visitors can fill out to get their hands on Corellium. This has had many iterations and features including Stripe billing integration with 3DS, email validation, automatic geolocation lookup and of course a neat transition animation.

Cloud Administration Platform

Managing our customers was originally an admin-only view built into the app frontend. Another prime candidate for rebuilding with our design system.

From here our team of administrators can review trial requests, send trial invites, manage existing accounts and the status of each of our server deployments.

Corellium App

Outside of our greenfield projects my primary role has been to maintain the frontend of the Corellium app. We started by working in fortnightly sprints, usually prioritising bugs and the features for upcoming releases. Across hundreds of tickets I've implemented new device interaction features, administration features, enterprise features such as whitelabelling, and supported the launch of multiple Android, iPhone and IoT devices.

The codebase is quite large and complex and has some areas for improvement that we're still working hard at to make it on-par with our design system and other frontend applications.

One of the first big cleanup items was converting all stylesheets to make use of design tokens and bring about greater consistency, improved accessibility and introduce a more modern UI. I manually reviewed hundreds of our CSS files and found that we were using 35 shades of gray and were missing consistency in our application of primary and secondary status colours. All colours were identified and converted into a 100's system.

The team is also currently in the process of converting the existing library to functional TypeScript components. We're also taking this opportunity to evolve the design and accessibility of each component.

Analytics

I worked with the product, data and marketing teams to implement tracking across the website, the trial request flow, and the app using GTM, GA and Segment. Segment was used to recieve events via our custom data proxy which was setup to handle some of the data processing logic and make the event tracking a little more solution agnositic.