Greenheart International, USA

Greenheart is a leader in cultural exchange and fair trade ~ connecting thousands of people around the world through travel and ethical shopping.

Greenheart International, USA

Greenheart is a leader in cultural exchange and fair trade, connecting thousands of people around the world through travel and ethical shopping.

Greenheart International, is also a 501(c)(3) non-profit organization committed to connecting people and planet to create a more peaceful and sustainable global community.

Greenheart trusts Q Studio and we trust them – and that mutual trust builds confidence which is very liberating both in a creative sense and also in a getting-stuff-done sense.

Once the ground-rules had been defined, thru careful discovery and conceptualization phases, we were free to glide into the creative process, knowing we would be met by a receptive and open-minded client, when it’s time to present our ideas.

If you have looked at more of , you will see that Greenheart is a major client, we have completed more than 10 large projects for them over the years.

These projects range from working on-site in an office made from recycled glass bottles in order to help centralize the message of their ecological charity, based in Ibiza, Spain, to working on a total rebuild of their 3 major commercial applications – Travel, Exchange and this project – the global portal, which also includes a custom-built social network, bringing together 10’s of thousands of participants and stakeholders – the Greenheart Club.

Greenheart International, via its domestic and international branches Greenheart Exchange and Greenheart Travel has assisted more than 250,000 participants to  have life-changing cultural exchange experiences, both within the United States and all around the world.

But, Greenheart also understands that it’s not always possible for everyone to have these life-changing opportunities directly, so this made it even more important to empower returning participants to share their newfound knowledge, experiences and life skills with their friends and piers.

The Greenheart Club was produced with several key objectives – and was designed with both Greenheart alumni and the general public in mind:

  • Allow current and alumni participants to connect, share stories and inspire others.
  • Allow members to log volunteer hours activity, which forms a core requirement of some Greenheart programs.
  • Provide public facing profiles, showing achievements and activity, which members can use for job and grant applications.
  • Host an in-house developed LMS system, which again forms a key part of some programs.
  • Create networking tools, share news and provide communication features, core requirements to ensure the community was active and well-used.

Essentially, the Club is a hand-built social network, designed to maintain and grow the connections between Greenheart participants and to encourage them to continue spreading their knowledge and experiences.

It was decided that we would start with the main Greenheart.org portal first, before applying the same technological base to the Travel and Exchange projects – this included a ground-up, total rebuild of our main framework and templating systems to ensure we can could meet the diverse and demanding requirements expected to complete all 3 projects.

It was also decided to build the main Greenheart / Club project on a Multisite install of WordPress, to give fine-grain control over functional display and user data, while sharing UI and features via common plugins – for an in-depth analysis of this large-scale project, read on below.

Project Overview
Read the Project Review
Add your Comments
View the Website
Delve into a Deep Analysis
Browse the Gallery

Analysis

The conceptualization phase for this project was clearly going to be large, as it was essentially two large projects bridged together by some shared features, and it was also the planned start of a three large projects in total, so we needed to step back and try to take as broader view of the things in-front of us as possible.

Greenheart has a very diverse demographic to cater for, from teenage participants looking for cultural programs, from parents hoping to find trustworthy information about host families, to government agencies wishing to validate their non-profit status, to CEO’s of global companies wanting to donate to continue their good work.

The requirements was to find a presentation format, tone and visual language that would appeal to such a broad range of audiences – hip enough for the youths, serious enough for their parents, respectable enough for governments and trustworthy for donors – a fine balancing act, indeed!

Once we had identified all the targets audiences and collated and ordered all the top level content requirements for the public-facing site, we then needed to dig into the requirements for the Club.

The idea for the Club came from the realisation that Greenheart could facilitate their participants to share their experience with others while also housing and controlling both the experience but also the privacy and integrity of their user data, in some cases including minors.

There was no shortage of ideas for features, but it was agreed early that we would select the core features, then plan and build them to a very high quality, rather than diluting the experience with several poorly design tools – we did use some off-the-shelf plugins, mostly notably AnsPress for the discussion forums, which provided a StackOverflow-esque experience.

Our design team knew that they were in for a job when they first heard about this project, 2 unique, but visually related themes, both with dedicated desktop, mobile and tablet layouts.

But, given a clear brief and the right tools, the road ahead was clear for our design team to lay down a visual framework, quickly develop prototypes for testing interactive features and to leverage UI pre-built features from the libraries that our development team would include – such as Bootstrap.

Our design team started on a handful of selected themes which would cover most UI features, handheld devices first, then on for larger displays – we reviewed these early with Greenheart to get feedback and guidance and each time we were able to produce more concepts for review, until finally having a complete set of designs for both applications, covering all screen sizes.

The design and review process was long, but went without any major hitches – at the same time as designs were being completed, the content was written up and our development team was able to make some broad strokes on the template preparation, with the low-risk aim of speeding up things once full design approval came.

We used InvisionApp for both prototyping and design presentation, making full use of both tools to speed up and cost-save and also to collate feedback in a very handy and contextually relevant way.

As with all large-scale projects, our development team knew that they needed to make a head-start on as many pieces of the puzzle as possible, to ensure that UI work could start as soon as visual designs received final approval.

During the shaping phase, we identified the “headless” technological sections which had fully documented requirements – including a REST API and several other internal data integrations which could be started prior to any design discussions.

Another requirement was to run reports on user data stored inside the Club with multiple data points and export formats, the end result of this requirement became the foundation for a popular Export User Data tool we released to the WordPress community several years ago.

Another complex requirement was the development of a bespoke LMS to enable all Club members to complete  the Pachamama “Awakening the Dreamer” symposium, which formed a required component of many exchange programs.

The symposium is composed of multiple ordered steps, users are invited to watch instructional videos, provide feedback and to track their progress over the course via notes and other interactive features – all user data is collated for inclusion in exports and users are attributed rewards via visual badges and reputation points, which are displayed clearly on their public profiles.

 

The content on the public-facing International site rotated infrequently, some new posts, jobs and events could be added easily via admin controls, but their format and content was clearly defined, presenting few potential technical support issues.

The Club, however, has very high support needs, due to having 10’s of thousands of members, from a broad demographic range, both in terms of age and also native language.

While the core system has few bugs, even several years after launch, the support requirements are more UX related, language issues, miss-conceptions and also more technical, in terms of report building and data management, both from Greenheart staff and also field staff.

Greenheart worked with us to identify key pain-points and invested in up-scaling internal tracking and reporting tools to address many of the core, repeated issues, such as missing documentation and blind-spots in API integrations – and those investments paid off in terms of reducing daily staff hours on support requests and improved metrics.


Comments

No comments on this article yet.

Add a Comment

Your email address will not be published.

These HTML tags work: <a href=""> <code> <strong> <pre>


Connect:
OR

Our Services
Validate your ideas before diving in. Consultancy
Dig deep, audit your data, prepare for action Discovery
Get everything in shape to smooth the project path. Shaping
Let us help you realize your imagination Design
Rock-solid WordPress tools, built to last. Development
Without water, the garden will not grow. Support


Projects
Quinta de Sant’Ana, Portugal
Quinta de Sant’Ana, Portugal

Quinta de Sant'Ana overlooks the picturesque village of Gradil with its cobbled streets, white washed houses and hospitable inhabitants.


Projects: View All or
Releases
Willow
Willow

Willow is a Logic~less Template Engine built for WordPress. Willow plays nicely with ACF, is quick to learn and developer-focused.


Releases: View All or