Responsive Web
Creating a centralized logo portal for CBS Sports
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.
Overview
My Role
UX and Visual Designer
Site Mapping
Competitive Research
Stakeholder Interviews
Sketching
Wireframing
Visual Design
User Testing
Skills Used
Time Frame
3 months
The Approach
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.
Sitemap
The Discovery Process
Consultation
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.
Competitive Research
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
Competitive Research
Initial brainstorming sketches
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.
High Fidelity Wire Frames - Round 1
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 core pages.
Below is a high-level drilldown of what the website would look like:
High-Level Drilldown
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.
Top Nav Dropdown Detail
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.
Landing Page
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 Wireframes
Below is the final version of the wireframe that was sent to the developer.
Final design on left, closeup of two expanding sections on right
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 MVP Design
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,
Share link for logo
Updated top nav to a simplified single dropdown, and alphabetized logo categories
Future Plans
Future plans 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.
Finished MVP design
Takeaways
This was my first experience working on an internal tool, rather than a customer facing website. I liked the clear-cut focus of the tool, to deliver logos and assets to employees and partners. One of the benefits of working on this project was that a majority of our users were in-house, which allowed for quick feedback and turnaround. We were able to get testing done on the fly by asking coworkers who would be the primary users of this tool. I also appreciated the opportunity to design something clean and minimal, which was a departure from the usual visual design style for the network.