UX/UI DESIGN • WEB DEVELOPMENT

THE STORY

For more than 50 years, Oakland Ballet Company has served Oakland and the East Bay by keeping the tradition of ballet exciting, vibrant, and accessible. Art Director, Graham Lustig, contacted me because the OBC website was desperately needing a redesign and update after more than 5 years. After taking a look myself, I could see that their site was far from in alignment with the artistry and aliveness demonstrated in their performances. The site was functional; it worked on mobile devices, and it served their purpose of promoting their events and ballet academy and selling tickets, but it lacked any true branding or specific design direction.

I proposed to Graham and his team that we create a site that truly represented the incredible beauty that the Oakland Ballet is known for in addition to updating the site’s functionality to work with today’s technologies.

TOOLS

  • Figma
  • Photoshop
  • Illustrator
  • userinterviews.org
  • WordPress
  • Divi

UX

  • Competitive Analysis
  • User Research
  • Personas & Proto-Personas
  • Information Architecture
  • Wireframes & Prototype
  • Usability Testing

UI

  • Branding
  • Wireframes
  • Logo & Icons
  • Palette & Typography
  • Front-end Development

COMPETITIVE ANALYSIS

In researching other ballet companies, I found a range of approaches. Some were in a similar space as OBC with sites that were in need of updating and brands that lacked professional polish. I turned my attention to companies that were at the top of their game to get a feel for how “the best” did it. I focused on the San Francisco and New York City Ballet companies. 

PROS:

  • Clean design, nice movement
  • Simple layout focused on the currently most important offerings
  • Great photos of amazing artists
  • Bold colors, but simple, too
  • Robust cart and presentation of subscription options
  • Informative and up to date

CONS:

  • Some video might be nice
  • Not much – this site seems to do all it’s set out to do

 

 PROS:

  • Very modern and artistic design
  • Super clean and very easy to find info
  • Interesting and clear navigation
  • Snazzy animations, quick response
  • Deep. Lots of content to take in, presented artfully and smoothly

CONS:

  • Too much content? Relatively easy to navigate, but a lot to navigate, so can be overwhelming
  • A bit text heavy on certain pages. Could use some “eye candy” to break it up.

 

LESSONS

Both of these sites were very solid in both branding and site functionality, and they established the bar to rise to. Each of them were indeed an influence on the design of the OBC site, though I did have a clear vision of my own that had much in common with how those companies were branded. I pulled even further distinctions from observing their strengths and what could possibly be weaknesses.

USER RESEARCH & PERSONA

To conduct user research, I interviewed Graham and his staff first to get a sense from them who their users might be. I took their feedback and created a short survey aimed at some of the demographics mentioned. I followed up with in person interviews to get an overall idea of what the main tasks of the site were and of what users expected. I then created this persona to demonstrate the characteristics of the typical user.

MEET JAMES

DEMOGRAPHICS

  • AGE: 57
  • Lives in Oakland, CA 
  • Works in commercial real estate
  • Has an passion for the arts and supporting the arts through attending events and performances and making yearly donations
  • Has a 12 year old daughter that loves the ballet and wants to attend classes

BEHAVIORS

  • Regularly attends the ballet, opera and other gala events with his wife
  • As a father, James and his wife seek to expose their children to the arts through camps, programs and education
  • Contributes donations yearly to support the arts

NEEDS & GOALS

  • James needs consistent access to ways to enjoy the arts and contribute to them
  • James loves his wife and taking her out for entertainment, and therefore he is always on the lookout for classy events and opportunities 
  • James wants to share his passion for the arts with his daughter and afford her arts education should she want it

INFORMATION ARCHITECTURE

The OBC site had a lot of pages. My aim was to use as much simplicity as possible to make it easy to find whatever users might be seeking, from tickets, to info about donating, to how to register for Academy classes.

USER FLOWS AND SITEMAP

WIREFRAMES

Now with the user flows and sitemap established, I used Figma to create wireframes for the main pages and post types.

branding

One of the aspects of the old site that I knew had room for improvement was the logo. It’s choice of a boringly conservative serif created a feeling of “old” that wasn’t in keeping with the freshness that we were trying to convey with the new brand. After trying some different icon possibilities, we actually returned to the original script “O” as it held some power as well as carrying brand recognition. I balanced out its feel with a new sans-serif font and minimalistic approach to the layout. We settled on the new design with the thought to try different colors for the icon for possible different uses like events/performances/seasons  (e.g. orange as a default, blue for Nutcracker and winter, purple for Luna Mexicana and autumn, etc.). In general, I was aiming for super clean and simple in the overall aesthetic, leaving the incredible photography to provide the wow factor splashes of color on the site.

LOGOS & ICONOGRAPHY

BEFORE

AFTER

PALETTE & TYPOGRAPHY

With the palette and typography the goal was to go with clean and crisp, allowing the fantastic imagery to shine. We therefore settled on a mostly gray scale with one bold primary call to action color and a couple of secondary colors for other branding purposes. I used a modern looking sans-serif for both the logo and navigation, and another clean sans-serif for the main body text, choosing very large heading sizes and overall larger body fonts to improve legibility given the age bracket of the typical user.

PROTOTYPE

Now equipped with our new brand and wireframes, I set to developing the prototype using my standard development tools of WordPress and the Divi theme. One of the greater challenges on the site was deciding upon what images would go where. To my eye, all the photos were quite beautiful, but the client was able to distinguish subtleties far beyond me regarding the perfection of ballet form as well as which images were most appropriate for each section. It took a good deal of collaboration with the client to conclude the photo selection and further tweaking on my part to insure those images looked great on all devices. It was important to the client that not only were the photos to show proper form, but also the entirety of the bodies in motion. This presented challenges in design I might not normally be hindered by, and encompassing these requests into both desktop and mobile required a stricter precision.

Click on image to view full screenshot

CONCLUSION

This project was a fantastic learning experience as it was both larger than most sites I’d worked on as well as of a different class than most of my previous assignments. The entire process, from the branding through the user experience design, I was consistently learning great lessons about process and procedure, communication and collaboration. I learned ways to improve the speed and effectiveness of my work, further deepening my understanding of user experience and how to use it to refine my process and get better results.

Upon launch, the client was very happy (see testimonial below) to receive many complements on the new site and brand, and thrilled and proud to have a more professional medium to truly represent the level of expertise and beauty that the Oakland Ballet brings.

Creating a brand and website with David was a fantastic experience. He was highly professional, efficient and competent as well as extremely artistic, intuitive and creative. 

Graham Lustig, Art Director, Oakland Ballet Company