Hacking at M.I.T — Cover Design History

Case Study

I worked on Cover Design History during the CODEX Hackathon (books and publishing hackathon) while at the M.I.T. Media Lab in Cambridge.

My small team consisted of university professors, one publisher, and front and back-end developers. As the only designer in my team, I had to create a brand identity and product design in less than 24h for our concept. Very little sleep happened that weekend!

1. The Concept

Problem Statement

Book covers have no library. Dust jackets are often lost, ignored, and tossed in the trash. The artists and designers who created the book covers of the 20th century are often forgotten.

How do book covers change over time and what might this tell us about cultural shifts in reception, production, and design? These are just a few of the questions that “Book Cover History” hopes to answer.

Goal

Have an overlook of history through the covers’ evolution through time.

Users

Designers 
University Students and Professors (Liberal Arts) 
Literature/History/Design Enthusiasts

2. Building the Solution

A website and not an app !?

As we were working on a product for designers, professors and students — people who spend a lot of time researching and working on their desktops, I wanted to create an experience tailored for the “big screen”. This whole project was about giving a significant place to book covers, therefore rendering them in the size of a matchbox was simply not appropriate.

I do, however, believe in accessibility. This is why we did make sure to have a website that would be responsive.

Sketches, Wireframes and Inspiration

I turned to Google Search for inspiration for a simple and transparent search page. For the result display, I decided an horizontal timeline would be intuitive to interact with and easy to read. People are also quite used to scrolling horizontally now, iOS Music Albums is a good example.

I started with the product design before deciding on any visual brand because I wanted to focus on functionality first. I also needed to give something to do to the developers while I would keep designing!

Sketches, Explorations and Wireframes

Brand Identity

In order to create the design guidelines, I gathered inspirations and looked at the content that would be on the website: black and white pictures, brightly coloured book covers from different decades.

After experimentations and sketches, I created a brand identity for Cover Design History. The goal was to have timeless, colourful and simple visual assets.

You can find people to help you out at any time of the day or night during a Hackathon!

Testing and User Research

There was only limited time to test and iterate both the search and the home interfaces (especially because I ended up working through the night, with few people around!). But I managed to have a few conversations and get some feedback, which definitely helped the design be based on more than my assumptions.

Search Interface

The final mockup of the search interface was very simple. Letting the book covers be the focus, with a timeline below to facilitate navigation and orientation. The timeline is a JavaScript integration, perfect for our developers given the time constraints of the hackathon.

Homepage

I experimented on the home page, which would act as a landing page, showcasing the features of the website and calling the user to action.

Homepage Explorations

The final mockup sent to my development team included a search field right at the center of the screen, with an example (The Great Gatsby) to quickly illustrate the concept to visitors and call them to action.

It was followed by a section that further explained the purpose of the tool, and two sections that showed different ways of exploring book covers (by publisher, by designer). The last section was another search field to invite the user to start his research.

Cover Design History Homepage Mockup, by Catherine Legros

3. Presenting

And…Time was up! There I stood, in front a few hundred people from the publishing world and the tech industry to present our project.

The response to our presentation was great. As much as your product needs to stand by itself, as a designer you should be able to showcase it and give it extra meaning.

I explained why we worked on this specific project and where we could see it going in the future. I also explained some of the process that went behind the final result, and what guided our decisions.

4. Takeaways and Thoughts

Think outside the app

There is a value in using the screen real estate present on desktop to create delightful experiences, and that is what we did. Once you know your users and your goals, don’t limit yourself to creating an app because that’s what’s omnipresent. Some projects live better on desktop, bots, or even in… the real world (*gasp*).

Document, document, document

This is a project I worked on last year. I only started documenting my process thoroughly in the past few months. I regret not making case studies for all the projects I worked on in the past. These end up having equal or more value to the final product.

Not all hackathons are created equal

Codex is the best hackathon I have ever been to. I believe the passion of the participants, the generosity of the sponsors (big names like NY Times & Wordpress) and the impressive setting (legendary MIT Media Lab) make a difference in the value of what is produced in this tiny time period.

You should take any chance you can to attend a hackathon and do your best work no matter what. But if you come across a hackathon that is focused on a specific issue or field (health, publishing, a specific city’s issues), you’ll be sure to find interesting, diverse and driven people to team up with.

Thanks for reading!