Scalar

Website

2015

Scalar Decisions needed a responsive website that reflected their standing as one of Canada’s leading IT companies.

I helped to lead design, establish style direction, and designed the illustrative system used to delineate Scalar's pillars of service.

Filament worked with FitStar on various projects, involving web design, development, and strategy for 2 product launches, UI/UX for FitStar’s web app, and design and development for email and landing page campaigns.

I worked on UX and visual design for these projects.

scalar_intro_ls
scalar-m_intro

The challenge

Scalar approached Filament for a redesign of their then-dated, repetitive, and sprawling website.

During our discovery phase, we found a handful of stakeholders didn’t view the website as a thing that needed to be worked on, as some didn’t believe they could get a sale from it. Meanwhile, the existing customers we interviewed didn’t bother going to the site for any reason.

Insights from our stakeholder and audience interviews directly influenced what needed to be on the site. Not only did the redesign need to reflect the sophistication of the company and what they offer, but we also aimed to provide value by making Scalar a go-to for research for new and existing customers.

“I don’t think a website can help me land a new client”

– One of Scalar’s stakeholders (who we reaaaally wanted to prove wrong)

Goals

Help to elevate Scalar’s expertise in the industry by enabling their team to produce valuable content.

Provide a dynamic and flexible visual design system that highlights Scalar's pillars of service.

Make it easy for users to get in touch with an expert.

Set Scalar apart from the competition by speaking more to business outcomes and avoiding too much tech jargon.

scalar_csd_sketch
scalar-m-strategy

From content strategy planning to wireframing with the team for the What We Do page

scalar_services_solutions
scalar_servicessolutions_mb
scalar-m-ss

Rethinking Services and Solutions

Scalar’s offerings had always been organized into Services and Solutions. To us, as IT laypeople, the division seemed a little arbitrary and jargon-y. But we never did get a satisfying answer on what delineates a Service and what is considered a Solution.

We aimed to find a more common ground with people looking to purchase IT who are outside of traditional IT roles by centering Scalar’s offerings based on business outcome. Along with providing further filtering options, this worked as an alternative approach to organizing content that was uniquely based in empathy.

scalar_pillars

Design System

One of the biggest challenges for us was finding a creative alternative to the imagery that is often used to depict the abstract concepts of IT– (usually terrible) stock photos.

Based on the fact that Scalar stands on 3 specific pillars of service, we created an illustrative theme based on a unified grid for security, infrastructure, and cloud. We took the isometric grid the illustrations were based on and carried through that angled motif throughout the interactive elements on the site.

scalar_pillars_lg
scalar-m-pillars

Scalar's previous colour library was limited to Scalar Orange, and a few shades of grey. We established a thorough colour system that aligned with the illustrations for each pillar, and is used consistently throughout the site to train people to expect associated content with the use of each colour and symbol.

Scalar's previous colour library was limited to Scalar Orange, and a few shades of grey. We established a thorough colour system that aligned with the illustrations for each pillar, and is used consistently throughout the site to train people to expect associated content with the use of each colour and symbol.

scalar_collection1

Collections

Better establishing Scalar as a source of thought leadership in their industry meant that we wanted to go a bit further than just making their blog posts easier to read.

We aimed to help people who would be coming to the site to learn more about Scalar’s take on the latest advances in IT, and make it easy to share their findings.

We set up a Collections module, which functions similarly to a shopping cart. People can add content from anywhere on the site– e.g. an article, page, or resource– to a list and share that custom made collection with their peers by way of a unique link.

Though I haven't been privy to the metrics, post-launch Scalar has made the Collection mechanism much more prominent on the site– it looks like it's working out!

scalar_collection_UI

Collection module assets and states

Collection module assets and states

scalar_desktop_interior
scalar_desktop_interior

Outcome

With 25% more converted visitors, we'd like to think that translates directly as the website effectively helping to acquire new clients.

+25%

increase in lead generation via contact forms

+15%

increase in new users

+30%

increase in pages per session

+33%

increase in session duration

thumb_ooka

Next up:

Ooka Island