Chuk Moran

UX & Code

Responsive Comics Database

The Grand Comic Database is the IMDB of comics. Its volunteer editors have logged credits, companies, covers, and characters for 1.4 million issues. Recently, however, the organization has been losing web traffic to competitors who have worse data but better looking websites.

Beginning with the organization's first survey, we analyzed responses from hundreds of site visitors, built a report, and began the conversation with the organization's leadership and most influential editors.

Based on that work, we produced sketches and high fidelity mockups for 12 critical page types, using existing brand colors and font stack. After discussing the changes with stakeholders, we built out these pages as a responsive design using Bootstrap and some custom javscript, releasing new prototypes weekly, and ultimately getting the site to run on the existing tech stack. The redesign is expected to go live in early 2017.

  • Role: Research, Design, & Code
  • Client: The Grand Comic Database
  • Tools: Google Forms and Sheets, Python, Sketch, HTML/CSS, Bootstrap, Javascript (with JQuery and Modernizr), Vagrant
  • Duration: 6 months
  • Year: 2016

Redesigned issue page
Simple, responsive design with progressive disclosure, increased ad real estate, and tuckaway sidebar
Original page for issue
Before: html-driven design very dense with features, but little sense of visual hierarchy
Initial mockup
Initial sketch mockup targeting 1024w browsers with most concepts already present. Technical constraints of the site's templating system, special needs of critical contributors, and a preference for higher information density drove us away from this design
Responsive design with collapsing tables
In large part because most contributors never access the site with mobile or tablet, the site did not work well at other sizes (left). In the redesign (right), tables compress into different shape, many options are tucked away in a sidebar that can be opened and hidden, and the header remains easy to read and access