I was the lead designer on this project, working alongside my boss and the
senior designer at CBS Sports Network. I was responsible for research, wireframing, and the final design.
Following the CBS Sports rebrand, we were in need of a new logo and brand resources website. This website had to be easily accessible by CBS Sports sales, PR, and marketing teams.
Our approach for this project was to design a logo resource portal that was fool-proof and easy for anyone in the company to navigate, with a minimal amount of clicks to get to the logos they need. Each of the three core brands (CBS Sports, CBS Sports Radio, and CBS Sports Network) served as the top-level of navigation, with CBS Sports serving as the primary brand.
The top portion of the sitemap within the dotted lines designates the three core brands, which would represent three section pages of the website. Each section page would contain all the property logos of the brand.
The Discovery Process
Since this website would mostly be used by the marketing team, our first step was to interview them.
The team expressed their preference for having the easiest navigation possible, with the least amount of clicks. They did not want to use drop down menus for navigation. They wanted the download links to property logos always visible and easily accessible. Additionally, the website should be easy to manage, as logos change year after year and there are often last minute edits to logos.
Another aspect to this design was that it should fit in with the new look of the CBS Sports Network website, following the rebrand.
Overall, we were looking to create a simple yet flexible site with organized content that was readily available.
Before jumping into sketching, I conducted a light amount of research as to how other brands organized their logos and resources. Some websites I sourced included Facebook Brand Resources, Instagram, WhatsApp, University of Arizona, University of Idaho, and University of Florida.
I found that the collegiate websites especially related to our design needs, as they also contained a variety of sports and school logos that required organizing.
Some of the reoccurring usability and design elements I noticed and liked included:
- Expandable menus, organizing each property and its logos by section
- Long-scrolling single pages featuring the brand guidelines and logos, rather than separate pages for each property and logo
- Liberal use of white-space between brand guidelines, various assets and logos. This served as a nice way to tell a story of the brand and not visually overload the user with too many assets at once
- Shortcut links that anchor down to the logo you are looking for
- Download links to the logos included an example photo of the logo correctly in use
With this in mind, I proceeded to sketch some options for the website:
High-Fidelity Wireframes and Design
We narrowed down the sketches into two options:
- A version with a fixed top bar and expanding menus
- A more "traditional" version with a fixed left side-bar and expanding menus
Knowing that we were going to follow the visual design of CBSSports.com, we went straight to creating high-fidelity mockups of the website. The same fonts, color palette, CSS styles for links, rollovers and menus were applied. Our goal was to make this website to look like a seamless extension of CBSSports.com.
In order to not overwhelm the user with too many logos and information at once, ample whitespace was included to keep the feel light and airy, while still maintaining the strong organization and visual crispness that is inherent to CBSSports.com.
The top-navigation bar borrowed directly from CBSSports.com, with the dropdown featuring each of the core brands' properties. These links would anchor down to the property the user selected, which would then automatically open.
Following the sitemap and brand hierarchy, the CBS Sports core brand served as the homepage of the site, with CBS Sports Radio and CBS Sports Network being the two other
Below is a high-level drilldown of what the website would look like,
Since the network logos are the most popular and most often needed logos, we placed them at the top of the page. The one color logos, rendered logos, and brand guidelines sections would always automatically be open. The user would have the option of closing these sections.
For the top nav dropdown menu, the top-level core brand logos were separated on the left from the shows and assets on the right. This would provide extra emphasis to these logos and the brand guidelines, which are arguably most important.
A landing page was also created that could be used to post brand-wide announcements.
First Round User Testing and Revisions
Following the first round of high-fidelity mockups, we proceeded to the first round of feedback and revisions.
Keypoints of the feedback included:
- Preference for the single page top nav version over the left sidebar version
- Alphabetize the assets on the dropdown menu and on the page
- Group all the top-level logos and brand guidelines into one expandable section
- Remove division in dropdown menu
- Make links in the dropdown menus more prominent - hard for some users to see
Revisions and Final Wireframe
Below is the final version of the wireframe that was sent to the developer.
Second Round Testing
The mockup above was coded by the developer and sent back to us for testing.
In this round of QA we found the following items that required attention:
- Creating a "Share" or "Export" link that goes directly to the assets
- Need to separate the section for brand outlines
- Should logos be organized by over light and over dark and have .zips that contain both jpg/eps or separate that out too?
- Secondary logos were creating confusion, should remove to keep brand consistency
- Remove CBS Sports Radio section and replace with CBSSports.com
- Top level section was duplicating the name of the page and creating confusion - section should be closed upon landing
Second Round Revisions and Current Version
Working with the developer, we quickly turned around the revisions after our second round of feedback. The biggest addition was creating an option for a Share link.
Below is a closeup of that solution,
We also updated the top nav and the dropdown menu.
Current Version and Next Steps
The current version is below.
Our next steps will be to continue testing and streamlining the website, adding meta tags for logo search, updating with new logos and assets as they become available, and developing a way to select and share a group of logos together as a single link.