CBS Sports oversees numerous other brands, like MaxPreps, 247Sports, and SportsLine. As a Product Design Intern, I worked closely with other designers, product managers, and engineers to design and prototype new and updated components.
When Catherine, my manager, and Luke, the VP of Design at CBS Sports, approached me with the brief to implement an announcement bar on the 247Sports website, I jumped at the opportunity to hone in and apply my design and prototyping skills.
I worked with 247Sports' Director of Product, who was the PM of the announcement bar component, and 247Sports' Senior Director of Software Engineering to outline the components and discuss how this interfaces with the CMS. The purpose of the announcement bar was to highlight and direct users to any ongoing live streams, promotions, or breaking news that is happening. I created the announcement bar for mobile and web platforms.
The project brief included:
After reading and discussing the brief with the PM, I noticed that there were common categories of announcements in the sample content announcements. I proposed grouping the announcements under different labels, an idea that the PM loved and gave a green light on.
Now, the components of the announcement bar would include category label + content.
I worked with PM to determine the following labels:
Design Systems: I reviewed the 247Sports design systems to ensure my designs were consistent with 247Sports colors, fonts, radius, etc.
Referencing Similar Components: I referenced how announcement-type components are done on other platforms under the Paramount brand to draw inspiration.
Audit of Current Site: I looked at the current 247Sports site to visualize how the announcement bar would fit into the website. I noticed that lot of elements competing for attention (headliner, rankings, news, ads, etc.) — I knew a challenge for me would be to an announcement bar that draws the users attention, but isn't too overwhelming and maintains a clear visual hierarchy.
Paramount Streaming uses the color red to show any stream that is currently live, so a big decision was whether this new component should aim to be consistent with the greater brand or its internal design system.
I mocked up a red and green announcement bar to see how the colors would look with the rest of the components.
Even though red is used to indicate a live stream for other Paramount products, red was inconsistent with other call-to-actions elements (like the 'Join Us'), felt out of place with the rest of the site, and ultimately inconsistent with the 247Sports Design Systems colors. We decided to go with the green.
1. Labels: Being mindful of the width of the announcement bar, should the labels be long form ("Breaking News") or short form ("Breaking")?
2. Icons: Would icons help draw more attention or would it feel out of place compared to the rest of the site?
I mocked up the different combinations of labels and icons to compare on both web and mobile.
After discussing with the PM and engineer, we decided that we would go with Short Labels, which best suits the space and layout of the announcement bar, and No Icons, except for a blinking dot for 'Live,' which felt most consistent with the rest of the 247Sports website.
My designs of the new announcement bar component were approved by the design team and the product team. The announcement bar is forecasted to launch on mobile and web platforms by end of 2022.
1. Thinking beyond the brief.
Briefs are great for scoping out what the goals and constraints are, but there will often be some ambiguity and decisions that we need to make. I found it valuable to approach even a well-defined brief with the same problem-solving mentality as I would for an open-ended project.
The PM and engineer I worked with were really open to the questions I asked, and I'm grateful for their encouragement and for giving me the confidence to propose new ideas.
2. Define the visual hierarchy and design accordingly.
Sports pages are not intended to be minimalistic. There is a lot of information — sports categories, different teams, breaking news, rankings, predictions, and much more.
Understanding how the announcement bar fits into the visual hierarchy of the 247Sports site is critical to ensuring users interact with it the way we intended. This was reflected in the location of the announcement bars, its visual treatment, and the final colors we selected.
Huge shout out to Catherine, my manager, and Luke, the VP of Design at CBS Sports, who saw this opportunity and thought of me. Thank you for trusting me with this project! :)