QPS. A SAAB Company

QPS is one of the world's largest Maritime Software Developers, with a suite of applications that offers one of the most complete geomatics software solutions in the industry.

With offices in the US, Canada, and the Netherlands, we helped QPS find a shared North Star.

Read more+

When we started working with QPS, they voiced the need for a singular brand vision that could stand the test of time and trends.

Additionally, with a recent significant integration of another maritime software developer, the new, now bigger QPS needed a common, shared vision across all teams. For six months, we hosted many branding and design workshops among employees and management.

The results speak for themselves. With a uniform focus across all offices and teams, we were able to help create a new brand, build a design system called Q-System (in which we also included guidelines for the future design of QPS's products), unify the Q-Suite (including the new name), and as presented here, developed the complete marketing site that now also includes the support center.

Services
UX/UI Design
Prototyping
Creative Direction
Branding
A bottle displaying the Q from the QPS logo
The Q-marquee printed on a bottle.

Challenges.

During the process we created a few main questions to help us structure our information, and keep the user & business needs in mind.

How might we create a unified software suite that delivers a modern brand experience and appeals to a younger audience?
1.
How might we merge the Support pages with the new website and reduce stress on the support team?
2.
How might we utilize design thinking methods and workshops to create a shared North Star that aligns the team's vision?
3.
How might we promote a new subscription-based platform that includes trial downloads, subscriptions (both unique in this sector), and the ability to download the full Q-Suite right on the website?
4.
How might we create a contemporary design to set QPS apart from its competitors in an otherwise visually outdated sector?
Bonus
Explore ↓
The Webflow prototype I created the help our developers visualize the preloader and homepage load animation.
QPS homepage scroll through.

Introducing the Q-Suite

One of the main reasons QPS contacted Naam was to improve cohesion between the applications and to help find a shared 'North Star' to enhance decision-making across their intercontinental teams.

Through multiple strategic sessions, design thinking methods, workshops, and marketing meetings, it became clear that QPS didn't just offer a set of different products. It was a full suite that could do everything maritime companies need, from guiding and setting routes to visualizing the sea floor with complicated 3d texturing (the results of this we can often see on Discovery Channel).

In short, they offer a one-stop solution for maritime companies to get to know, understand and visualize any body of water. Our main focus during this project was to bring all their solutions back together into one cohesive suite, one language, and one brand that solidifies QPS’s position as leader. The Q-Suite was born.

Explore ↓
A tablet and phone on a grey background showing the QPS Q-suite applications
The Q-Suite.
A person holding a phone with the QPS loading page on it
Pre-loader on mobile.
Full page screenshot of the QPS homepage
Full-page screenshot of the Homepage.

Product Pages

By introducing the Q-Suite name, we brought all applications together under one umbrella. However, on a UX and visual level, it will take time to update all respective product interfaces according to the new design system. So in the meantimeproduct icons were one of the first things we needed to redesign to make it feel like the products belonged to one suite.

Additionally, we decided to build a library of QPS-styled devices that could present the various product interfaces similarly and make the different apps feel cohesive without having to redesign all the interfaces. As a result, the QPS-styled devices solved many marketing challenges and gave a coherent look to all the applications in the suite.

On QPS's previous website, none of its products were highlighted or presented. As a result, a lot of visitors were confused about QPS's services. So we made sure the new website gives every software package the room to present its features, main benefits, supported workshops, and news.

Explore ↓
Screenshot of the mobile product detail page
Screenshot of the mobile Menu of QPS
Screenshot of a mobile page section with unique selling point cards on it
Q-Suite responsive design pages.
A Menu module that appears on hover on the QPS website
Menu product pop-up.
Five icons of the new QPS Q-Suite on a grey background
Q-Suite icons.
A full-page screenshot composition of a few QPS product detail pages.
Composition of Q-Suite product pages.

The Q-System

The Q-System is QPS's brand-new design system. It includes colors and typography, guidelines, the philosophy behind the design decisions, app interface elements, design patterns, and much more. The ultimate goal is to integrate the Q-System across the entire Q-Suite, and all QPS's marketing efforts and apps.

Even though the design system focuses on marketing and product design, which are inherently two different applications, they each have their respective guidelines within this one system. Marketing design elements generally have a more friendly aesthetic, with more lenient procedures for more accessible applications and room for experimentation. In contrast, the product design guidelines are more rigid, user-focused, and tailored for professional use in a maritime setting.  

Since its launch, the Q-System has proven its dynamic qualities with the new website (marketing) and Qastor app (product) design. The latter's digital design grew the system significantly with new native components specifically for portable devices. For more information on Qastor, feel free to view the new case study.

Explore ↓
White background with colors of the QPS brand on it
QPS brand colors.
Overview of typographic elements used in the QPS webdesign
The typography used in marketing design.
A selection of modules, thumbnails and links used on the QPS website
Hover states of various elements.
An overview of colors separated per QPS software application.
QPS Q-Suite application colors.
An overview of design modules used in the QPS website.
Various molecules of the QPS design.

The young and hungry

QPS's old website and brand needed to be updated to appeal to the 'younger' manager. This type of manager is just settling down onshore after being offshore (at sea) for over 10 years. They've used various software during their time at sea and will vocalize their preferences to their purchasing managers, and, more importantly, their opinions are well-valued and highly weighed.

We decided to make some crucial changes to speak to this new, younger manager. First, we presented a trial download on the website, which is usually not an option in this industry. As a result, they allowed younger managers to explore the entire Q-Suite, where they usually had only previously worked with Qinsy or another brand software.

Secondly, QPS introduced a new pricing model based on subscriptions, giving the younger manager more tools to 'sell' or try QPS's software to their purchasing manager. Many of our design efforts focused on this target audience, and the first results are promising.

Thirdly, we redesigned the complete look and feel of the brand to fit this target audience.

Explore ↓
A laptop on a black background displaying Global Resellers of QPS.
Global resellers map and pop-up.

All-in-one Support

One of the challenges that we discovered during the workshops was the support system. Support had been running on different platforms, and most of the training and specs documentation for the Q-Suite was hard to find or unavailable to non-users.

We decided to design a new Support collection where all service-related requests and documentation would be transparent, accessible, and come together. This new collection now offers a place for tutorials, training sessions, software patches, downloads (complete applications, trials, or patches and updates), and full documentation for the software.

Having all this content in one easy-to-find spot gives QPS's support team a directory that, whether or not you have a QPS login account, gives visitors the right content for them and helps the team to solve support issues more efficiently.

Explore ↓
A tablet on a grey background showing the QPS downloads page
Q-Suite downloads page.
Two tablets on a grey background showing the QPS support page
Support page.
A full-page screenshot of a QPS application Download page.
Download detail page.
Mobile screenshot of the QPS downloads page
Mobile screenshot of the QPS downloads page
Mobile screenshot of the QPS downloads page
Responsive download pages.
A tablet on a grey background showing the QPS trial page
Request a trial page.
A tablet on a grey background showing the QPS trial download page
Download your trial page.

Cards

The card system we created for QPS is very versatile. It allows QPS to present information, news, updates, features, and more. Moreover, they come in various colors, depending on the card's function.

The dark blue device cards present screenshots from the various applications of the Q-Suite. When clicked, they open a pop-up containing in-depth information about the card's topic.

I've created multiple prototypes to help our developers structure and visualize the required micro-interaction animation for the cards. A video of the prototype is included in the section underneath.

Explore ↓
A tablet on a grey background showing the QPS card system
QPS card module.
A tablet on a grey background showing the QPS card lightbox
QPS card lightbox.
QPS card prototype video.

The Device Library

A big part of the Q-System is the collection of device assets. We designed them to visually bring together multiple screenshots from different Q-Suite applications in an art-directed mockup. As a result, the devices are an integral part of the card system and QPS's marketing efforts.

We've created over 60 different device mockups, with a careful selection of compositions containing a variety of laptop, tablet, and phone mockups.

Explore ↓
A visual collection of different mockups of QPS
Overview of QPS devices.
A collection of QPS desktop mockups
QPS desktop mockups card
A collection of QPS card hover states
QPS card hover states
A collection of QPS tablet mockup cards
QPS tablet mockups card
A collection of QPS mobile mockup cards
QPS mobile mockups card

Outcome

QPS, Naam, and I are delighted with the outcome and process. To quote Matt Wilson, head of marketing at QPS (US): "Our partnership with Naam has benefited our company tremendously. From their initial approach that was focused on effective brand positioning, to the ideal selection of visual elements, and finally, to the cutting edge technical implementations, we are thrilled with the collaboration, and we look forward to our continued partnership moving forward".

After delivering our services, QPS has strengthened its position in the market, and support tickets are reduced and resolved more quickly. Additionally, with the integration of Confluence and the downloadable trials, the requests amongst a younger audience that prefer to work with QPS have improved significantly. All-in-all, the singular focus across all intercontinental offices has resulted in a great project and result.

Today, Naam is still the leading design and strategy partner of QPS, and together, they have re-joined forces to work on the interface of Qastor, QPS's precision navigation software.

Explore ↓
Multiple tablet on a grey background showing various pages of the QPS website design
Collection of various QPS pages and sections.
Client
QPS
Services
UX/UI Design
Prototyping
Creative Direction
Brand Strategy
Brand Identity
Design System
Naming
Sector
Maritime Software
Year
2019
Details
Design
Timothy Maurer
Joris Spiertz
Ellie MacLeod
Development
Lieneke Koenen
Strategy
Timothy Maurer
Joris Spiertz
Creative Direction
Timothy Maurer
Joris Spiertz
Team
View site