SNP Technologies

SNP Technologies is a cloud-only service provider, building secure and reliable solutions for businesses of the future.

My Role

Web, Marketing, and Visual Design

Project Term

February 2016 - Present

The project

SNP Technologies is a cloud-only service provider who is a highly-recognized Microsoft partner. With the increasing amount of business coming from being a Gold-level Microsoft Partner, SNP Technologies needed a revamp of their website to properly convey their value and expertise to potential customers.

I worked with the team at SNP to re-imagine and redesign their online presence, as well as continue to define their marketing communication style today.

SNP-homepage

Understanding the audience

Before beginning to design, I dug into the client’s understanding of their business goals and target audiences. As I spoke with the client to understand their needs, I learned that they were targeting IT management at companies - CIOs, Directors of IT, and VPs. SNP wanted a visual language that spoke to this audience, and reflected their expertise as a Microsoft partner, but also felt approachable.

Early stages

I started off by creating mood boards that could represent the visual styles we could apply on the website. Considering the target audience and the effect that the client wanted to achieve, I crafted three, distinct styles that I felt would accomplish their needs:

"Futuristic"

Feels like high-tech, cutting edge technology. Leverages visual devices like line drawings, circuit board imagery, and dark/modern colors. This style might intrigue customers into thinking that SNP is at the cutting edge of working with technology and a leader in their class.

"Modern Enterprise"

A modest and humanist style that leverages photography to relate concepts to customers. It maintains being approachable by using clean and warm colors/font styles, but also leverages this same mood in a way that seems professional.

"Bold Minimalist"

The most playful style, uses bold colors and illustration/iconography to make challenging subject matter feel more approachable and friendly. This positions the client as a friendly and approachable partner in the space.

mood boards

Creating three different styles allowed us to find a balance where the client felt that they were being represented properly. After pitching these ideas to the client, we ultimately decided to go with a combination between the minimalist and enterprise styles.

I did this by taking several steps. For one, we’d tone down the palette more toward the modern enterprise style, helping to maintain a sense of professionalism, especially amongst the playfulness of the icons. Second, we’d leverage iconography, illustration, and minimal patterns as the main vehicle for visualizations, which would help to achieve the approachable nature of the client, and also provide flexibility in representing abstract concepts. Having worked with photography as a visual style for a cloud-based technology company before, I knew there were often challenges in finding photos that would well-represent these abstract concepts. These small changes helped us achieve a visual style we felt represented SNP and where they wanted to grow into.

Wireframing

Concurrently while working on the mood boards, I also worked on wireframes that represented the general content structure of the pages on the site. My goal in this was to get approval and buy in to the general site architecture, and how content would link and be structured on the site. I took a low-fidelity approach to creating these wireframes in Sketch, so that the client wouldn’t get distracted by the visual details and would focus on how the content would be structured to tell their story.

website wireframes

Designing the website

I created mockups of each page on the website based on the content structure I’d demonstrated through the wireframes. Mockups were high-fidelity, and created using Sketch. At the time, we didn’t have much textual content for the site, so unfortunately, placeholder content had to be used. Once I’d created the mockups of each page, I put together an InVision prototype to demonstrate how each page would link, and where different pieces would click through to. This helped the client really understand how their site would function and how each page would factor into the ultimate story that they would be sharing with customers.

Once these mockups were shared with the client, we moved into development for this website on the Drupal CMS. I used Zeplin to generate redlines and assets, and followed through with the developers to provide any additional information that they needed through the development process. Design QA was performed concurrently as some of the other pages were being developed.

Page designs for SNP website

Launch & continued iteration

Since we were on a tight timeline, and Microsoft was pushing the client to launch their new website ASAP - we launched the website when we were comfortable with the content and visuals. Although there were (and are) still some design bugs that I have filed for us to resolve, I recognize that the business value of having the site live will ultimately help the client generate leads, which it wouldn’t be able to do if we held it back to get the design to be 100% perfect. As with most design work, we are continuing to reiterate, adding new pages and content, and consequently working on improving the site’s architecture.

Marketing and brand material design

With the new look of the SNP website, I’ve worked with the client to bring visual consistency to other materials that the company uses to sell its services.

I’ve created branded materials such as business cards, letterheads, and presentation templates using the new visual design, and continue to support the company’s design needs.

Page designs for SNP website

Continued client relationship

Since redesigning these materials for SNP Technologies, I’ve continued to help with website design and marketing design. I enjoy collaborating with SNP and working on projects together with them to help them establish their own brand and voice.

VISIT SNP.COM