CONCEPT DESIGN
Internet Broadway Database
My Role: UX Researcher and Designer
Platform: Desktop
Time: April 2018
Goal
Redesign Internet Broadway Database website (IBDB.com), improve navigation and readability, and build a layout template that accommodates to the complexity of long-running show information.
About ibdb.com
IBDB was created by the Research Department of The Broadway League, the national trade association for Broadway. It serve as a comprehensive history of Broadway for the benefit of League members, press, theatre professionals and enthusiasts.
IBDB provides a comprehensive database of shows produced on Broadway, including all "title page" information about each production. IBDB also offers historical information about theatres and various statistics and fun facts related to Broadway
Database for Broadway community
A Specific Group of Users
As a theatre goer myself, I use IBDB as an important database. It is greatly helpful on finding old production information, especially less renowned plays and actors/actresses.
I interviewed few theatre goers that I know and collected their major inquiries while using the database
Theatre goer / fans
Look up general info like cast, actor/actress theatre credit, awards history, etc
Professionals / researchers
Look up production team info in more details, grosses, and data that can't be found in news
Major Drawbacks of Current Website
-
Navigation is confusing. Quick search category in dropdown do not match the category labels displayed on screen
-
Information visualization
-
Entry / article formatting makes the page overwhelming and hard to read
-
Visual style of the website interferes with clarity / usability
Comparative Analysis
imdb.com: the Internet Movie Database separates "Search by topic" from "Advance search"
National Theatre Archive: the catalogue page focuses on production related categories
REDESIGN PRIORITIES
Homepage / Navigation
-
Organize "Categories"
-
Reduce redundant text
-
Clean visual style
Search Result / Article
-
Improve visual hierarchy, avoid long paragraphs
-
Use table to properly organize production data
Advanced search / Topics
-
Improve usability of search form
-
Apply visualization that fits the topic
Ideation
Clarifying Information Architecture
I conducted website audit and created sitemap in order to have a clear picture of the database IA. It helps me with understanding current site, and then find a way to optimize navigation.
Paper Wireframes
Design: Homepage & Navigation
Global search bar
I put the original "Quick Search" in a global search bar in order to make this function accessible on every page
Advanced search
I was inspired by "Advanced search" and "Search within topic" on "imdb.com", and grouped the tabs by it's functionality
Display of current shows
Instead of using 2 tabs, I put "Broadway on Tour" beneath "Broadway in NYC". This layout reduced clicks, and also made browsing easier. I kept the tabs that separates "Current" and "Upcoming" shows since it allow
users to focus on one category at a time
Design: Entry page of a musical
Long-running productions with big crew
The entry page of a musical is tricky because that for a long-running show, replacement cast, management and understudies changes every season, and IBDB records them all. The challenge is to organized a enormous list of names in a clean and accessible way.
Floating menu on the side
Since the credit list is extremely long, and awards and song information made the page even longer, I put a floating menu on the side, which allow users to jump to a particular section without getting confused by scrolling
Expand to see replacement
Current cast replacement information opens in a separate page, the link of which is hard to find, and users get lost on who's playing which role. In the new design, I put replacement and current cast right next to original cast, and allow readers to track all changes.
Design: Advanced Search and Topics
Advanced Show Search
For the advanced search form which looks extremely busy, I realigned labels and grouped text boxes in order to reduce cognitive load.
Reflection
Limitations and Next Step
I tested the interactive prototypes with several theater goers who are current or potential users of ibdb.com. They all think that the overall new layout works better, and the homepage design makes it easier to access advanced search.
Because of copyright consideration, the website do not use posters from shows, and do not use actor/actress's headshot unless they voluntarily submit one. This may increase the difficulty for creating a visually attractive design.
If I have a chance to keep woking on the website transformation, I would put my priority on refining advanced search form, and making advanced search result pages more consistent across categories.