Quantic

— working together since 2015

Making learning faster and easier

  • Website

Work Type

Product Strategy

UX Design

UI Design

Front-End Development

Quality Assurance

Tech Stack

  • Cloudflare

    Cloudflare

    Cloudflare
  • TypeScript

    TypeScript

    TypeScript
  • Webpack

    Webpack

    Webpack
  • Gatsby

    Gatsby

    Gatsby
  • Chromatic

    Chromatic

    Chromatic
  • Jest

    Jest

    Jest
  • GitHub Actions

    GitHub Actions

    GitHub Actions
  • WordPress

    WordPress

    WordPress
  • Sass

    Sass

    Sass
  • Vercel

    Vercel

    Vercel
Full project overview

Work Type

Product Strategy

UX Design

UI Design

Front-End Development

Quality Assurance

Tech Stack

  • Cloudflare

    Cloudflare

    Cloudflare
  • TypeScript

    TypeScript

    TypeScript
  • Webpack

    Webpack

    Webpack
  • Gatsby

    Gatsby

    Gatsby
  • Chromatic

    Chromatic

    Chromatic
  • Jest

    Jest

    Jest
  • GitHub Actions

    GitHub Actions

    GitHub Actions
  • WordPress

    WordPress

    WordPress
  • Sass

    Sass

    Sass
  • Vercel

    Vercel

    Vercel

Background

Our long-lasting relationship with Quantic (formerly known as “Smart.ly”) goes back to 2015. They were looking for a partner to help them achieve their goal — democratize elite business education. And from the initial design proposals to an entire technology revamp, together, we created a Marketing website that represents Quantic’s goal.

Pixelmatters and Quantic close relationship

Challenge

Besides ensuring that Quantic’s website would become more modern and scalable, Pixelmatters had to guarantee that no information would get lost. Both teams defined a new technology stack ready to keep up with those challenges while also crafting the foundations for Quantic's blog. 

quantic marketing website pages

Every detail matters

Pixelmatters started by auditing the existing website to create a new technological strategy — the data model, API implementations, the design legacy, the target personas, etc. After that, we discussed the new requirements, expected outcomes, and timeframe to revamp a one-of-a-kind education website.

Pixelmatters and Quantic continuous and close relationship

Connecting all (design) dots

The audit was also key to understanding what had to be adapted and created on the design scope. We worked on top of the existing look&feel previously made during our close collaboration with Quantic, ensuring each design component would be consistent and scalable to deliver a seamless experience.

After completing the core design pillars on the website and blog, it was time to tackle all the upcoming technical steps.

Quantic Styleguide and Components

A pixel-perfect handoff

Pixelmatters’ Design and Engineering teams had ongoing pair-to-pair work and collaboration to deliver a solid and quality implementation. Engineers had all the information needed to start coding, allowing them to assess realistic estimations. Everyone was involved and aware of the decisions made during the handoff.

Pixelmatters and Quantic Handoff

A new strategic and future-proof direction

Quantic's technical infrastructure had to become faster, more scalable, and flexible while giving its team more autonomy. But how? Pixelmatters looked deeply into the overall website's structure to find the best solution.

It became clear that changing into a headless infrastructure would bring technical and long-term benefits. And both teams aligned the core direction to implement — switching from Ruby on Rails to Gatsby as the core technology while keeping WordPress as a Content Management System.

Research and strategic plan shared by Quantic's and Pixelmatters' teams
Research and strategic plan shared by Quantic's and Pixelmatters' teams.

A workflow that flows

We quickly handled any issues before they happened on Quantic's website by going over the previews environments with Cloudflare Pages. Besides that, Pixelmatters also used Chromatic to deliver consistency in UI components by checking the visual changes before and after the code was implemented. The perfect combo for our development workflow strategy.

Validation steps verified on each pull request
Validation steps verified on each pull request.

Quality no matter what

Speaking of flows, Pixelmatters also defined a solid QA strategy. We performed several test cases in multiple browsers and operating systems with UI and Functional Testing. And Zeplin's Pop Out feature was also crucial to building pixel-perfect pages.

After each component got approved by Quantic's team, we moved on to the Staging environment. The final step was running a smoke testing suite before each deployment to guarantee the quality of the delivery.

Different QA tests ran on Quantic’s website
Different QA tests ran on Quantic’s website.
  • Ori Ratner
    Quotation marks

    Pixelmatters operates in a very open and positive way, making it easy to work with them. They're intentional about their communication, project management, expectations, and implications of our requests.

    Ori Ratner

    Co-Founder and CTO at Quantic

Quantic different mobile screens

The result

From research to strategy and design to a technology revamp, Pixelmatters turned the existing Quantic website into a more modern, robust, and faster solution. It's a world-class digital product representing the meaning of the business school of the future, dedicated to accelerating students’ careers.

Quantic different screens