Hero Foundation
Hero Foundation
.png)
A landing page for Employment Hero's brand new philanthropic arm, Hero Foundation. The challenge: to create a page that is still truly Employment Hero, but caters to a completely different demographic than its usual business-to-business (B2B) customer base.
I worked with the General Manager of Hero Foundation to truly understand who they help and empower. We needed to have imagery that is authentic, inclusive, and represents marginalised people looking for meaningful work. The limitation: we could only grab imagery from stock websites.
Vector Illustrations
UI/UX Design
Web Development
Art Direction
Home Page
.png)
Stock imagery that doesn't look like stock?
Hero Foundation's mission is to take down the barriers to finding employment. It uses Employment Hero's tech to centralise the job search, present talented people at scale, and eventually facilitate more people working flexibly and remotely.
I was deliberate in finding images that reflect the reality of who Hero Foundation is trying to reach. Images that are authentic, with natural lighting, and not overly staged. Alongside Employment Hero's cheerful brand flourishes, the page portrays a whole different image compared to Employment Hero's software-centric pages.
Custom CSS: displaying content beyond what the off-the-shelf CMS can do.
If you look at other Employment Hero pages, you'll see the Hero Foundation has unique blocks that don't exist anywhere else. As part of being a unique part of the Employment Hero brand, I used custom CSS to build blocks that display 'floating' brand flourishes throughout the page. You can see these around the mission statement and pull quote blocks. This required writing my own code and rigorous testing to ensure responsiveness in all viewports.