hsbc-headerhsbc-header

 

Modernizing workplace learning

After building dozens of bespoke bluechip training platforms I lead the design of a system that allowed internal teams and facilitators to efficiently build custom training portals for
their workforce. 

The system has become a B2B product for a top global consultancy and is currently used by a wide range of companies including HSBC, BP & The UK Government.

 

Front & Back-2Front & Back-2

Snapping knowledge

The platforms are comprised of a masonry interface leading to modular content pages and custom content. 

Initial research showed that users wanted a more consistent experience, mobile functionality, and richer media. They wanted to learn in their own time, at their own pace. Facilitators wanted a balance between editability and simplicity, without sacrificing quality. 

Working with subject matter experts and content strategists, we defined several essential components that could be snapped together and edited.

componentscomponents

Getting from A to B

Research showed that users fall into 3 categories. Those using the search bar to find a specific detail (searchers), those browsing generally (browsers), and those who want to follow a specific topic (researchers).

We split the navigation into 3 tiers to cater to each user. For the searchers, we created a smart search, which would reach into the page taxonomy and deliver answers straight to the homepage. For browsers, we ensured that the entire curriculum was clearly shown on the front page, with all topics one link deep. For the researchers, we created collections of featured content that would allow custom or event-driven categorization over the more static curriculum.

mobilemobile

Splitting the brand

We worked with internal design teams to create subbrands, which would help distinguish the software to users who were becoming disengaged to a visual language they see every day. We replaced stock imagery with emotive, real-world photography. 

imagesimages
brandcolorsbrandcolors

Whitelabeling

footer-whitelabelfooter-whitelabel