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
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
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.
Audience
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.
Existing customer
1.0
2.0
3.0
4.0
3.1
3.2
3.3
Page layouts
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.
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.
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.
This styleboard references designs from other products. We are not associated with these images.
Scott O’Reilly — Cofounder, Chief Software Architect
Style groundworks
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.
Design library
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.
Development
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.
Identification
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
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.
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.
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
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
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
