Cracked Apple TV App
Challenge
Cracked recognized the vast potential in the emerging OTT media service industry, valued at over $30 billion, and made a strategic move to tap into this market. As the sole designer for their first OTT application on Apple TV's tvOS 10 platform, I was entrusted with leading the design effort. From start to finish, I meticulously designed the entire user experience for the app, leveraging their extensive video content library.
Solution
In order to maximize the potential of our product, I would lead the design effort using a tried and proven UX design process. Apple TV's user experience revolves around focus, where users navigate the screen by shifting focus using the remote control, instead of tapping or clicking like on a mobile device. Ensuring seamless focus navigation became one of my top priorities in the design process.
PRODUCT DESIGN PRIORITIES
Design with distance in mind
Animation, parallax and color help indicate focus to the user
Design intuitive & simple browsing experience so users don’t have to sit up, they can just relax on their couch
Design Process
Understand
The app creation process commenced with collaborative brainstorming sessions involving various stakeholders associated with the product. These participants included the VP of Cracked, the Product Manager, members from the Video Team, Engineering Team, Sales Team, and myself. During these initial meetings, we delved into overarching business objectives such as expanding the Cracked brand, reaching a wider video audience, and providing users with a means to discover new Cracked video content. To inspire our discussions and generate ideas, we examined existing Apple TV apps, discussing both positive and negative aspects. Additionally, the Product Manager shared basic wireframes (shown below) she had prepared, offering a visual representation of the stakeholders' vision for the app and the video content they wished to highlight.
KEY TAKEAWAYS
Overall business objectives
Basic concept of app
Tons of ideas to incorporate into the product
Initial basic wireframes handed out during kickoff meeting
Research
EMPATHIZE & DEFINE
To begin my ideation process, I began by researching what Cracked’s competitors, as well as other market segments had created with their apps. I took pictures and videos on my phone of certain layouts, gestures and other UI features I thought were interesting while browsing the latest Apple TV apps. I also took a deep dive into all the resources and documentation on the (then) new Apple tvOS Human Interface Guidelines.
A big part of doing research is about figuring out who your users are going to be and what experience they would like to see in a product. Working for Cracked in particular had an advantage because we were able to communicate with our power users in the forum message board feature on our website. The Cracked site’s foundation was based around our forum message board. The website’s content heavily involved our users through posting different user generated content themes in our forum groups, where users could submit there content for money. It also had different chat groups where we could run user tests and conduct research with our power users, so as a product design group, we leverage this to get feedback as to what features they would like to see in our TV app. The main feedback the users were concerned with, was which of their favorite series we would feature in the app, such as “After Hours” which was a fan favorite. So based on this feedback is what determined which shows we would feature in our initial launch.
Some research image examples I took of existing apps for ideation
Sketch
WIREFRAMES & WHITEBOARDING
To help process my ideas, I began by sketching out different layouts in my notebook based on the initial wireframes I was given. I usually make many iterations before I deemed them ready to discuss in our product meetings. From these initial sketches and iterations, I would use them as a guide to transfer onto the whiteboard to reevaluate with the entire team. This process has always worked best for me to work out the user process.
Wireframe sketch ideation examples and whiteboard user flow process examples I created
Design: Low Fidelity Mockups
LO-FI MOCKUPS
Once the user flow was finalized, I developed low fidelity mockups of the main screens to present to the team. My idea was to have two distinct UI layouts to differentiate between the Cracked “Series Content” and the Cracked “Studios Content”. Since Cracked’s “Studio Content” were larger budget featured series, I wanted to highlight them with larger portrait thumbnails that scrolled horizontally on top of a full screen background image taken from the show. ( In my first ideation sketches, I envisioned a short video snippet from the series that would loop as the background of the page instead of static image but this proved to be too large in scope to have prepared before launch. ) On the “Video series” content pages, the thumbnails would behave how they do on the home screen design. They would scroll horizontally to reveal different episodes within the season and vertically to show different seasons and reveal other series content as you scrolled further down the screen. I also wanted to include the Cracked logo on the home screen to brand the site. I noticed on a lot of apps I looked at, in my research phase, they only had their logo on the loading screen, and not on the home screen, which made me forget which app I was looking at.
Low Fidelity comps of the main screens of the app
Design: High Fidelity Mockups
HIGH-FIDELITY MOCKUPS
In the next step, once the lo-fi mockups were approved, I developed high fidelity versions of the main screens for engineers to use as a guide to build the app from. I also made some slight adjustments in these versions since seeing the design with full color images gave me a better idea of the full user experience. Instead of having the logo on top of the images which I had in the lo-fidelity comps, I moved it to the upper left corner above the featured content. I originally was going to have the logo on top of the featured content to anchor the title and have the content title fade in out as the user swiped, but after seeing it with the images, I felt that the logo would be too distracting in that capacity. I also used teaser images, instead of UI arrows since I felt this was a more intuitive and less distracting experience on large TV displays and a carousel pagination system in the lower right corner of the featured image to let users know where they were in the carousel cycle.
Design: Parallax Asset Creation
ICON AND THUMBNAILS
When creating the parallax thumbnail assets as well as the app Icon, I used Apple’s Parallax Previewer program. In order to optimize the parallax effect, I had to think of the design in multiple individual layers. In other words, the more layers the image consisted of ( no more than 5 ), the more depth it gave the effect. Below you can see some examples of the multiple layers that were saved out as png files for the app icon as well as a couple of examples of thumbnail assets layers.
App Icon - LSR parallax with 4 image layers
Video Series Thumbnail - LSR parallax with 3 image layers
Studio Series Content Thumbnail - LSR parallax with 2 image layers
Design: Asset Creation Guidelines
To guide the editorial design team in creating the images that would represent the content on the new app, I held a design meeting where I went through the apps layout and gave them a simple design specification sheet to help them along in the image creation process. This guideline showed how the images would look in the app and in what context the assets were going to be used. The 2:3 image ratio size was the only asset that was specific to this app. So for these images, which were for the Cracked ‘Studio’ content pages, they would have to be created from scratch. By design, the other image sizes already existed since they were standard sizes we used on our website.
I also created “loader” placeholder thumbnail images (seen below guidelines in this section), which were created in a monotone color palette to keep the file size as low as possible. These are added to the app incase of any connectivity or other technical issues that keep the normal content thumbnails from loading.
Loader Placeholder Thumbnails
Implementation
AID DEVELOPMENT
To help facilitate the build of the app, I put together “redline” guides and cutout all the individual image assets to handover to the app developer who I was working with remotely. Creating redlines helps ensure that designs are made according to specifications. There are always some unforeseen issue when building apps from static images, so i generally like to include a working prototype to send as well.
ENSURE FUNCTIONALITY
I worked side by side with the development team including the engineers and QA from the handoff of the final comps to the delivery of the apple store of the final project. From sitting side by side making small adjustments with an engineer to making visual notes where I would compare what had been built to the original comps to show changes that need to be made. ( Seen here below redlines )
Redline guide examples
Visual note examples sent to developers to help ensure functionality
Evaluate
No project is ever truly completed because there is always room for design improvement. Evaluating the project upon its apparent completion is an essential part of my design process. While working at Cracked, we adopted a fast-paced and efficient approach to product development. However, there was often a "one project to the next" mindset among business owners. As a result of being a lean team, I believe we missed out on fully developing our products due to this mentality. The key to success lies in iteration—making continuous improvements based on user feedback, in order to create intuitive, delightful, and engaging products.
Throughout my career as a designer, I have learned the most from taking the time to review and evaluate projects. Did we effectively solve the problem we set out to address? Did we meet the needs and goals of our users? What alternative approaches could we have taken to enhance the product? Reflecting on these questions has been invaluable in my professional growth as a designer.
EVALUATE
Did we solve the problem we were looking to solve?
Did we meet the users needs and goals?
What could we have done differently to improve the product?
Conclusion
Results
The Cracked audience on the Apple TV app showcased an impressive average engagement rate, surpassing 20+ minutes per session, indicating their strong interest and involvement in the content. This notable metric demonstrates the appeal and captivation of the iTV app among viewers, reflecting the success of prioritizing content and designing an intuitive user interface.
In addition to the high engagement rate, the app's ad revenue witnessed a significant boost by incorporating 15 and 30-second pre-roll buys. This strategic approach effectively captured the attention of the Cracked audience during the app's pre-content phase, leveraging the clear visual hierarchy and remote interaction design considerations. By optimizing performance and adhering to Apple TV guidelines, the app provided seamless navigation and a cohesive user experience.
The app was designed to be inclusive by including features like closed captions and audio descriptions, making it usable for people with different abilities. This not only made the app more accessible but also improved engagement and user satisfaction. The app underwent thorough testing on actual Apple TV devices and was continuously improved to make sure it loaded quickly and provided a smooth experience for users. This led to longer engagement sessions and happier viewers.
The combination of these key considerations and metrics demonstrates the successful design and execution of the iTV app, leading to an impressive average engagement rate, boosted ad revenue through pre-roll buys, enhanced accessibility and optimized performance.