Case Study: BSR HERproject Impact Portal

A Web-based Tool for Changing Women’s Lives

BSR is a global nonprofit organization that coordinates and collaborates with a network of more than 250 member companies with the goal of building a more just and sustainable world. From its offices in Asia, Europe, and North America, BSR sets lofty goals and develops sustainable business strategies and solutions to achieve them, informed by consulting, research, and cross-sector collaboration.

The mission of BSR’s HERproject initiative is to recruit low-income women for positions in the global supply chain and once recruited, help them to flourish in these economically advantageous positions. The BSR global workplace-based programs offer women tools and information needed to improve their lives and their communities. BSR invests in these women not only to decrease their vulnerability, but also to empower them to ignite change locally through increased civic participation and business and governmental advocacy.

What BSR Needed

BSR approached Solspace with an idea to create a web-based tool that would enable international brand-name companies (Buyers), suppliers (workplaces), and NGOs (Partners) to effectively manage data related to a variety of programs directly serving women in workplaces around the world. This data management and reporting tool was to become the HERproject portal.

HERproject is composed of a series of programs that run for 12-18 months. Participants in each program, depending on their roles, create, maintain, update, submit and review various forms and reports throughout the program cycle. The HERproject portal facilitates informed management of this work by serving as a centralized, shared hub for documentation and reporting.

Challenges at the Onset

The ambitious nature of the project went beyond specs, budget and timeline; it was imperative that the portal be not only cost-effective to develop, but easy and inexpensive to maintain into the future. Additionally, Solspace was faced with a multiplicity of use cases that had to be addressed. The “end user” was actually a broad spectrum of participants around the world, using all kinds of devices in a variety of situations, online and offline. The solution needed to be flexible, stable and secure in order to meet the ongoing needs of the initiative and all of its participants. Finally, the tool had to be extremely user-friendly, as it would be used by individuals possessing varying degrees of technical savvy. The remote locations of many use cases guaranteed that data would often need to be captured offline on mobile devices and held for later synching with the project database. BSR also asked Solspace to take on a strategic expansion of the site’s capabilities by adding language compatibility for simplified Chinese text with automatic translation options and multi-language report options. The complexity of the requirements coupled with the need to economize dictated that Solspace begin by completing a rigorous research and planning process, followed by exhaustive conversations and careful setting of client expectations.

Reporting is the Heart of the Matter

Ultimately, the HERproject Portal project succeeds or fails on the strength and reliability of the reporting system. Critical to the project’s ongoing viability was the team’s ability to quantify and demonstrate the success of the mission in a compelling way to potential funders. This meant that meticulous, reliable data management and reporting functionality were high-priority, core deliverables. Data collection and management capabilities via tablet-based version of the tool (e.g. field survey), a system to accommodate multiple surveys (flexibility to add new question subsets), data aggregation (presented in the form of dashboards), and the ability to upload raw data to cloud/database were prioritized. Multimedia data sets included figures (quantitative; ROI data), text (qualitative), and photos. And finally, users needed to be classifiable as one of four groups: internal (BSR) and external (NGO, buyer, and workplace.)

In addition to creating and gathering data from surveys, the completed Portal enables the BSR team to create new reports using custom designed portal tools that allow them to add and retain editable sections within blocks of text. This means that any section that is structured as a separate discrete ‘textarea’ - usually a paragraph - may also be set as editable by users creating reports, which will then allow for ongoing updates right up until submission. Partners may also fill out and update instances of these reports, then finalize and submit them. When reports are submitted, a notification is sent to the BSR team for review and approval. Once approved, a notification is then sent to appropriate Buyers who may then review and download the completed reports.

Another fundamental component of the Portal is the way it promotes interaction with workplaces and facilitates data collection. Buyers submit workplaces into the BSR system for BSR approval and then connect the approved workplaces to Partner accounts. This enables Buyers and Partners to view and access the data connected to specific workplaces.

The Strength of a Solid Framework

Given the specific requirements and the custom nature of the data and user architecture, Solspace selected the Laravel 4 PHP framework to use as the base for the platform. The user interface was built on the Twitter Bootstrap HTML framework. Javascript functionality and dynamic page interactions were based on the AngularJS javascript framework. Using these three frameworks as starting points, Solspace knew the the quality of the HERproject Portal tool would be high, deployment quick, and flexibility inherent, while ensuring that build and maintenance costs would be kept to a minimum.

A Winning Strategy

