A modern approach to enterprise software showcasing & sales

We helped Spider Strategies with our research-driven process to redesign their website and be a unique player in the big data analysis market with a modern yet reliable look and feel.

An introduction

Setting a new standard for enterprise software websites

Spider Strategies creates software to help organizations optimize their performance. That may sounds like it entails a whole lot. And it does. Their software can be classified as enterprise software. Despite this category often being marked as dull, Spider Strategies wanted their website to convey their innovative character without appearing startup'y.

sitemap

Structuring content

As we kicked off the project one of the first things we did was getting to know our client's business and user needs. Within a few iterations and great conversations with our the Spider Strategies team we settled on a final sitemap for the website.

Yummygum team working on Spider Strategies
Yummygum team working on Spider Strategies

Audience

Logical paths

We aligned with the client to put a finger on their Most Valuable Audiences. Together we distilled four main categories of users and defined what each of their website goals were. We asked ourselves; "what would each of them gain from visiting the website?" which lead to logical paths throughout the website.

spider strategies persona
spider strategies persona
spider strategies persona
Maria

Existing customer

1.0

Home

2.0

Product

3.0

Solutions

4.0

Resources

3.1

By Methodology

3.2

By Industry

3.3

By Role

Page layouts

Creating and repeating patterns

After having laid the foundation of content chunks per page it was time to work on the basic layout of pages by creating wireframes. The best way to go about this was creating and repeating layout patterns and creating template page layouts for similar pages.

Mood board

Simultaneous to the User Experience team piecing together the most logical paths for users to navigate the website we started establishing the style direction for this project. We started out with a mood board to visualize Spider Strategies' values and brand personality.

Overview of the research done for Spider Strategies.

Style board

The mood board served as a springboard to the creation of the style board. Having paid close attention to our client's needs and style preferences we were able to create a style board that conveyed keywords such as; clean & simplicity, powerful, innovative & insightful, elegant and serious.

Overview of the research done for Spider Strategies. Overview of the research done for Spider Strategies.

This styleboard references designs from other products. We are not associated with these images.

“Yummygum makes things that look amazing, but their ability to really dig into the underlying problem is what impresses me.”

Scott O’Reilly — Cofounder, Chief Software Architect

Style groundworks

Typography and palette

We knew right off the bat we needed to look for geometric, grotesque, sans-serif typefaces to fit in with the style direction. From four typefaces that matched the style and Spider Strategies' brand values we landed on Calibre for its versatility and approachable yet serious look. Paired with a comprehensive but balanced color palette the typeface would form the groundwork for the new website.

The color palette used for Spider Strategies.
The fonts used for Spider Strategies.

Design library

A systematic approach

The extensive nature of this website and the number of pages required a systematic approach. Our trusty way of setting up a design library — according to the principles of Atomic Design — was the perfect fit for this project. Creating and working with reusable and nestable components paved the way for consistency throughout the page designs.

Spider Strategies preview

Development

Speed/performance: a top priority

Despite our love for React, Vue and Svelte, conversations with the Spider Strategies team taught us their strong preference for plain JavaScript over JavaScript Frameworks. Together we aligned on the top priority: speed/performance. We utilized native webbrowser behavior wherever possible and set clear rules regarding image compression, all in favor of website performance. Needless to say the design library was mirrored one-on-one within code.

Yummygum team working on Spider Strategies
Yummygum team working on Spider Strategies
Spider Strategies brand shapes

Identification

User context combined with User Interface

Instead of making an indirect appeal to the different audience types through the use of mere photos we settled on combining photography with snippets from the software's User Interface. To keep things light and focused we trimmed down complexity of the User Interface. The reason for this abstraction/simplification was to leave out irrelevant parts and highlight power features dedicated to specific rolls within companies. This way a data scientist would be able to identify with a photo of a person using the product combined with an actual snippet from the software that helps data scientists do their jobs better.

Discoverability

Wayfinding through clearly structured navigation

Spider Strategies software is extremely powerful, versatile and empowering for a large variety of industries. That's why it was key to structure the website navigation in a logical and intelligible manner. Such a large body of information would benefit from a clean and structured dropdown navigation with a focus on discoverability both on desktop and mobile devices.

Spider Strategies preview

Design language

The clear vision on the design language for the new website was applied throughout every page on the website. The more utilitarian pricing page was no exception.

Spider Strategies
Spider Strategies

Spectacular on all devices

Although we tackled this project desktop-first by no means did it mean we were going for anything less than spectacular on all other sizes and devices. While we also designed custom responsive versions for mobile, we made sure the coded version looked ace on every viewport.

Before-and-after

Seeing and feeling the difference

One thing Spider Strategies was looking to accomplish with a website redesign was to speak to a larger variety of (potential) customers with their software. Through close client-collaboration all decisions relating to information architecture, we achieved just that. To get a better understanding of the difference we made we created a before-and-after slider.

before

after

Presenting: the new Spider Strategies website

The result of this collaborative effort is evident. A modern and professional looking website that helps both new and returning customers, prospect users and everyone in between discover what it is that makes Spider Strategies' software invaluable to them. A website that is blazing fast due to a confidence in a specific tech stack applied by our development team. Looking for something similar? Let's find out!

Get in touch