Des Moines Performing Arts Redesign

How might we Redesign a website nimble enough to handle frequently changing content?

Following the announcement of “Hamilton,” the musical, as part of its 2017-2018 season ticket package, Des Moines Performing Arts (DMPA) identified an opportunity to refocus the visual direction of its brand – beginning with its website.

At the time, DMPA managed its online content through a single centralized system. That content was then distributed to the main website, as well as a stripped-down mobile site. This led to a fragmented experience and proved underwhelming for the growing number of mobile users.

The content management system also limited how the DMPA marketing team posted events, often preventing marquee performances from being unique, engaging focal points online. The site itself didn’t offer users an easy way to explore either, instead requiring users to dig for related events.

The redesign coincided with a switch to a new third-party ticketing platform, which needed to be completed before the fall when general public tickets for “Hamilton” were scheduled to go on sale.

In total, the project timeline was about 9 months from kickoff to launch.

A Responsive, Modular Design system

By understanding the life cycle of event-related content and the organization’s immediate plans for growth, I built a modular design system that eliminated the need for separate desktop and mobile web experiences. This system also provided the marketing staff more flexibility and freedom when publishing events online.

The design borrows from the visual language used in the DMPA donor-focused publication, Cue, which launched around the same time as the updated site. This helped establish brand alignment between the organization’s two highest-value customer touch points.

Seeing the Forest for the trees

During stakeholder interviews, I learned that an event is not always defined as a live performance. The organization operates more than the Civic Center, which hosts all the Broadway shows. And thanks in large to a new multifunctional outdoor community space, not all events are ticketed.

I worked with the client team to identify attributes shared by all the event types and explored what distinguished one type from another. This helped uncover another finding: Within the organization, events have different stages, such as unannounced, published but tickets unavailable, and ticket sales open to the public.

This got me thinking about an tackling the redesign from an Object-Oriented UX approach, which approaches content as a system of interrelated building blocks. Events play a large role in the DMPA ecosystem, serving as the primary content for most areas of the site. They are a natural hub for finding information about the venue, becoming a season ticket holder, and discovering related events.

Mapping the relationships an event has with other key parts of the site helped reframe early design conversations to be about content.

Despite some initial resistance and early desire to “see the new design,” this process increased conversations about design beyond the visuals – ultimately setting the tone for future design decisions.

The content creator as a primary user

Wireframing these content objects brought to light many business requirements influencing how an event might be displayed to the public. Getting something out earlier with just a bit of information had more value than waiting until all details are perfected and finalized.

This understanding helped stakeholders agree early on about what was needed when creating and managing events internally, and guided our development team in identifying which pieces of content were reusable or made up of other components.

Look and Feel

Crafting the new look was an iterative process. Each version I presented to stakeholders consisted of 3 desktop mockups and a mobile version of one of the desktop pages.

Because the updated content management system would allow DMPA staff to customize pages in any number of ways, the mission was to represent key components and illustrate how the design would feel consistant.

While some pages, like performance details, had a certain default structure, the modules used to build the template could be repeated elsewhere if desired.

The Building Blocks

Once DMPA approved the overall look and feel, it was time to disscet the mockups into reusable UI modules. This involved extrapolating the design for components that weren’t represented in the mockups, as well as rendering the more complex components at various grid widths to ensure content would fit and maintain readablity.

A few components required different styling when smaller and viewed on a mobile device because it lacked the necessary affordances. While mockups were made to help stakeholders visualize what they would look like in a static formay, I went a step further and coded the experience on CodePen to provide a realistic representation of the direction for the design.

The Mobile Experience

One of the beauties of taking a modular, Object-Oriented approach is the emphasis on prioritized content, which is also key when designing mobile first. Demonstrating to stakeholders how these interconnected components could operate more or less like Lego^® blocks made it easier to keep the desktop and mobile in perspective at once.

On some static, informational landing pages, a sidebar for related content helped users explore deeper. However, the layout stacking order meant the links would be eventually burried on mobile screens. To maintain visibility, we turn this into a collapsed menu fixed to the bottom of the screen.

Liked

Applying a different methodology, which was also still pretty new at the time, really helped demonstrate a deeper value to design early on. Thinking of content as objects also provided a better lense for our team to view the project and the work to be done since we were litteraly building the components and defining the database structure feeding into the content management system.

Learned

I learned how to have meaningful conversations about design with stakeholders that made them part of the process and yielded tangible information I could use in the redesign. Producing artifacts from these conversations or providing visual aids during them also kept goals and outcomes clear.

Lacked

While not necessarily a hinderance, the project lacked a dedicated, unified team. At the start of the project, our project manager was out on maturnity leave, and I absorbed those duties into my role as designer. The OOUX framework helped make the adjustment seamless. However, it was a bit harder to catch everyone up later on when the team was at full strength.

Longed For

In retrospect, user feedback would have been valuable when we started working on the information architecture for the site. While I felt confident in the site analytics and anecodtal information provided by key stakeholders, understanding the customers’ mental model and how they navigate the site would have gleaned actionable insight.