Greenheart Exchange

Since 1985, Greenheart Exchange has offered cultural exchange programs in the U.S. that connect Americans with international students.

Greenheart Exchange
Project Overview

Compassionate and Conscious

As the leading nonprofit cultural exchange sponsor that blends service learning and volunteerism into all of our programs, Greenheart Exchange are effectively creating a community of compassionate and conscious global citizens.

Greenheart International is a long-term client of Q Studio, we have worked together for over 10 years on web projects and the strength of that relationship enabled Greenheart to feel comfortable to engage us to work on not just the Exchange rebuild, but also a total overhaul of their entire suite of client facing web projects.

A Big Problem

Greenheart Exchange had a problem, a sizeable problem, to say the least – they had outgrown their current website, not just by a bit, but to the point where things were straining at the seams.

Built by committee, extended re-actively to meet new requirements, patched together technically and lacking a clear visual direction, their current website worked in very specific use-cases, but fell badly short of requirements in most others.

It was time to strip things back to basics and take on the enormous task of auditing, re-organising and pruning back the expansive content gathered over the years, rather like cobwebs in an empty home, a serious data-spring-clean was required.

We needed to provide the Exchange Team with a save-space to step back from meeting their day-to-day requirements of their participants and stakeholders and to encourage them to make an honest appraisal, to note down the good and bad of their current system and then to dare to dream about a totally re-envisioned version, designed from scratch, to meet both their current and also future requirements.

Luckily Greenheart bought in from the start, and dedicated one staff member full-time from the get-go, allowing us to plan a robust and complete conceptualization process to get the ball rolling on this sizeable project.

Read the Analysis below to find out what steps we took and techniques were applied to meet the needs of this complex and data-intensive web application.

Analysis

In order to arrive at a concept, it is imperative to fully understand the core needs and resources available – resources can be time, money, enthusiasm or any other measurable value that will have an influence on the outcome of the project.

Greenheart already had a clear budget, timeline and resource investment in mind before approaching Q Studio and they were all realistic, giving enough scope to plan each required step carefully and to invest time wisely, in the key phases – good planning always pays for itself.

The data audit required was immense and took weeks to get into shape, touching nearly all stakeholders – Greenheart understood that an incomplete audit is about as useful as a case sensitive search engine – they were as keen as us to understand where they data came from, is stored, is consumed and, most important which parts were redundant and could safely be archived or removed.

Greenheart Exchange ( formally CCI Exchange ) had been housing its data along with the other Greenheart Branches on a single web platform, but this was now overwhelmed, underperforming and teetering on the edge of being unmaneagle – they needed to break-free to their own platform to be able to deal directly with their own specific requirements.

Once the data and requirements had been defined in the conceptual phase, it was time to do some mental juggling and try to envisage how all the proposed pieces of this new jigsaw might fit together – or not.

Shaping is where we try to identify theoretical pain-points before they become expensive – or insecure – real problems – before our designers have opened up their UI software and well before our developers have started to imagine graceful solutions to the technical requirements.

We get to be creative in simple ways, sketching out ideas on recycled paper, taking on different roles, imagining friction points or inpasses, looking at things from the end-user point of view – anything that broadens our view of the various tasks ahead and gives us a deeper insight into how we can simplify and streamline the stated goals. Less is More.

Given the generous amount of time-budget allocated to conceptualization, discovery and shaping – we were able to provide a beautifully scoped, but sizable, project brief to our design team – including full examples of content, assets, proto-typed features and details of demographics and use-cases – it was as close to a complete project preparation as anyone might hope for.

Designated committees were established for design reviews to ensure that the input of all stakeholders was taken into account, while this proved to be a slow process due to the broad demographic providing feedback, the end results were accepted as a good compromise of the many differing views.

As ever, we used the excellent Invision App for both prototyping and concept presentation, the ability to present in various formats, including inline commenting allowed us to gather a vast amount of contextually relevant feedback while offering an excellent UX to those reviewing.

It was decided to produce dedicated device designs, rather than a single responsive one, this added to the overall budget, but did allow for granular control over the UI, which was very important mostly due to the major demographic divide – most participants were young adults, more likely to view and apply for programs via mobile devices, where as the field-staff and Greenheart staff were more likely to edit content and applications via a browser.

You can see some of the final designs in the gallery above or visit the website to see it in action.

Knowing the level of complexity and projected length of this project, it was important to get a head-start on certain high-level technical aspects before the visual concepts were sign-off and ready – given the headless nature of APIs and data integrations, it was clear where our development team could get started.

Greenheart Exchange were investing far too many people hours in data management, they clearly needed bespoke tools to make this process simpler and more reliable, so Q Studio scoped the requirements for several new APIs at a very early stage in the process flow – enabling the development team to get down to work on creating a custom extension to the WordPress REST API to provide a stable and accountable data flow between both SalesForce and a custom CRM.

Thanks to the carefully scoped project requirements, our development team was also able to start work easily on the base aspects of the dedicated WordPress plugins and themes, which would form the backbone of the new application.

We use private github repositories for each plugin or theme, as well as a main repository for the application itself, enabling us to include each plugin or theme repo as a sub-module – we use the handy GitHub Updater plugin to deploy updates on staging installs before deploying validated updates to production.

Once all the designs had final topl-level approval, our development team applied final touches to the templates and handed over to the UI team to do their magic and bring the skeletons to life with color and movement – all made easier thank to Zeplin, of course đŸ™‚

Planned support starts before the first issue is reported – by putting in place a solid system to receive, allocate and track requests from inception to completion.

Q Studio provides full technical support to Greenheart Exchange on all the systems we built, along with running planned maintenance and upgrades to both WordPress and other 3rd party tools – as well as uptime monitoring and server support.

But, the key to support is not between ourselves and our client, it is between the client and their own clients – the users of the application.

Q Studio provides in-depth training along with documentation on all the tools that we provide, including on WordPress itself, if requested – a support representative is much more effective and confident when they are well-versed in the workings of the tools they are tasked with using and understanding how things work on a conceptual level is key to that.

APIs are harder to support in a human sense, they are subject to many influences and often invisible to the untrained eye, but in order to increase the visibility and better inform Greenheart staff about the processes ( successful or not ) that the API undertakes, Q Studio created dedicated logging tools and scheduled checks to try to give a face to the endless grind in the dark, such is the life of an API.


Comments

No comments on this article yet.

Add a Comment

Your email address will not be published. Required fields are marked *

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

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

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 is a Logic~less Template Engine built for WordPress and Advanced Custom Fields.


Releases: View All or