Source Communications

A modern look for an innovative solutions provider

Project Summary
At Fruition, I led a full website redesign for Source Communications. Based in Broomfield, Colorado, family-owned Source Communications offers a broad spectrum of products, services and solutions such as network cabling, retail checkout solutions, security systems and audio visual services.
User Flow Assessment, Competitive Analysis, Mood Boards, Concepts, Mockups, Copywriting

Source Communications
The Challenge
How do you design a website for a company that designs and creates just about anything one can imagine? That’s the challenge the team at Source Communications presented to Fruition. With such a varied portfolio of products and solutions, extra care had to be given to crafting a user experience that conveyed Source’s broad spectrum of products, services and solutions.
The Source Communications Team

The Source Communications Team

Project Goals
•  Design an on-brand, modern and responsive B2B website that showcases Source’s products, services and solutions.
•  Improve search engine rankings by optimizing the site’s content and information architecture.
•  Increase conversions by improving and optimizing the site’s messaging and user journey.
•  Emphasize Source Communication’s ability to act as a single-vendor solution.
The Process
User Flow Assessment
We conducted a user flow assessment to identify usability problems, uncover pain points and gain a deeper understanding of how visitors move through the site, explore products and complete key tasks such as contacting Source for more information. We uncovered a number of usability issues and identified numerous opportunities to improve the user journey.
Source Communications — User Flow Assessment
Competitive Analysis
In addition to the user flow assessment, we also conducted a competitive analysis to take a closer look at some of Source’s direct competitors. Unlike most of their competitors who specialize in either manufacturing or installation, Source does both. We looked at a few key pages to see how other companies with a similar product offering solved the same design problems.
Source Communications — Competitive Analysis — ENS Group

ENS Group

Source Communications — Competitive Analysis — Linx


Source Communications — Competitive Analysis — Spacepole


Source Communications — Competitive Analysis — Telaid


Mood Boards
Two mood boards were created to establish an overall look and feel for the site’s visual design and tone. Examples from competitor sites, stock photography and found imagery were all utilized to clearly illustrate each option. The client chose option 1 below.
Source Communications — Mood Board 1

Mood Board 1: Bold, colorful and fun

Source Communications — Mood Board 2

Mood Board 2: Serious, monochromatic and minimal

Based on our findings from the research and discovery phase, we crafted a couple of concepts before scaling the design to all of the site’s page templates. For these, we focused on how the home page and a product category page would appear on a desktop device. We utilized the company’s current branding and visual assets and presented these two options:
Source Communications — Concept 1 — Home Page

Concept 1 — Home Page

Source Communications — Concept 1 — Product Category Page

Concept 1 — Product Category Page

Source Communications — Concept 2 — Home Page

Concept 2 — Home Page

Source Communications — Concept 2 — Product Category Page

Concept 2 — Product Category Page

Once the client chose a concept to run with, we made a few revisions and then moved on to scaling the visual design to all key page templates. For this project, we skipped wireframes to save time and designed mockups on the fly.
Source Communications — Mockups — Home Page

Home Page

Source Communications — Mockups — Services Page

Services Page

Source Communications — Mockups — Service Detail Page

Service Detail Page

Source Communications — Mockups — Products Page

Products Page

Source Communications — Mockups — Product Detail Page

Product Detail Page

Source Communications — Mockups — Solutions Page

Solutions Page

Source Communications — Mockups — Solution Detail Page

Solution Detail Page

Source Communications — Mockups — About Us Page

About Us Page

Source Communications — Mockups — Contact Us Page

Contact Us Page

Optimizing the Mobile Experience
For the mobile experience, we placed the navigation menu link at the bottom of the design, giving the user quick and easy access to the site’s menu without a painful thumb stretch. We also placed contact information at the bottom and utilized a sequential menu.
Mobile Menu Design
Source Communications — Mobile Menu Design
Various Mobile Views
Source Communications — Various Mobile Views
Results & Lessons Learned
We gave Source Communication’s website a much-needed refresh. The site’s architecture, user journey, visual design and messaging were all optimized to provide a solid user experience on both desktop and mobile devices. We also introduced new pages such as the Turn-Key Solutions page to emphasize Source’s ability to act as a single vendor solution.
Interested in hiring me for a project? Get in touch!

More Projects

Back to Top