Fall culture guide

Landing page design and development. See live

responsive viewpoints of Culture Guide


Crain's Chicago Business (website: ChicagoBusiness.com) is a business news site in metropolitan Chicago with 2.3 million+ average monthly page views. Crain's has a mainly affluent audience that earn $324,000 per year on average


Adobe Creative Suite, Bootstrap framework

moving animation of paintbrush next to smiling mouth


Every year Crain's Chicago Business publishes a (print + digital) culture guide showcasing Chicago events for the upcoming season. The goal here was to build a responsive, interactive and informational landing page that would pair well with the print version.

The editor wanted this to be an easy read with a visually appealing display that listed diverse events in the city. The page would reflect an overall essence of the events represented. The main audience for this page is affluent, well-educated, working professionals who tend to go out after work and on weekends.


As the sole digital designer and lead front-end developer on this project, I led the charge to design and execute the entirety of this landing page. I worked with a team of editors, writers, print designer and developer to collaborate on strategy and content.


Together, the team and I collaborated and brainstormed on the concept of the guide agreeing that we wanted the overall look and feel to be fun, appealing and relevant - listing events that would cover a wide range of interest.

I was given creative freedom to design and build the guide as I saw fit based on the content and assets provided by the editors. My strength in color theory and love for geometric shapes played a helpful role in bringing the project to life cohesively. The editor decided on a numbered list to keep the readers interested, which was a great decision I was able to emphasize within the design.


responsive viewpoints of Culture Guide

One of the main challenges of this project was the amount of content (32 events!) that would have to be displayed on one page while maintaining reader interest. Thus it was crucial to plan in a way that would make information scanning effortless. Like a busy street sign in Tokyo, good design will help users find what they want when they are looking for it. We'd have to implement a clear visual hierarchy that would allow for quick easy focus and maintain reader interest throughout the page. It would also be important that the reader be able to move around the page easily if they wanted to.

How to convey so much content without losing the reader?

Focus efforts on:

  1. Readability
  2. Maintaining interest
  3. Navigating around the page

Additional considerations: Build for all devices and make social sharing easy.

1. Readability. Make content scanning effortless

Readability examples showing colored bullet points and easy to read content blocks

2. Maintaining interest. Keep readers scrolling for more

Hovered state examples with celebrity photo in a circle cutout Readability examples showing colored bullet points and easy to read content blocks

3. Navigating around the page. Make it easy for users to find content.

Screenshot of Culture Guide's top navigation. Square boxes with images and 7 named categories

What I would've done better

Provide ways for people to sign up for future guides to help readers stay ahead of new events and boost conversion rates.

It would have been good to provided reference links to other cultural/event stories.

On the back end, I would have implemented detailed tracking code to learn reader interest so we can create more focused stories for future publications.

Back to project list Take me to the top