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.
Role
User Flow Assessment, Competitive Analysis, Mood Boards, Concepts, Mockups, Copywriting
Year
2019
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
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.
• 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.
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.
ENS Group
Linx
Spacepole
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.
Mood Board 1: Bold, colorful and fun
Mood Board 2: Serious, monochromatic and minimal
Concepts
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:
Concept 1 — Home Page
Concept 1 — Product Category Page
Concept 2 — Home Page
Concept 2 — Product Category Page
Mockups
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.
Home Page
Services Page
Service Detail Page
Products Page
Product Detail Page
Solutions Page
Solution Detail Page
About 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
Various Mobile Views
Results & Lessons Learned
Results
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!
