Boston Ballet
dot com

Boston Ballet is “the ballet company of the future." The ask was to redesign their ecommerce responsive site. They wished for their site to depict motion and tell their 53 year story. 

My roles:  Design direction, management, high fidelity design, site animation, stakeholder interviews, stakeholder reviews, 

main_v01main_v01

Boston Ballet is “the ballet company of the future.” Their internationally-acclaimed performances, world-class education programs, and ground-breaking community initiatives have made us a leader in our field, with a 53-year history of promoting excellence and access to dance.

design exploration.

After interviewing all of the stakeholders, our first step was to start playing. This part of the process is super important in defining the brand’s visual language. Below are two directions that we presented to the client to get a feel for where they thought the Boston Ballet brand should go. 

x  DIRECTION ONE  x

d01-img-gridd01-img-grid

x  DIRECTION TWO  x

d02-img-gridd02-img-grid

approved design system.

x  COLOR PALETTE  x

The challenge was to find an action/accent color that was unique to the industry space. The orange we chose helped Boston Ballet to stand out. It was also very imporant to communicate up front that the Boston Ballet site and ultimately new branding would be very light and include plenty of white space.

color-palettecolor-palette

x TYPOGRAPHY  x

Boston Ballet was was using Futura exclusively. We wanted to find a typeface that didn’t steer too far from where they were, yet move them forward. LL Brown was perfect for this. It’s a more modern typeface that is notably a Futura variant.

typetype

x iNTERACTIVE & LAYOUT  x

Although we knew these would evolve, our visual language exploration was accompanied by example layouts and interactive buttons to better commuincate how our type and color choices would fit.

final-d-img-grid-v2final-d-img-grid-v2

layout.

After a few rounds of feedback and revisions, we had a system of colors, type and ui elements to move forward with.  This language was then used as a guide and tools for building out each page.

performance-lockupperformance-lockup

x  PERFORMANCE PAGE  x

performance-long-pageperformance-long-page

x  HOME  x

bb-home-lockup1bb-home-lockup1

animation.

Throughout the entire design process, motion & transitions were always considered. A lot of the time, it was very helpful for me to spend some time in after effects. Sometimes it helps the client or the developer if they can see it in action. 

bb_stacked_nav_animation_v01bb_stacked_nav_animation_v01
bts-animation-pingpongbts-animation-pingpong
buttonsbuttons
iconsicons
bb_paginationbb_pagination