How do you move from an initial logo and web site to a complete brand and content solution? Keep it simple.
Content has been modified or recreated to comply with my non-disclosure agreement and does not necessarily reflect the views of Streamlio Inc.
I love the process of building branding and web sites from scratch or modernizing existing ones. When Streamlio — a real-time cloud solution — asked me to refresh their logo and build out their brand, I was thrilled to take on the responsibility and work with the team.
How do you rebuild an existing brand without going over the edge?
Keep it simple.
Clean up the logo. Build a coherent brand around the company vision. Create a flexable and extensible web solution. Provide a complete set of assets, documents, and templates to allow internal design and production of content.
This is a huge win for the marketing and design teams. To be quick and nimble, and to save time and money. A win-win-win.
The first thing I did was review their competition to understand how Streamlio was positioned. This included competitive analysis, asset and design review, web architecture and development review.
I helped them define their goals, scope the work, and generate a schedule.
Most logos are comprised of two main elements; a glyph or ‘bug’ and the wordmark.
When starting with an existing logo, you need to understand where its success and failure lie. While the original logo’s wordmark looked presentable, the logo itself would get lost when placed on various colors and hues. Part of this was due to the additional gray outlines and paths.
By removing the outlines and adjusting the hue of the paths, we were well on our way. However, we needed to be sure that the logo would stand on it’s own no matter where it was used.
To do this, I created an additional set of logos to be used when mixed with various color or image backgrounds.
For the wordmark, I adjusted the kerning between characters to make it pleasing to the eye and reads well at various sizes. This small change was very well received.
I also addressed the coloring of the logo. Fortunately I had completed the color study early in the redesigning process.
With the logo refresh complete, I began the documentation process. I composed the branding guidelines in Apple Keynote, knowing that a presentation template was part of the deliverables. Doing this not only saved time but allowed for real-world testing of a living document.
I created logo variations, logo spacing, color guide, typography, gradients, and image processing and use.
The next task: build out the rest of the design elements and collect them all into one document to provide guidelines on the usage of the design elements.
With the logo and primary colors addressed, additional colors, gradients, logo placement, and fonts for the website and marketing were next. We found the two that resonated with the team and included Helvetica as "fall back," just in case.
Here are a few pages from the guideline:
Now that we have a branding guideline, how do we help the teams and partners use it? This presented it’s own unique challenges.
Manually entering colors in Pages and Keynote, or even Photoshop and Illustrator, would be an issue. I needed to make this process as easy as possible.
To remove the complexity for the users, I created a system color palette for the macOS color-picker. Knowing that their design tool chain includes Photoshop and Illustrator, I created an AES color palette file and Photoshop actions to generate gradients for application to images.
Using Streamlio branded CLRs in Apple Keynote.
Business cards are sometimes your first point of contact. I updated the layout and provide a template and documentation. This allows the design team to easily create new cards as needed.
During the branding phase, we reviewed their current web development toolchain. We wanted to avoided changing the backend unless there is a large return on the investment.
They had made great initial choices, using Hugo, Gulp, and custom shell scripts to create a real-time development and deployment workflow. The one thing missing was a CMS solution. We chose Forestry, as it has the features required and is easily integrated with Hugo.
When designing a web site, it is critical to keep the site visitor in mind: present the shortest path to what they’re looking for; minimize site navigation; make it easy to establish contact or ask questions; have a call to action on most pages; provide a real-time chat option.
The goal is to reduce site-user attrition and turn visitors into customers.
I produced a set of components and sample web pages in Photoshop for review. They were very happy with the design, and together we identified a few mission components. We were now ready to start development.
By using SASS and modular HTML, I was able to create the required components quickly. However, these were not always easy to grasp without in-page context. I created three example pages for reference.
With all of the required pieces in place, we flipped the switch and generated the new site. Streamlio was happy, but now that it was live, we noticed some odd behaviors not apparent during testing.
I followed up, fixing and creating solutions for these new issues. In addition, I spent some time refactoring the code and templates, and started real-time performance testing.
Due to the large number of images and requests, and a functional but unnecessary SASS/CSS loop, the page was loading slowly at 3G or lower speeds.
We used ImageOptim to post-process images, added JavaScript to lazy load some assets, and removed the offending SASS statement. This provided a 72% savings and made the site load faster for everyone.
Coming away from this project, we see that even when planned in detail, there are always bumps along the way. Being able to adapt and create solutions is critical to the success of any project. I provided tools, assets, and guidance that helped the team build their online presence.
In the end, I created a happy customer. I also took it upon myself to learn Hugo — a static site generation tool — and started using it in current projects. A win-win-win!
