Broadway.com Available in the App Store

How Fi and Broadway.com created
the Broadway experience for the iPad.

Broadway.com tapped Fi to produce an iPad application that puts the best of Broadway right at your fingertips. Our mission was to create a

one-stop-shop for the latest buzz, information, pictures, and a seamless interface for snagging seats to any live performance.

Memphis

Phase 1

The Concept

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.

big sketchpad

Landing / Spotlight

The first sketch of the app's landing page

Shows List

How a list of all shows might look

Show Details

How a show would appear, once selected

Shows Detail Menu

Modal on single-tap for sub-menu

Video Gallery

A gallery of Broadway.com videos

Phase 2

Strategy & UX

Before jumping into design, we carefully map out all of the content, and define two critical components: Wireframes and Site Map. The driving principles for this project revolved around a smooth browsing and purchase experience, so we focused tightly on the artful meshing of content and commerce.

Sitemap

The sitemap is critical, ensuring the path to what users want is simple and well-organized.

Functionality Gestures

On a touch device, we design around a consistent set of touch gestures.

Loading, Spotlight & Shows

The initial experience with the required loading page

Show Details, Buzz Landing & Article

The show page with details, articles with "Buzz", and article views

Photos / Videos

Broadway.com produces a lot of great content, both photos and videos.

Sketch
iPad

Phase 3

Design

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.

Broadway Buzz, Photos & Videos /
All the different ways to access content in a tidy menu.

Menu Overlay

The menu slides over content when needed and hides nicely to get out of the way when viewing content.

Selected Menu Items

Your current location is always highlighted so you know where you are.

Spotlight Buzz, Photos & Videos

All the content easily viewed in the main area with vertical and horizontal sliding.

Featured Shows

While viewing news and articles you can always quickly jump to show pages with a simple tap.

layered screen
Once

Buzz

All the latest from Broadway, you'll find an assortment of news.

Mama Mia

Photo Galleries

Photo galleries from events and shows.

Phantom

Videos

Videos and interviews viewed fullscreen on your iPad.

Buzz

All the latest news related to the shows and stars at a glance

Buzz Article

Magazine-style article design for easy reading in both portrait and landscape

About The Shows/
Preview, plan, and purchase your tickets all in one spot.

Shows

A wall of iconic scenes offers a feast of shows to explore.

Show Detail

Photo galleries with access to trailers and more information below the fold

The Application Icon /
Simple, elegant, recognizable... that was our goal for the app icon.

Icon 1

Version 1

Incorporating a stage into the icon was our initial concept. Ultimately, it was just too much.

Icon 1

Version 2

Our second round kept the curtains and lost the fluff. We were almost there...

Icon 1

Version 3

Further simplification achieved the clean solution we were looking for.

Phase 4

Technology

We've become so well known for our HTML5, it's worth mentioning our strong and growing mobile development teams, with developers fluent in several mobile platforms. 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.

Either Way You Flip It

The content looks great whichever way you happen to be holding your iPad, no need to fumble around.

TeamWork

The teamwork made it all happen...

Building an app like this takes teamwork, especially when we have people collaborating in three offices, New York, Stockholm, and Salt Lake City. At Fi we use video chat, screen sharing, daily meetings,

and Basecamp to stay on the same page and work together. Having an 8 hour difference can be advantageous, it means we can work 17 hour days without anyone having to stay late!

watch trailer
  • watch trailer
  • watch trailer
  • watch trailer
  • watch trailer
  • watch trailer
  • watch trailer

Conclusion

The Take Away

Here at Fi we're very excited about this recent addition to our mobile portfolio. We’ve offered up a fun and informational digital experience that allows for smooth content browsing and simple ticket purchase...
Now on with the show!

Available in the App Store

Other Recent Case Studies from Fi

  • 60 Minutes

    60 Minutes Chrome App

    HTML5 / Web

    Working with CBS Interactive, we created an elegant online news and entertainment experience for Chrome users.

  • Cannes Heatmap

    Google at Cannes

    Mobile App

    We teamed up with Google to create a mobile web app that allows users to map their location to the hottest social gatherings, events and parties at Cannes.

  • Civil War 150

    Civil War 150

    Flash / Web

    Using colorful info graphics, Civil War 150 informs, educates and entertains users about the American Civil War.