ENGAGE DIVERGENT FANS
Help Lionsgate Build A Dynamic Digital Experience for Its Fans
In late 2014, Lionsgate asked for our help to design an app to complement the download release of Divergent; a movie based on a trilogy of novels by the American author Veronica Roth. Customers that purchased the movie would receive bonus content that could only be experienced through this new Divergent app. The app needed to showcase this content and also include an integration with Comcast's Xfinity platform.
Since the original book trilogy sold a combined 6.7 million copies and the first installment movie grossed over $288 million worldwide, there as a lot at stake to build a successful mobile experience that would allow Lionsgate to continue to engage its fans.
I took ownership of the interaction and visual design for this project. We also worked with content strategists, a information architect and a product manager.
I have omitted confidential information in this case study to comply with my non-disclosure agreement. All information reflects my own opinion and does not necessarily indicate the views of the employer.
The Challenge
With millions of fans’ high expectations and the future of the movie trilogy at stake, we knew we needed to determine how could we could best extend the fantasy elements from the books and the movie to the app. We wanted to stay true to the story origins, but we also knew that, in order to provide lasting value, the app couldn’t just be another duplicative spot for digital movie content. How to make the app engaging became the key that we needed to unlock.
The Approach
Survey the Fans
What could it be a better way to understand our target users than to talk to them directly?
I started by interviewing a small sample of 20 Divergent Fans. I was seeking to discover what makes the Divergent story attractive? I quickly found that despite the fantastical elements of the story, Divergent fans would often relate themselves to certain characters. They would see themselves in the fictional figures, and relate to the character driven themes of courage, resourcefulness, perseverance, overcoming obstacles and challenging what’s impossible. To make our app engaging, we decide to go with a character-centric approach. The main navigation would spotlight a series of Divergent characters. Users could then drill into each character for a biography and related media.
​
Make it Engaging and Exploratory
As the Divergent fans fantasized about exploring in a dystopian world, the app needed to go beyond aggregating content from the movie and instead offer an extension to that fantasy. We designed character-specific interactive maps based on the story. Through these maps fans could interact and discover extra missions in an atmosphere that mirrored the movie’s environment. Through “How-to” sections, fans could also continue to learn mission-critical skills.
From Android to iOS
There are many factors to consider when building an experience for both Android and iOS platforms. The differences could be unclear at first sight. However, since we wanted each user group to get the full experience, I knew that we had to pay attention to the smallest details to make the experience native to each device. For example, I made sure that we accounted for the styles of all the alerts and pop-ups from both platforms.
​
Those screens usually appear suddenly and require some quick actions from users, so we needed to keep it clear and avoid any confusion. We crafted our wording choices to comply with the platform standards; User chose “Agree” or "Disagree” with the changes on Androids, while say “Don’t allow” or "OK”for alerts on iOS.
Speak the Same Visual Language as the Movie
When I started designing the interface for this app, I wanted to stay true to the existing visuals from the movie, so the experience could be holistic, rather than fragmented, across platforms. Despite that goal, I didn’t want the design to be a simple duplication. I chose to follow certain visual fundamentals, such as the branding and the main color palette, while elevating the app visual for a dynamic digital experience. The original Divergent faction symbols use many irregular shapes, broken lines and rustic texture to create a dystopian environment. Considering the practical needs of the users to read through the content, I instead utilized a subtle diagonal lined pattern on the dark background to maintain the cleanness. For larger space on the tablet, I also borrowed triangular shapes and bright blue lines to mimic the edgy and futuristic style.
The Impact
The app was released in June 2014 and received millions of downloads. Lionsgate continued to expand content on the app as the Divergent movie franchise grew, including new content to support the release of the second movie of the trilogy, Insurgent. The app served as a platform to keep Divergent fans engaged with their favorite story lines throughout the series.
The Takeaways
Sometimes it's easy for us to forget that we are not users.
When we start the design process, instead of saying “we would or would not want this”, it’s important to engage conversations with actual users to learn if we’ve hit the mark.
It was also very tempting, as a designer, to go above and beyond visually when designing for such a cool culture phenomenon as Divergent. Yet, it’s critical to learn to exercise design skills with control and not to forget to balance aesthetics with usability at all time. In the end, an experience can only be as good as how user can use it.