Built to Last: An Evaluation of The BBC’s GEL Design System.
Built to Last: An Evaluation of The BBC’s GEL Design System.
When you think of big Media…
BBC probably comes to mind. One of the oldest established media companies in the world, the BBC has covered some of the worlds most important moments and broadcasted some great original television. (Any Luther fans?)
What you might also think when big media comes up in conversation is the lack of innovation or progress. This isn’t exactly the case for the BBC. They may still have a long ways to go, but their GEL Design system is a step in the right direction. When you get a large portfolio of products and properties, continuity is essential, and that is what GEL aims to accomplish.
In this article, I’m going to audit their design system and see how the BBC plans on unifying their product portfolio.
Home Page
GELs organized into three sections. Home, guidelines, and articles. This is a minimalist tweak for their old GEl site. On the home page, there is a card layout with a what I believe to be the 20% of the most important information when designing digital experiences for the BBC. Things like Typography, how to react to content, how to set up the grid and how to share content are the featured guidelines. Why? Because the core focus of the news, no matter how many videos or cool javascript animations are slapped n the site, is to inform the public.
Typography is front and center because the content needs to be readable, reactions need to be standardized because the conversation is online, the grid needs to be constant to maintain a consistent look and feel to the message, and share tools need to be standardized to syndicate the news. Those guidelines are the foundation of good online journalism.
There is a few title card along with the whats GEL? A card as well, the “Never let wonder go to waste” card is there to emphasize the need to research before designing anything. The ABC’s of motion is to remind designers to be intentional when using animations. This front page is good bare bones UX, note that t doesn’t say anything about making things “pretty”.
Below is a slider that demonstrates their design principles. This s here to have a nice visual way to quickly skim through what the design team s trying to accomplish at BBC. This better than a list or article because it is interactive, and allows the visitor to explore the principles rather than read them.
Als, think their what we are doing and what we are reading sections a proper marketing tools. They stay involved with the design community and we also see what content they are writing and consuming writing and reading show thought process and what they prioritize, which builds credibly.
The Rules of the Game
Guidelines has its own three sections. Foundations, Patterns, and How-Tos. The foundations cover all the nitty gritty details like layout and iconography. BBC s smart, because there isn’t an executive lists of foundational guidelines. They have the main sandbox to let their designers work in and from there its up to their creativity. The design patterns are the component of designs. They come with a sketch file downloads and an explanation for the reasons behind the layout.
When you click on a design asset, you get a floating nav in the left sidebar that helps you navigate to Contents, Overview, How it works, Rules and variations of the design component. When designing this reference they make it easy to navigate to where you need to go. People may complain that documentation has o much content, but if they think that, they are missing the purpose of the documentation. It is a reference site and you shouldn’t be consuming everything in it.
T s a resource to answer just-in-time questions for designer n there projects. So if w anted to see how navigation looks on the BBC app I would filter by apps,click on side drawer menu, and click on rules to get an idea what I can or can not do when designing an app. Note that the actual section can’t be more than around 500words. That is not a lot of content f you ask the right questions.
Living Document
Having a written manual will only get you so far. The article section’s purpose is to continually expound upon the established design principles as questions and ideas rise up.
Thought leadership, or the use of writing to convey expertise, is a powerful content marketing tool, it also keeps the style guide fresh with new ideas and perspectives. A backlog of fresh content to clarify use cases of the design components and philosophies makes the site a living document, that can always be returned to no matter how familiar you are with the design principles.
Conclusion
This is a clean documentation. All I can say is the design is made up of three components.
An 80/20 principle application on their home page of key design guidelines and philosophies.
Cover all their bases by having components and guidelines for common design modules. Stuff like share buttons and iconography.
Thought leadership articles to build up credibility and build upon the already established guidelines.
It makes me think of the science class example of filtering water through sand and rocks. The teacher has a funnel filled with big rocks, medium sized pebbles, and sand. When dirty water is poured through the funnel the water surprisingly comes out a little cleaner.
Water, like creative energy, is raw and undrinkable as much as great ideas are unusable. Unless the water is filtered or regulated in the case of creative pursuits, there is no progress.
What makes an in-depth style guide so critical to creating powerful experiences is its ability to filter out the designers ideas. It takes off the table all the most used components from customization and focuses the designer’s attention on the users and their needs.
A designer shouldn’t have to think about what components they need to design, it distracts them from their purpose to delight users. A style guide places healthy constraints on the creative process so the designer can focus on the experience.
Originally published at CadenD Studios.