Bryntum

Bryntum—created in 2009 with its HeadQuarters in Sweden—produces web components perfect for project management and resource scheduling.

Their web components include Gantt charts, Calendars, Schedulers, Kanbans, and many more easily identifiable elements that fit any web app, whether it’s based on JS, Angular, React, or Vue.

Numerous worldwide-known brands, such as Netflix, Apple, Samsung, BMW, and Shell, have previously worked with Bryntum and are part of their over 5,000-strong customer base.

Clients Challenge

Bryntum’s main issues were directly related to its website. They found it a bit outdated and needed improvement in performance and user intuitiveness.

MAIN PROJECT’S OBJECTIVES 

So the Client specified what they needed, and that was to redesign their website to be:

• More modern-looking
• Built with little to no JavaScript
• Built on a lightweight theme
• Performing well

After initial talks with our Client, we planned to make this happen. But first – we had to work on redesigning Bryntum’s homepage to make sure we were on the same page with the idea for the whole website.

Before we discuss the three stages of our project in detail and show you the before-and-after results, let’s first get an overview of the tech and design work done.

Technology and Design

`Tech

From the tech side, the homepage and the rest of the website were redesigned using HTML, CSS, and the WordPress CMS.

Of course, the main challenge was to avoid using JavaScript throughout the process, which proved difficult in some areas. However, we’ve successfully redesigned Bryntum’s website with trace amounts of JS. The only times JS was used were when it was absolutely necessary.

But what’s most interesting in this case is that we’ve decided to build a block-based website using ACF (the Advanced Custom Fields plugin) to build Gutenberg blocks. The blocks created are reusable, which is, of course, a win-win situation for us all!

Design

Our design team had a full schedule working on this project, as one of its main objectives was to redesign the whole website and make it look more modern and user-friendly.

The Client had a preferred theme on which we’ve based our efforts. To make the website still feel like Bryntum, we kept its blue tones but also upgraded the colorway, adding some depth and making it more unique and interesting. We’ve added some purple to the combination and made the website’s background brighter.

We also focused our efforts on Information Architecture (IA) to help end users find relevant information quickly and easily. There were some problems with bryntum.com’s intuitiveness, which often led to clients purchasing the wrong subscription plan.

Therefore, we had to reorganize some of the information on the website to create an easier-to-navigate system. Our work in this area is especially visible in the new Mega Menu and the redesigned Pricing page.

Final Result

Performance Boost

While working on this project, we focused on improving the website’s performance, which we did, taking it from 87 to 100!

The website’s performance was mainly improved by fixing the images, namely adjusting their size—height and width—to be appropriate for that website.

Moreover, we’ve converted all images to WebP, currently Google’s favorite format, which gives the site an additional boost in terms of its positioning in the search results.

Little To No JavaScript

The Client often underlined that they want their website built with little to no JS, so we only used JS when absolutely necessary.

We sometimes had to put our thinking hats on, e.g., when working on the website’s animations. All animations on Bryntum’s website are built without using JS, but it was quite a challenge to figure out how to do it – ultimately, we’ve used CSS to create them.

In turn, one case where we had to use some JavaScript was to fix the website’s scrolling issue in the instance of sliders.

However, we can definitely mark that objective as completed since most of the website was built without JavaScript.

Lightweight Theme

Our Client specified that they prefer a lightweight theme for the renewed Bryntum website. One they found the most inspiring was https://saasbox-webflow-html-website-template.webflow.io/. 

The selected theme seemed perfect for Bryntum since they precisely wanted a modern-looking, light, and user-friendly option. So, we adjusted the colors, fonts, and designs to fit Bryntum’s branding.

Achievements Unlocked