DC Universe

UX/UI and User Research

A cross-platform streaming service crafted for millions of DC fans to enjoy original shows, movies, comic books, news, forums and more.

Overview 

DC Universe is the ultimate streaming experience for fans of the DC Comic franchise. The cross-platform service bundles original shows, movies, comic books, fandom editorials and a robust community forum all in one place. In my tenure, I led user experience for initial launch, elevated how our design team communicates strategic design choices and developed a user research practice to inform our product development process.

This is a big product with too many disparate threads to weave into one cohesive story. What follows are a few digestible case studies. If you are curious to learn more, please get in touch!

CASE STUDY O1

Pre-order
Onboarding

About 3 months prior to San Diego Comic Con 2018, the GM at DC Universe spearheaded an idea to generate excitement prior to the app’s official launch, offering pre-order subscriptions and giving excited fans a chance to play with the beta version of our upcoming app.

The key challenge was creating a low-friction onboarding flow, while also accounting for a variety of redemption use cases tied to in-person gift card purchases at SDCC. Even more challenging was grappling with mercurial product requirements and a limited amount of design and production time. In order to make a great first impression on our eager early adopters, I shaped our design approach through stakeholder interviews, desktop research, divergent wireframe exploration and open collaboration with front and backend engineers.

Key Objectives

Design a high performing funnel with low exit rates

Account for 4 core user stories, including gift card redemption

Make a great first impression for DC fans and the press

Guiding Stakeholders Early

Collaborating early with stakeholders, product and tech, I was able to nip user experience problems in the bud. For example, I compiled secondary desktop research to highlight key UX considerations and persuade stakeholders to place the sign up step before asking for payment. Diving into early technical specs, I also eliminated unnecessary steps from the redemption flow by proposing alternate options with the backend team.  

Wiring Nuanced Interactions

Wireframes options provided an opportunity to explore options and work through micro interactions within the primary flow. For example, at the checkout step we debated how to handle promotional codes as well as gift card codes for fans that purchased their subscription at Comic-Con. By evaluating pros and cons of multiple options, we refined our design to handle code entry with a single input and ensure the UI was streamlined to keep users focused on the main flow.

Delivering High Fidelity Designs

With UX decisions made earlier in the process, I swiftly applied our visual design system, detailed unique form field interactions and identified error states. Through a combination of Confluence based design specs and Zeplin based responsive screens mockups, I empowered the tech team to quickly get started on front-end implementation.

Below are the foundational UX features implemented for launch.

Step Tracker

Makes the process transparent

Key Benefits

Keep users motivated during checkout

Promo Code Field

Subdued design prevents exits

Look and Feel

Image and UI style evokes the DC tone

Success Metrics

15K

Subscribed users in first 48 hours

500K

Subscribed users 2 years after launch

3MM

Registred users 2 years after launch

The beta launch made a splashy debut at SDCC 2018, with over 15K fans joining in the span of 2 days. The same flow was then extended for launch and supported acquisition of over 3MM fans during the 2 year growth period after launch.

CASE STUDY O2

Comic Browse
Redesign

Shortly after launch our original library of 2,000 comic books was slated to get 10x bigger — a huge improvement to the core value proposition, giving active subscribers a reason to engage with the app on a recurring basis. We needed to drastically improve the comic browsing system, but we also wanted to address an underlying challenge: How might we design a user-centered comic browsing system effective for advanced readers while still welcoming casual fans that primarily watch movies & TV shows?

Drag right and left for a before and after of Comic Browse 

User Research: Prototype Testing

I led a group of 4 designers, including myself, through a prototype testing cycle to unpack the questions floating around our problem statement. How does browsing differ for beginner readers versus advanced readers? Do more advanced filtering options alienate the beginner group?  Do fans want to be guided to a book or do they want to self-serve? What are the most salient filters shared by readers of all levels?

In addition to designing a prototype iteration, I wrote the test plan and collaborated on the discussion guide in consultation with the Warner Brothers global research team. Though not exhaustive, the qualitative focus groups tamed our broad assumptions and renewed our focus for the remainder of the design process.

Key Learnings

