Consulting Company Website Design
A contemporary website design for for a B2B consulting company.
The client for this project wanted a design that could be applied in Squarespace, as they were going to handle the site development. The design needed to be scalable for more content, and would be based off of a Squarespace template chosen by the client.
How might we design a website based on a template that allows for a scalable sitemap?
We designed five mid-fidelity to high fidelity responsive wireframes. The wireframes were handed off with annotations for easier development.
The client provided a thorough brand guideline for us to design around. We also needed to create something that could be feasibly developed on Squarespace.
We annotated the wireframes for easier development and future reference in the event of expansion.
Our aim for this project was not only to create a modern design, but also apply UX principles to encourage engagement and make information finding easy. The design needed to look fun, creative, and boundless- steering away from a generic, templated look.
We also wanted to provide a guide for the client to develop easily from. This would include annotated wireframes and a component guide that would make sense within the Squarespace editor.
Our solution was to design with the client’s brand guide and direction in mind, while applying UX principles to align with the client’s ultimate business goals.
Content was prioritized accordingly and annotations were provided according to Standard Beagle’s standard of quality.
The client was pleased with the design, which followed brand guidelines while staying unique from modern template style designs.
They also noted the annotations provided made the task of development much easier.
We first created a quick sitemap to understand what was the most necessary for each page.
We delved into preliminary research on the client’s professional field for content prioritization. And we also reviewed design examples the client provided for the site direction to go.
With the mid-fi design, we put the focus on what our client had envisioned the site to be: a reliable source of boundless inspiration in a creative but contemporary space. Because our client was also fond of minimalist, yet modern, design, we provided a lot of space between sections, while adding a twist to borders for cards and containers. This way the site felt a step up from a generic template site.
We also made sure that none of the copy line length did not exceed a specific length, in order for good readability. All layouts and components were made with responsiveness in mind, and so that content would wrap without breaking the flow of the user’s eye.
The mid-fi branding felt right to the client, so we proceed to hi-fi design. Once our initial hi-fi was finished, we provided them to the client for feedback. The changes made to hi-fis were more related to content rather than the design. The design and component guide we had created had come in handy when we wanted to change the layout for specific areas, so that the pages looked more consistent.
Because the design system was approved at the hi-fi stage, there were minor iterations to the design.
- Minor spacing changes to allow for more future content.
- Changes to the hero section of the blog archive page to show the most recent blog article, rather than an image, to fill the page.
- Replacements to certain components with other existing components for visual clarity and better readability throughout the site.
The main challenge was working around Squarespace and its editor. Our worry was around how challenging it would be to adapt our design with the editor, and if the client would be able to accomplish the development on their own. However, the client noted how easy it was to understand the wireframe annotations, but also opted to outsource development of the website.
Another challenge was to keep the brand guideline in mind without copying the guide completely. Ultimately, we iterated on designs, gowing further away from the guideline and taking inspiration from other sources to create a more unique style.