With such complex challenges to address, the Solspace team aggressively looked at each element of the project to identify opportunities to simplify structure and functionality, with the goal of reducing risk and increasing stability. Coincidentally, Solspace had recently developed a web application for our own internal use, using the above-mentioned technology stack and containing much of the basic functionality. Because both the BSR and Solspace web applications had to manage multiple users with different roles and permissions, create/manage/share documents among users, and support upload and management of files by users, the Solspace team recognized that a great deal of time could be saved by repurposing code from the Solspace tool to build the new BSR HERproject Portal tool at a reduced cost.

Due to the complexity, and the need to manage the budget tightly (this was a grant-driven project with no additional funds available for overages) the project was broken into phases. Phasing the project allowed us to continuously adjust scope and project plan along the way, empowering the client to reprioritize as needed to ensure their budget was used as effectively and efficiently as possible. On the Solspace side, this meant consistent dedication to the painstaking work of scoping every single task, and then breaking the tasks down further into lists, and then working with the client to determine which items should be prioritized for Phase One, and which ones would be deferred to Phase Two or beyond, and then in which order they should be executed. Throughout, the process had to remain transparent, and the communication wide open and honest. It’s a difficult kind of process to manage, as the frequent re-ordering of deliverables can be frustrating, so having team members who are comfortable with this kind of fluid environment (and able to maintain a sense of humor about it) was also key to our success!

Delivering the Solution

The first task was to establish a Git repository on BSR’s Beanstalk account to allow for versioning, management and deployment of system files within a group development environment. Then Laravel 4, Twitter Bootstrap and the Javascript framework AngularJS were installed on the development server. The Database model for supporting ongoing site functions was established in the form of Laravel Migration files, and the developers utilized Laravel’s migration feature which allows forward progress as well as “rewind” changes to the database, usually introduced in new versions of the application. This is a command-line command, no installer/uninstaller script was created by the team.

The prioritized features were then built out. User registration/login/logout, secure password retrieval, and a system for managing user permissions and access established were created. Email notifications and triggers were added, hardcoded into the system as a cost-saving measure. The ability to upload raw data to cloud/database, and to download and print reports was coded. And most notably, the questionnaire that captured data from users was constructed, once consensus was reached about a compromise between flexibility and practicality.

The development team was happy to find that the decision to repurpose code from Solspace’s internal tool, Proposio, turned out to be a solid one, though it was almost completely torn down except for some base classes and low-level setup. This exercise really helped to strengthen and sharpen the Solspace team’s Laravel skills before stepping into the main part of the build.

The most challenging part of the project wasn’t the coding, but rather effective organization of the large quantity and variety of information, ensuring that every element stayed in its correct relationship with the others, and then translating that organized information into code that a computer can store and understand in a straightforward way. Establishing user profiles was mindbendingly difficult, as it involved a complex maze of member groups, each with its own detailed set of permissions and roles. Categorical syllogisms anyone? The relationship between questions, surveys, and reports and their fillable fields was also a challenge.

Given the complexity of the application, it was critical to consider not just the known use cases but also the borderline situations, or statistical outliers. Keeping all possibilities in mind when planning and developing allowed the dev team to create a more robust tool and lowered the risk of failure in the field.

Despite all of the brainstorming sessions where we considered exceptional use cases and worst-case scenarios, we still ran into unforeseen behaviors once the client started testing the application. The portal was initially built with a linear scenario in mind: a workplace was first created, then surveys were created, then filled out. Then, a report based on the survey data would be created and published. In practice, however, the client wanted to be able to skip the survey building and data collecting and go straight to report writing. This was particularly needed in cases where legacy survey data wasn’t available or in the system yet. Since reports were dependent on surveys, we had to make some modifications so that reports could be written even without any survey data.

In addition to all of the challenges, the project did offer opportunities for fun. One of the most enjoyable parts of the project for the dev team was using Laravel as the base PHP framework, as it was so easy to get started and really alleviated the difficulties of creating a complex application with multiple relationships between the data. The Laravel documentation is also excellent and easy to refer to.

The Solspace dev team ultimately felt they’d learned and grown a tremendous amount through the life of this project and we are enthusiastically looking forward to the next phase. Watching the app grow in functionality, both in the back-end and in the UI was really a lot of fun, and all of us, including the clients, enjoyed experiencing this “progressive enhancement” of the app over the lifetime of the project.

The results of deploying the Portal are yet to be seen, as it only just had its initial semi-public release in May 2015. It will continue to be tested internally at BSR and by a limited number of partners in the field. Their feedback will be incorporated into the planning process for the next phase of development, prior to full deployment.

Additional Resources

Let's begin our conversation

Contact us now.