UX Case Study - HCL Blogs | ProCreator UX Design Studio

HCL Blogs

HCL blog is the blogging website for the global technology company - HCL technologies. It hosts blogs across 25+ HCL products. Every product team within HCL uses this website to draft and publish blogs on a regular basis.

Multi-site blog for 25+ products

The Challenge

The HCL team required a single blog for writing and showcasing articles from across 25+ products.

There was a need for a user facing frontend site, as well as a backend CMS where authors could draft blogs and POs (Product Owners) could review and publish blogs.

The website needed to have a seamless mobile experience as a significant percentage of their users access content on the go.

Our Solution

A multi-site architecture is created such that the blog has a single landing page showcasing articles across products and every HCL product has their own landing page too.

The design and experience for the blog is constantly updated and enhanced iteratively to help use the blog as a means for marketing. The WordPress CMS has various custom pages created which help the site admins keep the site content updated.

Mobile and tablet responsive screens were created along with the web designs to provide a seamless experience across devices.

Our Process

We understood the requirements and concluded on the need for HCL to have a single platform to create and maintain their blog across products.

We designed the blog such that each page could serve as a template and be re-used across products. While designing we considered all possible scenarios across products and designed keeping edge case in mind such that the blog would have a consistent look and feel.

We adopted the HCL brand guidelines and designed modern re-usable components such as blog cards and banners for multiple pages across the website.

The entire website has been developed using WordPress. We developed various custom pages in the WordPress backend for site administrators and authors to be able to maintain and update the blog with ease.

Typography

Gotham

Gotham is a geometric sans-serif typeface and the brand font of HCL. As mandated by their Brand Guidelines, we were to adhere to the font.

Colours

Homepage

Landing page for blog showcasing featured articles, latest articles, popular articles and editors’ pick across products.

Author Page

Every author on the blog has their own author page which contains information about the author’s professional background, expertise, and the list of their posts.

Subscribe Page

Readers can subscribe to weekly updates about latest blogs published throughout the week. The subscription page captures the reader’s personal details and product interests.

Individual Blog

Consists of the blog title, featured image, and blog itself. Blog category, tags, author details are also visible to the user. The user can write a comment on the blog and submit it.

Search

The blog consists of a search functionality wherein readers can search for a blog post. They can do this either by the title or author name, and also filter the search results by products.