Flow Communications

Over the past year, Flow Communications has worked closely with social change organisation Heartlines on projects ranging from webinars to social media campaigns. The latest project was the most ambitious yet – collating all the amazing work this non-profit entity does into a multisite structure and then building a new, dynamic website to give it the impactful shop window it deserves.

Heartlines’ work and scope have expanded dramatically since its inception as the Centre for Values Promotion in 2002, spearheaded by Soul City pioneer Dr Garth Japhet.

A champion of encouraging social and behavioural change by entrenching positive values, Heartlines has several projects and activities on the go at any given time. These range from facilitating workshops using story-sharing to producing award-winning films and running values-driven campaigns. To cover all the many strings to the Heartlines bow, the organisation ran several websites.

Flow set about creating a single multisite website architecture to house all of Heartlines’ digital content. After that was done, we went to work to revamp the Heartlines main website, too. We knew we had to showcase the organisation’s diverse projects and offerings in an easy-to-navigate but compelling way, complete with e-commerce functionality to sell booklets and other resources.

Screenshot 2021 06 30 at 10 58 33
Heartlines' projects have been consolidated into a single design system while allowing each individual brand to shine independently. (Image: Heartlines)

More than the sum of its parts

Says Flow head of digital Richard Frank, “The Heartlines project was an exciting challenge for the development team. Following a discovery and research phase, Heartlines eagerly accepted our recommendation to consolidate the organisation’s digital output into one centralised offering: www.heartlines.org.za.”

He adds, “We decided on a consolidated design system that would serve all brands – from Fathers Matter to What’s Your Story? – while allowing for the individual project brands to shine through. We also developed a consolidated data structure that covered the main areas of work for current as well as future projects.”

The development team chose Craft CMS as the content management system for its multisite support as well as its strong commerce module, Craft Commerce. The flexible publishing component gives administrators a “one-stop shop” to add content.

Heartlines is a catalyst for positive social change using the power of storytelling, and therefore it stood to reason that its own website should tell a story – the Heartlines story, the story of the positive difference it makes, and the story of its vision of a cohesive South Africa underpinned by tolerance and understanding.

Flow creative strategist Janet Berger set the ball rolling for the look and feel of the new site, as well as the tone of the content. “Heartlines is a visual brand with a focus on real people. They speak authentically, empathetically and engagingly. They are problem-solvers. They are optimistic and uplifting. They listen and do not seek to dictate, rather to guide.”

Screenshot 2021 06 30 at 11 01 10
People and storytelling are at the heart of the Heartlines ethos, and this had to shine through in the website elements. (Image: Heartlines)

Real projects, real people

It was vital that the website holistically conveys the sense of warmth, authenticity and positive action for which Heartlines is known, while also reflecting South Africa in all its diversity. As such, the content was refreshed and images were chosen to anchor the website’s visual identity with real people engaging, listening and interacting.

Says Flow designer Cara Wares, “For the Heartlines main website, the objective was to create an easy-to-navigate, consistent, fresh, clean website that can evolve and grow with time as content is added. We did this by adding a contemporary feel and a sense of belonging and understanding for the user.

“By incorporating hand-drawn illustrations with a whiteboard feel, we gave a sense of learning to the infographics that describe how Heartlines works and what it is about,” she says.

Flow also created an easy-to-use main navigation feature, so that users can find information or projects without getting lost, by using breadcrumbs – a secondary navigation aid – on inside pages and dropdowns for the main subpages.

Screenshot 2021 06 30 at 10 59 56
Hand-drawn illustrations were used as graphic explainers of what Heartlines does. (Image: Heartlines)

Cara adds, “The website content and design help to build trust, credibility and belief in Heartlines. The user can quickly understand what Heartlines is all about from the home landing page. We believe this all helps to build Heartlines as an influential voice in the social justice space.”

It was a long journey but, says Nevelia Moloi of Heartlines, “I appreciated the way that Richard and the development and design teams took a very complex set of projects and sub-sites, and helped us work out a site architecture that was very easy and consistent for the user to navigate.”

Richard says it was “an honour” to work with the Heartlines team, “who put their faith in us to deliver. It was wonderful working with great people and great content, as Heartlines is known for its amazing films – have you seen Beyond the River? – but we also managed, through carefully considered UX [user experience] design, to bring to the fore the rich educational resources and courses that Heartlines provides.”

comments powered by Disqus
Visit South Africa's official Covid-19 resource portal