The Kennedy Center Redesign

The purpose of this project is to refresh the visual for the Kennedy Center to make this local performing arts venue in DC more approachable and lively. This project is a practice in UI design and branding for the "Visual Design Studio" class I took in UMD and not official.

Result
Redesign prototype for the home, show information and booking page.
My Contribution
  • Identified redesign goals and generated visual strategies.
  • A competitive analysis for the Kennedy Center.
  • Built functionable hi-fi protytpe in Figma.
Time:
Jan. - Mar. 2023 (3 months)
Skill:
Competitive analysis, Information Architecture, UI design
Tool:
Illustrator, Figma
Team:
Individual work

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.​​​​​​​

01 Artsy and unapproachable

There’s only black and white in the page, which keeps everything simple and artsy. However, it also makes the page unapproachable.

02 User won't have the desire to explore

Neat and tidy card section makes the introductions boring. Current design doesn't capture the dynamic and expressive aspects of performing arts as well.

03 Too many font style that decreases readability

Although there are only two fonts in the website, overused font style makes the page messy and decreases readability.

04 Lifeless and lack of energy

The whole website consists of mostly static photos with no interaction. Which makes the current website lifeless and lacking energy.

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.

Design Implications

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.

03 Eliminate decorations

The focal point of these three websites is either the performances or the art collections within the venues. Consequently, they adopt a minimalist approach, allowing photos and videos to take center stage rather than incorporating excessive decorations.

For the complete analysis, please visit the file here.

Design Challenge

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.
  1. 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.

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.