Solspace.com Redesign 2020

The first top to bottom website redesign and rebuild for Solspace in 10 years.

Eyes

Who?

The cobbler's kids usually have no shoes, except for this time.

Balloon

Why?

New insights into our core business and core clients demanded a new website.

Gauge2

How Long?

This redesign took a year from start to finish.

Head1

Team

Using our cross-functional ad-hoc team approach, we brought in the best subject area experts.

Controller

The Feel

Everything is hand-drawn, bespoke, and custom made exactly to our specs. No stock art. No skimping.

Bulb

Neato

See if you can find the flamingo.

The Challenge

Starting in 2018 and continuing through 2019, we conducted deep and intensive marketing exercises to reboot our understanding of our clients, their needs, what ailes them and how we have historically helped them. We found that over the 20 years we have been in business not only had our client profile changed, but the solutions we provide them had evolved. The most important insight that came out of this intensive strategic work was that our clients come to us to make their websites reliable. We are counted on to make websites reliable sources of revenue. Our clients count on us to deliver this reliability over long periods of time. Anything you are going to do with dedication and intensity over a long period of time must include lightness and fun as well as seriousness and expertise. We knew we needed all new design, branding and execution to communicate this message effectively.

Shielding
Clock

The Team

We handpicked a team of practice area experts to help us explore and deliver on the new vision. We knew we needed an overall big picture strategist. Even though we serve in the strategist role with our clients, we knew better than to try and be our own doctor. We also have in-house design ability. But here too we it would be best to get fresh eyes on the problem. As we went through the process, we needed additional skilled designers. We were not, however, ready to share the most fun part of a website build, the actual development work. That we did in-house.

Below is more information on the team members and their contribution.

The Strategist

We had worked with the web strategist, Scott Hutcheson of The Strategic Web over the years primarily as web developers to his clients. From that foundation we knew that we had a great asset to call on to help us look correctly and clearly at the big picture strategic issues we faced. Scott's influence and process helped us uncover the reliability truth about our work. Early on, with Scott's inspiration, I wrote a book to dive deeply into the Web Reliability question. That became a stand-alone website and resource, which has since been merged into this new solspace.com site.

Scott continued to help us develop the Web Reliability concepts and eventually helped us move those into the design and redevelopment process for Solspace 2020.

Faucet
Brush

The Designer

We have worked with Eric Miller Design for more than 15 years. Every time we have a client who needs web design or user experience design work done, and we feel we shouldn't do it ourselves, we bring Eric into the conversation. Eric has the same fun-loving, down to earth, yet highly skilled and professional approach to work as we do. There's always been a strong cultural fit.

Eric has a process as do we. He knows that the problems he solves are highly complex, multilayered, and nuanced. Working from the place of process grounded our redesign effort and put us at ease with the daunting task of communicating something complex on many emotional and intellectual levels at once.

Eric begins all of his design engagements with user interviews. He reached out to a number of our representative clients put a series of questions to them and had lengthy conversations about the Solspace brand, their needs of a company like ours, and the pain points they experience as they manage their high-stress jobs. The insights Eric gained from these interviews surprised us all. Nothing causes you to drop assumptions faster than confronting them with the facts of your customers' needs and desires.

Eric built on the insights gained through his interview and research process and moved us into exploring mood and feeling in the design. We defined key concepts and overriding emotions that we knew we needed to express. We then explored other designers and artists who work in these areas. This resulted in a set of mood boards that really caused the design direction to gel.

Eventually, Eric's work congealed into a design that would rely heavily on hand-drawn illustration. We were seeking the highest quality deliverable for Solspace 2020. This meant that we needed to find a talented illustrator to create custom illustrations for us, breathing their own creativity and artistry into the work.

The Illustrator

We found Andrey on Creative Market. We had a feeling early on that Andrey would be able to flesh out and further define our design vision. We explained the Web Reliability concepts to Andrey. The idea with Web Reliability is that a website should be reliable, a reliable source of revenue. The most important factor to this reliability is flow, the flow of a customer's desire through a website toward its fulfillment. Andrey ran with this idea and came up with animated illustrations that played on the idea of flow. He brought in elements of steampunk and Rube Goldberg as a way of communicating that ethereal quality of the Solspace team, our love of fun and whimsy in the middle of the serious and important big picture goal of optimizing customer flow through a website.

Sometimes a creative project lives or dies by the details. Andrey allowed us to dive deep into the details of Eric's design vision and really get the most out of the hand-drawn illustration concept. He was a crucial creative force in our site redesign. I can't recommend him highly enough for his professionalism, creativity, work ethic, and intuitive sense. You can find him on Creative Market, Behance, and ArtStation.

Key
Halfgear

The Developer

Nicolas Bottari and Mitchell Kimbrough from the Solspace team implemented the underlying code for the new Solspace website. We of course built on Craft CMS, the best tool for the job. We opted to use Tailwind CSS as our HTML / CSS framework. This sped the design process along very quickly and afforded us ease and convenience in adapting page designs on the fly as needed.

The implementation of the animated illustrations was a fun challenge. We initially started with animated gifs of course. But we quickly became annoyed with the poor quality and large file sizes. Andrey came up with the idea of using an animation library called Lottie. With Lottie, Andrey was able to export his animated illustrations from Adobe After Effects. To make the animations work, we load the Lottie Javascript library and call in the JSON file that represents a Lottie illustration. We can then control playback using Javascript. These are basically moving SVG files that scale very well, have pretty low file sizes, and maintain perfect fidelity regardless of screen size.

The Animations

As we developed the concepts of hand-drawn illustrations we quickly came to a point where we really wanted illustrations to be animated. We of course started off using animated gifs but the size and quality of these was terrible in our context.

We found a great open source project maintained by Airbnb called Lottie. This toolset allows you to compose animations in Adobe After Effects. Export those as JSON and show the animations on a web page using a Javascript library. The file sizes are excellent. The cross browser support is great. Performance is supergreat. And the fidelity, most of all, is crystal clear and smooth.

Label
Canister

The Solution

If the problem that the new Solspace website had to solve was to communicate how a web development agency could be both expert and professional while also being fun loving and easy going, we think it succeeded.

Good marketing both attracts and repels at the same time. Cultural and personality fit are crucial for our work in trying to make websites reliable. The team is everything. We think this new site does its job well.