Goods & Services Branding
Rebuilding an agency’s digital presence
Client: Goods & Services Branding
Agency: Goods & Services Branding
Role: UI/UX Designer
Year: October 2017 – May 2020
www.gsbranding.com
UI/UX Design / Brand Implementation
Goods & Services Branding is a full-service branding agency that integrates research, strategy, graphic design, content and digital services, all in one studio.
The studio enters a new era
When Goods & Services (G&S) celebrated their 20th anniversary in 2017, the agency’s owners decided that their brand and website needed an update. They were looking for a web experience that would stand out against their competitors and be flexible enough to work with both visual- and writing-heavy projects. The new website would also need to be easy for various team members to update (with and without coding experience). Incorporating a section for the branding journal that the agency produced, Sway, was paramount.
How might we help an established agency elevate their image by equally highlighting the skills of their in-house editorial and design teams, and their self-produced branding journal for potential clients?
A text-heavy page that was seen as a deterrent to potential clients.
A page that seemed challenging for team members to update if they did not know basic HTML/CSS.
Interviewing business stakeholders
When initially asked about the types of clients they wanted to attract, G&S’s owners said that they wanted to attract “better and braver clients”—especially those that “liked well-crafted content and design”. Their clients range from large international organizations to smaller local companies, with a wide range of knowledge in design and marketing. During their interview, the owners further identified some pain points that they wanted to address in the next version of the website, including:
The large amount of copy on the business overview pages;
The identity did not function well at the small size used;
The layout and functionality of the website was not showing the “creativity, smarts, or how in touch with popular culture” the agency was as a whole; and
Case study layouts that were not flexible and made it difficult to see details in the imagery due to their smaller size
A workshop was held with members of the design and editorial teams, since this website will be showcasing their abilities to collaborate with clients and each other. An affinity mapping session was held to come up with keyword groupings to describing the tone, personality, and values they wanted to showcase as part of the agency. These keywords were referenced throughout the redesign.
Images from an affinity mapping session with various team members. This was conducted to determine the tone, personality, and values that we wanted to portray through the design of the website.
To further my knowledge of what elements an effective agency portfolio might consist of, I completed a competitor analysis of Toronto-based design and branding agencies (with similar services to G&S). Some key takeaways about their websites included:
Using an eye-catching feature image to highlight each project;
Having a variety of image sizes mixed with text in each case study;
Having a variety of case study layouts that use the same elements to make them consistent;
Having a section featuring clients the agency has worked with; and
Using a branding scheme that is eye-catching, but can work well with the projects displayed by not overshadowing them.
Wireframing and creating “blocks”
The initial wireframes were provided by G&S’s Creative Director, showing the elements he saw as imperative to include in the new website. These helped me gain an understanding of the hierarchy of information he wanted to present. These wireframes were reviewed against the competitor analysis and team interviews, with the goal of identifying similar elements and values in each. Updated wireframes were created based on this analysis and presented to the owners of G&S for review.
Case study wireframes and inspiration board to show how we could incorporate and use block sections for ease of design. This would also allow us to have a variety of case study layouts that would still use the same elements, making it easier to develop.
While the overall design of any website is important, it was vital that the case study pages be the most flexible and thought-out, since these were the most visited pages on the website, based on Google Analytics reports.
Using “blocks” allows us the flexibility of layout we need. Each block consists of a text and/or image element in a set layout. However, these blocks can be mixed and matched into different orders so each case study uses the same elements while still looking unique. This allowed us to adapt to the various pieces in each client project, whether it consisted of a logo, branding system, marketing strategy, website, etc. In total, we created eight blocks that could be used throughout the website.
Style/layout guide and layout example for the block sections used both in case studies and the business pages.
Designing the website
Since the rebrand was occurring in tandem with this website redesign, I worked closely with the Senior Designer (who lead the overall rebrand) on the visual design of the website. The base colours match the new print branding (white, grey, and black), but we decided that each case study would have its own secondary and tertiary colours. This would allow each case study to be unique, but compliment the client project(s) being displayed.
Examples of how each case study has its own colour palette.
Each case study features a narrow header image to act as an introduction to the work below it. The image is quite narrow, acting as more of a textural feature than an informational one. At the bottom of each case study, there are sharing links for various social media platforms and links to go to the preceding or following case studies (based on the order of projects on the “work” page). This will help clients navigate between projects easily instead of going back to the “work” or home pages.
A challenging timeline
This project was completed between client projects and other internal activities. This meant the project was often put on hold for long periods of time. In order to keep track of where we were in the process, each team member kept notes of where they were in their tasks and kept the project manager up-to-date with their progress.
Results
Since its launch, the website has been happily received by G&S's owners and the entire team. In time, we’re hoping to get feedback from our clients and peers, as well as more quantitative information from our Analytics. However, there are a few improvements and additions we would already like to make. These include adding a section for company news and adjusting some of the case study colours so they are WCAG AA compliant.