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.