While “human resources” was once synonymous with hiring, firing, and staff complaints, the term is now far more wide-reaching. These days, it also encompasses aspects like employee engagement, workplace wellness, and leadership initiatives.
As the role of the HR department has evolved, it’s also become more transparent. Now, many organizations have their own HR blogs, where they not only share the achievements of their company, but also tips and resources for the general public.
A compelling HR blog can improve brand perception, attract and retain top-notch talent, and push your company forward as an industry thought leader. But in order to do so, it’s got to be visually appealing, user-friendly, and consistent with the rest of your brand.
Read on to explore five examples of effective HR blog design, and how you can incorporate similar key visual elements into your own site:
You can use Setka Editor to create beautiful websites and articles for your HR blog. Learn more here.
1. Airbnb’s Engineering and Data Science Blog
Online home rental marketplace Airbnb is famously one of the few large global organisations that doesn’t have an HR department. Instead, they have an employee engagement team, whose work focuses on fostering company-wide camaraderie and cohesion within smaller teams. It’s hardly surprising, then, that Airbnb has dedicated blogs for various departments, one being Engineering and Data Science. The publication highlights the important data insights being unearthed by the company, and opens them up as a resource for all to read.
Airbnb’s Engineering and Data Science blog is hosted on Medium, an open blogging platform used by both individuals and organizations. However, this hasn’t prevented the brand from putting their own visual stamp on their resource hub by using unique design elements throughout their content. This includes:
“
Our mission is to connect people across cultures and continents, so our illustrations have to reflect the community we’re bringing together. Our aim is to broaden our worldview, uplevel our authenticity, and continue building trust with our global community, and we can do this by building an illustration team that sings Airbnb’s mission of belonging.
— Jennifer Hom, Experience Design Manager of Product Illustration at Airbnb
Illustrations
Eye-catching illustrations of people are often used to break up chunks of text in Airbnb’s Engineering and Data Science blog posts — a welcome change from the stock imagery we’re used to seeing. And while there’s no doubt that this is a powerful aesthetic decision, it’s also one that reflects one of Airbnb’s key values: diversity.
These visuals encompass a range of races, ages, and genders, and according to the company, this is no accident.
Infographics
Airbnb also frequently uses infographics throughout the articles on their blog. From pie graphs to flow charts, these serve the important purpose of making often complex information more accessible and easy to understand.
They also often use video snippets giving walk-throughs to demonstrate the processes they’re referring to in action. All of these visual elements work to hold a reader’s attention for as long as possible.
2. Uber’s Design Blog
Uber is another innovative company using a blog to showcase the accomplishments of one of their key departments — their design team (as well as their engineering team). The ride-sharing app’s design blog is appropriately sleek and user-friendly. It mimics the monochrome and minimalistic aesthetic associated with the Uber app, but still makes an impact by thinking outside the confines of static design.
“Uber wanted to foster design thinking, attract talent and show off the amazing work of its design team,”says the blog’s developer, Elliot Kember of Ueno. “Building this site was a great chance to showcase our animation skills and bring movement to Uber’s beautiful artwork, mixing attractive layouts with responsive techniques and smooth transition.” Some visual elements they used include:
address
uber.design
Video
The first thing you see when you land on the Uber Design blog is a video featuring an overlay of the brand’s logo. As an eye-catching focal point on the homepage, this immediately draws the viewer in and directs them to an article about Uber’s 2018 redesign. This is a wise design choice, as research shows that users spend 88% more time on websites that feature video.
Animation
Subtle animation has also been used to create add extra visual interest. From the slight ‘zoom in’ effect when you hover over images to the sliding animations and parallax scrolling within the redesign article, all of these elements are a conscious design choice to entice the reader to click and keep reading.
Varying grid layouts
While using a grid layout on your blog can give it a neat appearance, it can look quite bland and homogenous if there’s minimal variation. The Uber Design blog breaks through the monotony by occasionally using images of different dimensions, to ensure the grid layout isn’t perfectly even. At the bottom of the page, they have also split the footer into a black and white section to draw attention to the two different calls to action — joining their mailing list and following their social media channels.
3. Bloomberg’s Diversity and Inclusion Blog
Bloomberg’s Diversity and Inclusion Blog serves two clear purposes — to attract and retain diverse employees, and to highlight the remarkable work the news company does to encourage workplace inclusivity. “We believe that diversity is a driver of innovation and creativity… [and] it connects us to our customers, who also seek diversity,” says Erika Irish Brown, Global Head of Diversity. Their blog is a sophisticated hub for the organization’s content marketing efforts, where they share thought leadership and highlight company initiatives. Some ways they do this is through:
Clever navigation
Bloomberg has created individual pages to showcase the various initiatives they’re involved in, from inclusive culture to business innovation. As well as including these pages in the navigation menu in their header, they’ve also included another creative slide-out menu further down the homepage. When you hover over the headings with purple arrows, a brief description of the initiative pops up, but users can also click on the headings to navigate to the page about this initiative. While conventional advice says you should keep your website navigation stark and simple, this is an example of repetition used effectively to direct the reader to pages of particular importance.
Sliders with milestones
Bloomberg has also used animated elements to draw attention to another important section on their blog — their milestones. This time, it’s in the form of a slider that both automatically displays the various points, and also allows users to click through them. This is a clever way to break information into small, digestible chunks that the reader will more easily be able to absorb.
4. The O.C. Tanner Blog
O.C. Tanner is a global organization that creates products to reward company achievements and milestones. So it’s fitting that they have their own HR blog, filled with practical resources on fostering a positive company culture, boosting employee engagement, building leadership skills and more. The blog was previously called A Magazine, before undergoing a rebranding in 2017 to mark the company’s 90th anniversary. The result was a clean, modern interface, with a few stand-out elements that set them apart from their peers:
address
octanner.com/insights
Striking use of color
While most logos stick to one or two focal colors, O.C. Tanner’s is unusual in that it uses five, giving it an almost kaleidoscopic quality. Keeping the consistency with their overall visual brand, this is something that can be seen throughout their new and improved blog. The feed of blog posts is regularly broken up with alternating, rectangular tiles in each of the brand’s colors — green, pink, blue, yellow, and orange. Colored gradients have also been placed over certain cover images, further adding to this eye-catching effect.
Geometric shapes
Geometric shapes are another effective visual element seen here. Combined with a multi-colored gradient effect, this has been placed over the company’s webinars to help this key offering stand out amongst other content and blog posts. This modern design staple can also be seen in the abstract patterns that have been layered over some of the blog’s landscape cover images.
5. Namely Blog
Namely is an all-in-one HR platform, offering payroll, intranet, and task management capabilities. Their wider mission is removing the stigma around human resources and shifting its perception from what they call a “complaint department” to a resource that exists to enrich the lives of an organization’s employees. This mission is reflected in their publication, which covers HR news, workplace trends, actionable tips, and more. They’ve created an elegant and easy-to-navigate blog by incorporating the following visual elements:
address
blog.namely.com
Bold tones
Overall, Namely keeps its blog design simple and minimalistic. However, it uses a vibrant blue shade throughout the layout to add pops of color and to take the reader on a visual journey through the website. You’ll notice that this color is first used to draw attention to the navigational elements in the top header, then to guide them through the various sections on the homepage and finally, to prompt them to sign up to their newsletter. This is likely a conscious choice employed to keep the reader on the page for longer, by encouraging a certain navigation path.
The rule of thirds
Research shows that the human brain seeks out patterns and Namely has used this to their advantage in their blog layout. They’ve employed the rule of thirds throughout their blog grid, creating a three column layout of blog posts followed by one singular article, and so forth. The individual pages on their website also follow a similar pattern — three featured articles organized horizontally, then three articles stacked vertically per section. This visual hierarchy works to direct the reader’s gaze in a favorable pattern.
