Redesigning JSTOR Labs' Site Using Ghost

I’m excited to announce the new, refreshed version of the JSTOR Labs website! In this post, I’ll share some of the work and lessons learned from this redesign project.

The old JSTOR Labs site that launched way back in 2015 was beginning to show its age. The post-creation process started breaking down and maintenance to the site had become difficult. Also, the site’s visual design was in need of some refreshing.

Old website mockup.

Because redesigning this site was never our top priority (we’re working on a LOT of really interesting other projects), it took nearly a year from our first discussions to the release earlier this week. I started with design sketches and laid out the grid, fonts, colors and interactions. Since our site has a lot of reading materials, we wanted a site that was easy to the eye. Typeface was very important so I choose Playfair Display, a serif typeface for heading, and easy-to-read Ubuntu, for paragraphs. The design was finalized with minor changes. Our next step was to select the platform to use to build the site.

We evaluated three platforms for the site: Jekyll, Wordpress and Ghost. One of our goals was to have a simple website where an author could create posts and add images easily without any help. Jekyll would definitely have simplified the set of technologies and processes we use, but we decided that it was too simple for us -- we had things we needed to do that Jekyll couldn’t manage. That left Wordpress and Ghost. I was familiar with Wordpress and while I was not a huge fan of Wordpress -- I find it complex and overloaded with plugins -- I was ready to work on it if I had to. We knew the strength and weaknesses of Wordpress so we wanted to give Ghost an experimental try first. Jacob, one of the Labs developers, quickly set up a test deployment for us to toy with.

The new website mockup across multiple devices.

It took a few hours to learn the structures and features of Ghost, but it was not particularly difficult. Ghost used handlebars and my only experiences with those was the one on my face 🧔. Handlebars is a simple templating language which uses handlebars (curly braces) {{ }} to indicate a slot for a variable. For example, {{firstname}} is a handlebar expression which prints a first name from the database on the page. I understood the concept of templating but had never played with any theme before, not even on Wordpress. In the test environment Jacob setup, I was able to get a demo theme up and running. We installed a Ghost instance in a GitHub repo which allowed Jessica and me to work on the theme asynchronously and manage versions. I handled the theme-building in HTML and CSS, and Jessica worked with more complex JavaScript and JQuery interactions. We also created a kanban board in our office space to track the progress.

Shots of the kanban board, documentation points & code structure

After several days of work, we had a rough skeleton of the theme. We were ready to experiment with the CMS which turned out to be very simple to work with. It seemed like it would be a great fit to solve our problems. There was no need to resize images and it had multi-user access and robust support. But, we soon stumbled upon some challenges that needed creative solutions.

There weren’t plugins available like there are for Wordpress, so Jessica wrote our own hero image slider for the homepage. Another challenge we had was that we wanted different posts to look differently, for example, our projects pages needed a different look from this blog post. Ghost didn’t accommodate that out of the box, but we found a creative solution. Ghost has basic tag fields which we repurposed to indicate the type of page. Similarly, we wanted our project pages to display some extra information on the right sidebar of the project's posts, formatting that Ghost didn’t natively support. Since there weren’t metadata fields to do that, we passed that information through the CMS as HTML and wrote a script to position it on the page. Here is the final design along with the HTML coming through the CMS.

We wanted to achieve the sticky box with metadata on the right.

This is how the author would add an HTML block in the content.

The javascript that positions the sticky box coming from the CMS.

We hope you’ll enjoy the new design. I know that we already appreciate how much easier it is to create new posts. In fact, we’ve enjoyed working with Ghost so much we have already built and launched another Ghost site for our Text and Data Mining project.