Background

The Kennedy Center, located on the eastern bank of the Potomac river in DC, is a venue for performing arts. People can watch various kinds of performances here, such as ballet, orchestra, comedy, jazz etc. It also provides free performances Wed.-Sun. and educational resources to enhance art literacy among young talents.

From the Kennedy Center’s yearbook, I learned that the center has a vision to make art more inclusive and accessible. However, if one takes a look at the Center’s current design, one can feel much distanced by the imposing and noble vibes it gives. ​​​​​​​

Problems

Beside the general tone the Kennedy Center gives, there are also some problems that linger in its website.​​​​​​​

Competitive Analysis

I conducted competitve analysis on three similar competitors. Two of them are performing arts venues and the last one is the National Gallery of Art, which is also government-owned and located in DC.

01 Play with color

These three websites employ bold, highly saturated colors to convey a brisk and creative atmosphere. Notably, Barbican and the National Gallery of Art associate specific meanings with each color; for instance, green symbolizes cinema, and nut-brown for classical music.

02 Break the grid

Among the two performing arts websites, I find the National Theater & Concert Hall's site particularly engaging. Its unconventional layout and micro-interactions constently encourage users to explore and discover new content.

Design Challange

How might we make the Kennedy Center's website more approachable and engaging?

Moodboard

I used keywords such as modern, bold, irregular shapes and momentum to search for references and build a more holistic picture as how the website should look.

Color

Carrying the grassroot style found in DC's streets.

Walking down the streets in the DC area, one can find graffiti in unexpected corners, expressing creativity of the locals. To echo the environment the Kennedy Center embedded in, I drew inspiration from graffiti and found some colors that can also help bring strong contrast to the black and white background.

I then picked neo green as the main color to match with black while creating a bold contrast, and assigned other colors according to the different genres for easier recognition.

Typography

Font that is modern and clean.

I experimented between three sets of typography and settled on option 2 with the headings using Adelle Sans Devanagari for its modernity and comprehensive font-weights. Then I paired it with other san-serifs for the cleanliness and put emphasis on readability.

Final Outcome

Home Page

1. I tried to add a sense of movement to the page by incorporating wavy green lines and dislocation of some shapes.
2. Color blocks and borders were introduced in the background to highlight programs, with each color representing a specific genre.
3. The hierarchy has been reorganized, prioritizing important information with a larger size.

Show Information

1. I streamlined the page by condensing lengthy text, ensuring easy access to essential show information on the banner, and I also added upcoming showtimes for efficient ticket booking.
2. The color for each page is assigned according to the genre. In this example, because The Lion King is a musical, the whole page has a yellow theme.

3. Ideally the user should follow a Z-pattern Hierarchy, yet the element on the top right in current design is too small and can be easily ignored. I reorganized the content using F-pattern layout to enhance user scanning and minimize the chance of missing important information.

Book Ticket

1. Currently if a user clicks on the "buy ticket" button an overlay will pop up and they need to go through the whole process in the page, yet everything is squeezed and hard to read. I optimized the user experience by moving the ticket booking process to a new page.
2. Users can’t set filters for seat recommendation and view the seat map in the same page in current design. I combined all the filter options into a scrollable sidebar on the right-hand side and showed the map on the left. This way, users can easily access and manage their preferences.

Mobile Design

I also created a mobile view for each page to complete the redesign proposal.

Take-away

Build a system and a library for yourself.

This is my first time doing UI design all by myself without working with any teammate. I didn't make inventory at first, resulting in having numerous patterns in one single page. The initial version had discordant one-off elements that could confuse and frustrate developers working on the page.

Fortunately, during a class critique session, I received a reminder to create a components library, which transformed my design process. Organizing my design in this way made a significant difference, teaching me the importance of systematic thinking in the design process.