Playbill is a monthly publication well-known by theatre-goers. It is distributed at the door of productions where the covers as well as some of the content is customized to fit the particular play being performed. It was first printed in 1884, and is thus a staple for theatre lovers and performers. Today, there is also a full website that is updated daily with new feature content as well as an online store.
The current branding and design that Playbill uses across multiple mediums is recognizable but outdated. One of the most glaring challenges is the fact that they have to put two brands on the cover page (the brand of the show as well as the playbill brand). The content within its pages is always interesting but the layout is redundant and confusing.
This redesign aims to bridge the legacy of Playbill's two century legacy to today's audience. The branding is inspired by the energetic nature of theatre. The system is meant to be fluid enough to work across multiple shows, but still retain a sense of the original branding that its followers have come to know so well.
The logotype is updated to use an italicized sans serif as an update to the old word mark. It condenses the letterforms to create a stronger form as well.
The logotype was built on a diagonal grid that regularizes the weight of the strokes and curves. Emphasis was placed on symmetry of the letterforms (i.e. p and b are exactly the same shape just flipped).
This grid was then used again as a way to use black and yellow stripes as strong graphic elements. Throughout different collateral material, the stripes change in length and weight but they are never combined to form more abstract shapes.
The branding retains the black and yellow color scheme. However, the yellow has been altered to be a slightly deeper hue.
The main typeface used is Bau. It's readable and has multiple weights, making it a flexible option for both display type and body type. There are also quirky nuances, such as curves at the bottom of the a, that add more personality than a more generic sans serif.
The new cover image template allows for the flexible replacing of the cover image. The logotype remains centered at the top and a full bleed photograph of the show takes center stage. The show's logo and theatre venue is at the bottom of the cover.
By using a photographic approach for the cover, it allows all variations of an issue to share a common thread. For a more modern audience, a photograph is also more relatable as it shows a taste of the spectacle they are about to see.
Layouts are more deliberate about playing with type and image.
Due to the very small format of the publication (5.5 x 7.5 in) single, large images are used often to give each spread more breathing room as well as reduce redundancy of content.
Cast list, cast description and head shots appear next to each other.
When broken down, the site had many redundant pages. In fact it had two menus on desktop view. I interviewed many users across those who visit the site as well as those who know it only through the print version, and thus reduced the number of pages and reorganized the site map.
Because one of the strengths of the site is its content, no content area was removed. Instead, some were combined and put in more appropriate areas.
The site is built on a responsive 12 column grid. On tablet and mobile view, modules simply stack. This approach is familiar to users and thus reduces any learning curve that may come with a newly redesigned website.
The homepage focuses on the most popular parts of the playbill site. The full-width billboard drives users to the most recent/relevant content produced by the site. The page also has the five most recent features, exclusive videos and links to the most popular shows right now. As a more unique piece of content, there is a small list of special things that on this day in theatre history.
Pages that show a lot of content laid out as a 3 column grid, only showing six links at a time. The purpose of this is to emphasize the fact that the site is updated daily, so each day the first page will always have new content. Another reason for this is to highlight the imagery and headlines of each piece. This allows pages to have more breathing room and not overwhelm the reader, thus they are more likely to continuously explore the site.
Collateral material was designed to extend the branding even further. The focus was placed on the same black and yellow stripes at different scales. Funny and popular quotes from the theatre were used as an additional typographic detail.