Electric Book Works Publishing reinvented for the digital age

Teaching economics with interactive tasks

At Barnard College in New York, a team led by Professors Rajiv Sethi and Homa Zarghamee were working on a new way to teach economic concepts: let students play with economic models in real time, by clicking and dragging and typing. After all, playing is one of the best ways to learn.

Each concept would be presented in a series of steps. In each step, you’d get some background and then play with graphs or data to see how changes affect outcomes. Rajiv’s team started by creating their own basic prototypes.

A screenshot showing a web page with tabs including 'Introduction', 'Rich/Poor ratio', 'Transfer principle' and so on. The page shows three paragraphs of text and a graph below two dropdown menus. It appears that selecting items in the menus changes the data represented in the graph. The design is very plain: some light blue edges and a white background and a plain font. A prototype module developed by the authors.

These prototypes worked fine on desktop computers, and were useful for field-testing. The next step was to turn them into a world-class website, and to make them mobile-friendly, since many students need to learn on their phones.

So Rajiv called us in for their next steps. We spent time with his team talking through their aims and trying out the prototypes, till we had a deep understanding of what they wanted to achieve.

First, we needed to create a strong brand identity for the product, which would be called ‘Interactive Economics’. We developed the text you see on the site’s home page, and brought in long-time collaborator Karen Lilje, of Koki Design, to create a visual identity around that.

A laptop computer with a beautifully designed web page on its screen. The web page says 'Interactive Economics' at the top, and a bigger headline reads 'Economics in motion'. Short pieces of text are carefully laid out with lots of space around them. They include headings like 'Interactive learning', 'Free for everyone', and 'World-class learning'. The page appears to extend like a sheet of paper below the screen, so that we can see what would otherwise be hidden low down on the screen. There another heading reads 'Interactive Economics is part textbook, part playground.' The web page is designed with an unusual, striking font and rich shades of dark and light blue.

In addition to the website, we could also see how the branding would look in other contexts. We all needed to be confident that the brand would be strong and flexible as the project grew over time.

The Interactive Economics logo and rich blues is laid out on various pieces of stationery: a folder cover, a letterhead, business cards, and a notepad.

While our production team crafted the site’s look and feel, our lead developer Louise Steward was working on the technology behind the scenes. The author team had created their prototypes with Shiny. Shiny apps are written in R, and depend on sophisticated server-side code with long-term cost implications. Shiny is great for many things, but for this we wanted to use Javascript instead: it would be faster for users and cheaper to maintain, and would avoid expensive hosting costs as the project grew. Building on our Electric Book template, Louise developed a set of tools that would let her quickly convert each module from R to Javascript as the authors worked.

A screenshot from the finished, designed version of the same content shown in the prototype earlier. This version is easier to read, and the design is simpler and more engaging. A finished page, developed from the authors’ prototype above.

This way, the authors could continue to create content in the way they knew best, and we could publish the finished product in a way that’s best for users and project costs.

From there, as the authors completed each module, our production team could edit, proofread, and publish them one by one.

A screenshot of a repository on GitHub, showing details like the folder names and the number of commits. The master files in a GitHub repository.

All content and code is managed on GitHub, where we and the author team can collaborate online. This is especially useful as the authors gather feedback and make updates. They can make and preview their updates before our quality-assurance team checks and publishes them. This best-practice workflow means we can make changes quickly while maintaining high standards.

In just weeks since its first release, we’ve seen users from all over the world visiting the site. We’re looking forward to adding modules, and seeing more and more people using them for teaching and learning. Interactive Economics is free for everyone.

20 May 2024
Mockups by Koki Design