Case Study
Children's Resource Exchange Center

The Children's Resource Exchange Center (CREC) is a web-based software application that faciliates and manages a global system to connect children from the developing world with an international network of medical providers. We led the effort to turn the initial vision into a highly dynamic and interactive web-based prototype that they could use as a key asset in their efforts to raise money and gather support for the project's full development.

Client

Grace Children's Foundation, New York NY
American Institutes for Research, Washington DC

Nonprofit Organization | Foundation


Audience & Topics

Funders, Advocates

Healthcare | Child Services


Launched

June 2014









Roles, Deliverables and Methods

Information Architect

Requirements Gathering, Concept Development, Information Architecture

Developer

Full Prototype of Website and Custom Business Application



The Challenges

1

Create an online deliverable that the client could use in a variety of situations including pitch presentations with potential funders.

2

Demonstrate the full potential and capacity of the online system, including the functionality for three distinct user groups: staff, medical providers, and child representatives.

3

Produce a robust simulation on a short turn-around schedule with a minimal design and development budget.




Our Solution
A Wireframe of the Future


We turned to the production of a full HTML5 and CSS3 based prototype. This technique, one that we have helped to pioneer, produces a fully interactive website that our client and other stakeholders can use, interact and engage with. It provides a simulation experience that outstrips the capacity of both traditional and interactive wireframes. It does so by allowing for the simulation of dynamic user interface components, authentication systems and page flows. Further, it allows for the simulation of multiple users, with unique functionality for each group.

There were two added bonuses of our interactive prototype. First, it was produced at a cost on par with traditional wireframe deliverables because it utilized a unique combination of open source technologies. Second, the deliverable was a set of HTML5- and CSS3-based files that can be used directly in production-ready websites and applications, which will help to minimize redundant front-end code and speed up development timelines.





At the heart of the CREC prototype was an open-source technology that we developed: Permit.js. It is what allowed us to create a robust prototype that showed unique user flows and different functionality across all potential user groups. For example, it supported our ability to show administrator-only views and privileges as well as distinct dashboards for each of the application's user groups.

Permit.js allowed us to rapidly and cost efficiently build prototypes that demonstrated a range of complex application states including user states (logged-in vs logged-out) and permission states (administrators vs public users). Most importantly, it provided our client with a realistic sense of how their website or application will ultimately behave. For CREC, this benefit translated into an agile and organic design process by allowing us to rapidly move through several rounds of iteration.