Consulting Company Website Design
A contemporary website design for for a B2B consulting company.
Challenge
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?
Scope
We designed five mid-fidelity to high fidelity responsive wireframes. The wireframes were handed off with annotations for easier development.
Constraints
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.
Implementation
We annotated the wireframes for easier development and future reference in the event of expansion.
Our Goal
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
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.
Results
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.
Our Process
Understand
Sitemap
We first created a quick sitemap to understand what was the most necessary for each page.
Design Research
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.
Design
Mid-Fi Wireframes
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.
Mid-Fidelity Wireframes
Hi-Fi Wireframes
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.
High Fidelity Wireframes
Validation
Iterations
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.
Challenges
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.