Case study

Preflight

Empowering engineers through automating web testing, more easily and accurately than ever in weeks not months.
Back to Projects

In Numbers

5x

Happy user flows

40%

Better Conversion rate

3x

Quicker development

10x

Test Coverage in 2 weeks instead of 6 months

10x

Happier Clients

5x

Better consistency

Best UX in QA

Got acquired based on the best UX in QA automation

Overview

Client Attraction (70% more)

With the new designs we got our conversion rate to be +70% more which set us apart as very user friendly automation testing platform

AI Implementation (60% Less Errors)

We implemented a handful of AI features and made it simple to amend tests, which led to a 60% reduction in user errors and test conflicts and a more streamlined testing procedure.

User Testing (7x Better Understanding)

We ran multiple user testing that enabled us to build features that aligns with the clients’ needs

65% Coverage

Almost all of our clients could get 65% test coverage within a short time that vary from 2-4 weeks only instead of 6 months! with the new UX it was much easier to achieve.

Clients Approvals (10x Happier Clients)

We did more than 40 iterations for some pages until we got to the point our clients were extremely happy and one said “Now even my 12 years old child can QA test”

Developers & designers Excitement (5x Better consistency)

Our developers were extremely happy with the design system and our other designers who were on other part of the business were impressed and wanted to adapt to the design system as well.

Got acquired based on the UX! (Best UX in market)

It was one of the best moments of my life when we got acquired by Applitools and they told us this “We have researched many QA platforms and yours by far had the best experience in automation”

Project Brief

Preflight lets you create automated web testing scripts in seconds. You can run it in the cloud and export your test cases to your favorite libraries, like Cypress or Selenium. Preflights worked with clients at Microsoft, Yamaha, School Bytes, and JP Morgan. Preflight has a revolutionary recorder, dynamic data testing, effortless email testing, smooth checkpoint creation, automated PDF testing and API testing.

Problem Statement

While automated QA testing is something that most of the companies need, they find it complex to track and implement especially for non-technical people.

Challenges

UX all over the place

We had a lot of things going in one place

No guidance

No real direction to the user where to start and where it ends

Adding new features

We had so many features we wanted to add but no infrastructure for it

No Design System

The platform was amazing but it wasn’t following any design system, it was built randomly

Design System

I built a design system for Preflight that’s tailored to work according to our goals and need

Some product shots

Here are some part of the design that I made through using the design system

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.