Discovering Diavolo

SYNOPSIS

Two nonprofits, partner
to rejuvenate diavolo.org

01 LANDING HERO REDESIGN

02 DIAVOLO MODULES FOR HOMEPAGE

In 2011, Diavolo won a Taproot Foundation grant to redesign diavolo.org. The relaunched site would secure an increase in audience awareness to help grow its funding efforts, and its position as LA's dance company.

Our team iterated towards the creation of a patron and booking-agent focused product. We highlighted Diavolo’s mission and programs by implementing a new design language, an overhauled user-experience, revised content, and new backend services. 

The following mockups will feature the continued work for Diavolo. Currently, Diavolo’s website doesn’t reflect all proposed changes. Visit diavolo.org | Donate & make a difference.

RESEARCH

Relationships between
human beings and
architecture

03 DEMO REEL

"...From daredevil dancers leaping and cavorting on pitching wheels to Goliath walls and other playground equipment from a super-size Wonderland".

– Los Angeles Times

Visiting the Diavolo stage was a blast. There were people leaping and tumbling. Large geometric props framed the semi-lit walls. It felt like a place where you could get creative very easily. For me, visiting Diavolo was all about learning the ropes of what performers do, and how they trained, but also to learn from Jacques Heim (Diavolo's Artistic Director) and his plans for Diavolo. Our team took regular visits to help us grasp the view and needs of a performer, what is expected from them and what comes in return. This gave us an early view into the lens of performers before we started our discovery phase.

 

“What we do on stage is like a live abstract painting. There is no narrative, but strong themes pervade the work such as human struggle, fear, danger, survival, chaos, order, deconstruction, reconstruction, destiny, destination, faith, and love.” 

– Jacques Heim, Artistic Director

DEFINING THE PROBLEM

At first, I couldn't find
the
 donate button

 

04 DIAVOLO'S MARK-UPS & RESEARCH

The previous site was built with Adobe Flash. When we joined the project, It was around the time that Steve Jobs wrote that article about Flash technology . The summary of shortcomings from Flash at the time allowed our team to understand that there was a list of "opportunities" we could use to make our build better. First impressions with the old site gave us a list of concerns, which helped us drive our research:

Who is this website for? 
How do I donate? is it easy to do?
How do I book Diavolo for my [school name] [etc]

Outdated design direction
Lacked publishing and sharing flexibility
Difficult to get funding support from users
The content was difficult to absorb

research top bgresearch top bg

DISCOVERY PHASE OUTCOME

Crystallizing
our ideas through
interview results

05 CARDS FROM QUESTIONS DRIVING RESEARCH AND DESIGN

We generated a thoughtful discovery list with internal and external sources representing a range of perspectives.

/ Staff/dancers
/ Funders/patrons/booking agents
/ Board members
/ Community

ENHANCING CONTENT & DESIGN

A new set of features
that focused on core
functions

Exclusives & 
community updates 
to your inbox

Regularly updated content
for news feed and email lists

Easy registration to
events and tours

Easier access to upcoming
tours and events 

Faster booking
 for everyone

Direct access to program and
business representatives

DESIGN THINKING & FRAMEWORK

Performance photography 
helped us strike the right chord 

06 HOMEPAGE & USER FLOW EXPLORATION

07 STYLE TILES & STYLE GUIDE ASSETS

Working with Diavolo’s library of performance photography was both inspirational for me and for our game plan. Their curated library allowed us to adjust and play with the right photography in context to subsections and detail pages. Performance shots had strong compositional underlines and community outreach shots were warm and approachable.

Framework we focused on:

/ Revamping information architecture 
/ Building a design language adjacent to Diavolo’s aesthetic
/ Incorporating WordPress for publishing
/ Moved to Dreamhost for free hosting
/ Kept Causevox for donation services
/ Added Google for typography, analytic tools

wireframeswireframes
wireframes2wireframes2
style-tilesstyle-tiles

Style Tiles

During design phase, we skipped the creation of mood-boards and went directly to style tiles. This was extremely helpful in getting early approval in the overall style of the product. The final style was a mixture of selected tiles. Color palettes remained similar across tiles to maintain brand already built by Diavolo.

Huge credit to:
Samantha Warren and team

FULL PAGE SHEETS @ 1440px

Current state of
design exploration

DIAVOLO.ORG | RELAUNCH

This case study was built lovingly using Sketch, Premiere, Photoshop, Illustrator, Grammarly, and Hemingway Editor. Got questions about other tools I use? If you have comments about the work or working together, Let's chat!

hello@thomasphilp.com