Building a custom website for W4Sight, an organization helping non-profit orgs make better use of their technology.

Apr 13

Introduction & Overview

W4Sight is a team of passionate individuals, committed to helping non-profit organizations harmonize their technology, people and processes. Whether an organization needs to evaluate their current software setup or wants help choosing new tools – W4Sight has the expertise to select and implement complex systems. Their personalized approach and extensive industry knowledge sets them apart. However, their website wasn’t clearly communicating their message and didn’t fully embody their personality. I worked in partnership with Statement to bring W4Sight’s new brand and website to life.

Visit Website

Creating a site structure

All website projects begin by developing an overarching site structure, or in other words a Sitemap. This Sitemap acts as a high level overview of the site pages that will support the user throughout their journey online. This includes deciding what the top level and secondary level navigation should be. We also developed Wireframes which are simple page layouts focused on content structure and functionality used to guide the design of the site.

Developing a design direction

W4Sight expressed being unhappy with the current look and feel of their website. They felt the design and content did not accurately represent their level of professionalism and expertise. We all agreed it was time for a facelift! In tandem with the sitemap and wireframing process, we shared three different design concepts with W4Sight. We call these concept boards, Stylescapes. Essentially a Stylescape encompasses all fonts, colors, design elements, photography and graphics used within the final design. As you can see, each concept looks different and conveys a distinct feeling. After discussing all options, we selected one option to move forward with.

Brand development and ideation

With a color palette, font family and graphic style chosen we honed in on developing a modern and refined logo. After lots of sketching, ideating with the team and brainstorming – we narrowed down the logo options to three strong concepts. All concepts fit within their preferred web design directions but one stood out among the three.

Choosing a logo concept

Resembling a beam of light, the icon stems from the word “foresight” featured in W4Sight’s name. The visual direction emphasizes W4Sight’s ability to uncover the root cause of their client’s challenge and light the way forward with a customized solution. The “W” icon also resembles the traditional tech stack symbol subtly nodding at W4Sight’s emphasis on technology.

Mobile friendly and responsive site build

W4Sight’s website was stuck in the past. In order to bring them into the modern era, we built a completely custom website within WordPress. Their new site is both mobile friendly and responsive allowing users a fluid website experience. We also used a visual builder within the backend of the site so that W4Sight can continue to update content and visuals as needed.