Shining a spotlight on the new Broadway.com experience

The concept revolved around taking the best of Broadway.com, refining it for the iPad platform, and presenting an effortless touchscreen experience that puts users in the driver's seat.

First we sketch on real pads.

The quickest way to get on the same page.

After spending some quality time with the Broadway.com Team, discussing and collaborating on what the iPad app should be, we worked to get it on paper quickly so we're all on the same page. So we pulled out our trusty Fi-branded Moleskines and started drawing. The sketches confirm the ideas, make them tangible, and provide a solid foundation for cross-disciplinary communication throughout the project’s lifespan. These sketches are the very first visual ideas for how the app should look, and you'll see they're actually not too far from where the app ended up.

— Shows List —

— Shows Details —

— Shows Detail menu —

— Video Gallery —

How a list of all shows might look

— Landing/Spotlight —

How a show would appear, once selected

Modal on single-tap for sub-menu

A gallery of Broadway.com videos

The first sketch of the app's landing page

Simple is always better, so the designs for the Broadway.com iPad app absorbed the look and feel of the Broadway.com brand, then refined and extended it to carry through a clean, sophisticated visual experience. Within the iPad environment, the design allows the rich content offering to really shine through and create a visual personality all its own.

"I Feel Pretty, Oh So Pretty"

like the immortal song from West Side Story we think this app feels pretty...

Since Broadway-related imagery and signage is so iconic, our designs focused on clean, attractive typography, and the fluid feel of touch and gesture while navigating through the application. Broadway is as much about the beautiful sets and glamorous costumes - the visual experience - as it is the music, so we chose typography and styling meant to accentuate the content without getting in the way.

Written for iOS in native Objective-C this application makes use of the very latest features in iOS 5. The Broadway.com app leverages the latest in iOS memory management techniques, and relies on intuitive natural gesture-and-tap navigation. It's also worth noting that Broadway.com and Fi share a love of the Django web framework, and this app neatly ties into Broadway.com's robust CMS that provides freshly-flowing content across multiple platforms.

Landscape &
Portrait Modes/

For optimum reading or video viewing.

Too many apps miss the opportunity to optimize for both portrait and landscape modes. From the start, great care went into presenting all of the content types in a way that makes reading or watching videos comfortable no matter which mode you’re in.

Smart Grids & Pagination/

Showing content intelligently

Dynamically hiding content and loading ahead of time
Pre-loading next and previous pages

You might not know it, but deciding what content to load ahead of time based on the current orientation takes a little engineering, and the grid system used in design is extremely useful in development.

We offered up a fun and informational digital experience that allows for smooth content browsing and simple ticket purchase... Now on with the show!

CASE STUDY

Broadway.com iOS App

This was the very first case study conceived and produced within the new narrative structure and flow that I personally created after my arrival a few months prior. It’s easy to compare this one to later case studies and see that we were still finding our way a bit here.

This project was relatively simple compared to any case study subject that came after it, and that was a bit of luck. With that in mind, please read on for the story behind the conception, creation and delivery of this very popular iOS application.

My Role

I was confronted with a massive opportunity: To join a renowned Case Study powerhouse (F-i) and significantly raise the bar even further, via content strategy and narrative structure… and I pounced. I wrote, edited and produced the Case Study you see here.

CASE STUDY

Broadway.com iOS App

My Role

Let’s network

Expertise

Process

Experience

Results

Quick Answers