The Ask
The Marvel Unlimited app is a well-loved application where comic book fans can read the digital version of Marvel Comicbooks. The app had built up a lot of UI and tech debt over the last decade and stakeholders were eager to add new features fans had been requesting.
The team decided 2020 was the year to do a complete redesign and rebuild of the codebase. With such a large endeavor stakeholders wanted high-fidelity prototypes to go through user testing to validate we were going in the right direction.
Additional, visual design leads wanted to try out some ambitious user experiences and wanted to feel them out.
Prism Design System
The design leveraged a lot of the Disney Prism Design System. Marvel was one of the first two applications to leverage it, making it a perfect testing ground for the new design system.
Type and color Ramps were easily translated into reusable styling rules which speed up development. Grids were standardized letting us reuse code from previous projects fairly easily.
Some screens were able to completely reuse with a little bit of reskinning from the National Geographic prototype, such as the search and browse screen.
Keep it Simple
We work closely with our UI motion design team on all of our products. For Marvel Unlimited they wanted to try out a unique set of collapsing and expanding cards based on when a user started or stopped scrolling.
Collapsing Scroll
The team was concerned that this experience may look great in After Effects but not feel good when using it. We developed it and our concerns were valid as it turned out to be challenging to use and felt clunky.
Simple Scroll Logic
After trying several different small variations on this behavior we ultimately decide that keeping it simple is the best way to move forward and we removed the behavior altogether.
Variants
Prototype Variants Menu
The design team wanted to test out a number of layout variants. The UX engineering team built the prototype so that users can easily access a debug screen where they can switch off and on these variants. Users could access this menu by long pressing the tab bar with two fingers at once.
One major question was if we could use a “floating” tab bar navigation or stick to the standard pinned global navigation bar.
User testing revealed the majority of test users liked the floating navigation bar and felt it looked modern.
Hiding Floating Tabbar on Scroll
The design team also felt the floating navigation bar helped with scroll peak issues. The help with peak issues we programmed the navbar to disappear on scroll but reappear whenever a user scrolls back upwards.
The Results
The prototype was put through user testing right before production engineering was scheduled to start working on it. This gave us time to react to test feedback and adjust requirements before handing it off to production engineering. Test results showed the design was largely received well but helped us identify several friction points to address.
The applications that follow a comic/creator/series feature were confused with the apps’ add to user library’ feature. Our Interaction Design team adapted their requirements to add clarity to these features before handing them off to production engineering.
Marvel Unlimited is currently scheduled to launch in March of 2021.