Simplicity and control are a core expectation for both beginner and advanced readers

Browsing by character and storyline are the highest priority filter options

'Storylines' was preferred to the label, 'collections', which was too vague

Readers expected a dynamic browsing experience, wanting larger imagery and motion

With the fundamental direction established, my role shifted to consult and support nuanced design choices by another designer, Jeff Huang. His hard work along with collaborative sessions between product, android, iOS, web and backend teams lead to a revamped browsing experience launched in April 2019.

Entry Points

When on the main comics section, we added a special carousel to offer quick browsing based on the top ways fans prefer to look for a book.

Comic Storylines

Storylines offer a digestible narrative for readers of all levels to get started. Learning that fans browse visually, we designed these modules for the content team to deliver a bold and colorful list.

Filtering by Character

Tagging books by character is a huge undertaking and constantly evolves. For the redesign we were able to offer the top characters as an easy way to filter down the huge library of comic series.

Success Metrics

The impact of this effort is not straight forward. While we didn’t impact the top-level goal of lifting the percent of monthly active users reading books (this continued to hover around ~6%), the number of pages being read grew month over month after our new designs were launched (jumping from ~18MM in March to ~32MM in May).

Infromed by these metrics we knew there was room for improvement, so we conducted evaluative usability studies to find new ways to optimize the experience.

CASE STUDY O3

User Research
& Feedback

To elevate user voice within our organization, I co-founded a new functional team connecting members from data analytics, product management, customer service and community engagement under one umbrella. Weaving insights and learnings together across these groups, we were better positioned to triage feedback and strategically plan for research activities based on emerging themes.

Optimizing Search

One project that exemplifies our newly formed group is how we honed in on improving the search experience on DC Universe. We first noticed a trend in customer reviews complaining about search results and our community forum manager was quick to note several incidents of similar complaints.

When we analyzed the data, we found some glaring shortcomings—on the web in a 30 day period ~80% of users were abandoning the search flow. Though the data was not as clean as we would have liked, we still had enough of a signal to learn more with qualitative research.

With the urgency of this data at our backs, I led the effort to organize and execute user research to identify the key problems and ultimately optimize the search experience. I drafted a test plan document to align with the product team choosing unmoderated evaluative sessions to best support our objectives. Though they require a bit of extra planning, unmoderated interviews enabled me to quickly scale the research across platforms and collect data within a couple days as opposed to a couple weeks.

As a designer, I’ve always found observing sessions to be the most compelling part of the process. To bring other designers, product managers and developers into the process I shared raw interviews and facilitated workshops to kick off synthesis as a group. From these sessions I distilled the key learnings, edited compelling highlight reels and designed a presentation to share the findings with our broader organization.

Key Learnings

Here is a snapshot of the key learnings from the project along with links to explore the test plan and learnings summary presenation.

Search Field

Users experienced difficulty clicking all search results from the search field

Recommendation

Provide a keyboard shortcut hint and click affordance on search icon

Results Page

Search results page did not convey enough relevance based on natural search terms

Recommendation

Explore new search results layout and optimize swiftype query results

Auto-Suggestions

Auto-suggestions were not understood as links to detail pages

Recommendation

Use labels to indicate content type or link to search results page

CASE STUDY O4

Fan Profile
Redesign

As our subscriber base grew to over 500,000 users, we continuously sought ways to engage and ultimately retain fans. One of those efforts was for the users profile, called My DC, to become the focal point for customizing the app and creating a more personal experience. Originally MyDC was simply a library, but for redesign we aimed to add in a QR code for physical events, a snapshot of community activity as well as the app settings.

Collapsable Header

The profile gives an immediate space for fans to customize to their liking, but collapses to allow for quick access to the library below.

Customizeable Profile

Fans can go to town and upload a custom avatar and background which display in the community forums.

QR Code

For comic events, like New York Comic Con, fans scanned their in app QR codes to get fun merchandise and access to special events.

Community Snapshot

Passionate fans love participating in the forums, and we wanted to treat them with a special page for a snapshot of their activity. Cute comic animations abound, implemented with Lottie, an amazing tool from Airbnb to translate vector animation into json.