Cracked Website UX Enhancement

Challenge

The underlying challenge was balancing business goals and solving for user needs while still providing an exceptional experience.

PRODUCT QUESTIONS

• How do we modernize the site?

• How do we make such a content intensive site more engaging and fun to consume?

• How do we keep growing Cracked.com?

Site Modernization

SITE MODERNIZATION

Color Scheme

In order to modernize the site, I needed to make some updates to the overall color scheme. Previously the site had a dark (black) background which surrounded a white body container ( see image in opportunity section above ). I knew it would immediately give the site a more contemporary feel if we made both the container and the background white. There was also internal pressure from members of the sales team that felt the branding of the site needed updating. They felt the current logo looked outdated and the colors of the yellow logo on red were negatively effecting ad sales. Legacy members of the team were adamantly against this, so I looked for a design solution that would appease all parties involved. The solution that we came up with wouldn’t change the Cracked logo ( the styling of our logo already had brand recognition since it had been around since the start of the print magazine back in 1958 ) but we would update the secondary color from a bright red to a more neutral blue. This compromise ended up satisfying everyone involved since it didn’t change the design of the logo and the new color scheme wouldn’t clash with ads being featured on the site. We would later phase out the neutral blue for a more simplified version of the branding, that featured the yellow Cracked logo on white ( First iteration color scheme with neutral blue shown below on the left and then after we phased out the blue to white on the right )

SITE MODERNIZATION

Typography

When redesigning content-heavy websites like Cracked.com, typography plays a critical role in shaping visitors' perception of the site. The choice of fonts can either give the site a modern or outdated look. The font size can help create a visual hierarchy that directs the user's attention to the key points. Therefore, I paid significant attention to upgrading Cracked's font system and fine-tuning the line and letter spacing in each module and section. My goal was to ensure readability, accessibility, and optimize the overall user experience. For the headings, I used the Lato typeface and for the main body copy, Proxima Nova, because of their classical proportions, which provide the letterforms with harmony and elegance. Although Lato and Proxima Nova appear similar at smaller sizes, Proxima Nova was easier on the eyes when reading long bodies of copy. Lato, on the other hand, had a unique look in larger letter sizes, which complemented Proxima Nova well with the site's new layout.

Layout 1

Layout 2

Layout 3

Layout 4

SITE MODERNIZATION / MORE CONTENT

Streamline Navigation

Navigation menus play a vital role in interfaces by offering users important contextual cues. Given their high usage, my focus was on enhancing the friendliness and intuitiveness of Cracked's navigation and dropdown menu. To kick off the process, I used affinity mapping to organize the Nav menu items, aiming for a more user-friendly experience that simplifies content discovery. Starting with simple paper sketches, I encouraged creative ideas to flow freely before transitioning to digital tools to create low-fidelity mockups.

Our research indicated that visitors who were not regulars on the site found the existing category structure confusing. So, as a design team, we suggested a streamlined and less complex navigation layout. For example, consolidating all article-type content under a single category named "Articles." This change was backed by our research findings. However, the business owners preferred to keep certain categories separate to increase their visibility. In the end, we found a compromise to honor their preferences.

BENEFITS

• Created stronger hierarchy

• Decluttered navigation and helped decrease information overload

• Highlighted important or relevant categories

Preferred Design Version: Design Team’s Choice

Launch Concept: Version 1 - Stakeholder Compromise

Launch Concept: Version 2 - Stakeholder Compromise

High Fidelity Mockup

SITE MODERNIZATION / MORE CONTENT

Resizing Navigation Bar

To enhance the user experience, I designed a sticky navigation bar for the desktop site that resized upon user scroll. When the user scrolled past the main navigation header, a condensed version of the navigation bar would animate down. On article pages, the condensed navigation bar would show a yellow position indicator after the user scrolled past the article's headline. This helped users keep track of their progress through longer pieces of content. The condensed navigation bar also featured a copy link button and an overflow menu for sharing the content through email or other social media platforms.

BENEFITS

• Users could navigate site regardless of where they were on page

• Optimized screen space allocation

• Made sharing article easier

• Better User Experience with position indicator

ACCESIBLE CONTENT

Mobile Navigation Drawer

We opted for a traditional sidebar component for our mobile users to navigate the site. To enhance user experience, we designed custom icons for each menu item. This helped users to quickly distinguish between the different sections of the site.

ACCESSIBLE CONTENT

Search Bar

Previously, the search bar component on the site had a small input field, causing the characters in a search query to be hidden as it got longer. To address this, I designed a search bar that could accommodate long search titles without taking up extra screen space. To help developers better understand my vision for the search function interaction, I created an animated prototype which can be seen below.

SITE MODERNIZATION

Video Page Experience

Cracked made a strategic decision to increase their investment and resources into their online video presence. They developed a premium content arm that produced long form narrative web series and recurring video shows like the very popular After Hours Series. My responsibility was to concentrate on the design strategy and ensure that our dedicated viewers had the best possible viewing experience.

MY APPROACH

• Designed larger featured video carousel. This made featured content more visual engaging

• Added time stamps to thumbs

• Infinite scroll for more efficient content discovery

ENHANCED EXPERIENCE

Video Player Page

When redesigning the video page, I centered the design around the video player window to enhance the viewing experience. To achieve this, I enlarged the video window by three times its original size, thereby allowing for the standard video viewing experience to expand the entire width of the body container. Additionally, the video team wanted to showcase the individuals involved in the video's production. To address this, I designed an "expandable" cast and crew module beneath the video player. This module enabled viewers to click on the cast member's names, which would then redirect them to other content featuring the same cast member. Lastly, the page featured an infinite scrolling thumbnail list, which made it easier to discover new content.

BENEFITS

• Optimized video viewing experience

• Highlighted cast and crew: content could now be discovered based on cast members

• Easier to discover more video content

More Content

MORE CONTENT

Infinite Scrolling

In light of Cracked's vast content collection, we aimed to enhance the content discovery experience for our users. Initially, we relied on a pagination system. However, as a team, we decided that implementing an infinite scrolling experience would enable seamless browsing of the site. As shown below, we incorporated the infinite scrolling feature on our index pages and even tested it on our article page. In the latter scenario, the feature would automatically load the subsequent article as the user continued scrolling down the page. (As described in the subsequent section, we eventually opted for a different solution on our article pages.))

BENEFITS

• Fast and easy browsing experience

• Users could discover more content with zero clicks

• No more dead end pages

MORE CONTENT

Related Content Feature

We also conducted an A/B test on our article pages, exploring a "related content block" feature positioned below the article comments section. Unlike the infinite scrolling feature, this block allowed users to choose the next piece of content they wished to read. Our usability testing revealed that users preferred the "related content block" feature on the article pages, but favored the infinite scrolling experience on the homepage and index pages.

SITE MODERNIZATION / MORE CONTENT

Right Rail Modules

For each module on the revamped Cracked website, we created several design variations to choose from. My approach was to provide stakeholders with multiple options upfront, enabling us to A/B test the different versions and select the one that performed best based on data, rather than subjective opinions. Below are some versions of the "viral" content module we tested on the site

BENEFITS

• Modules could be A/B tested, option ran based on data

• Engaging designs rotated to keep site fresh

Image Creation

PROCESS EFFICIENCY

Image Size Creation

To expedite the content publication process, we aimed to streamline the image creation process for the multiple thumbnail assets that accompanied each piece of content. While the writers/editors at Cracked chose the images for the body of the articles, a separate image creation team was responsible for producing the thumbnail assets for the site that represented each piece of content. When I joined Cracked, the editorial designers had to create over nine different thumbnail assets for each piece of content due to the website's numerous non-standard image ratios and sizes.

SOLUTION

To address this issue and improve the overall image quality, I devised a solution that standardized web ratios with larger sizes and higher resolutions, thereby reducing the time required for image creation by half. Every image size on the redesigned site was adjusted to fit one of the new aspect ratios. For the thousands of images on the legacy site that did not conform to the new design, the engineers opted to select an existing image that closely matched the new size and crop it using code instead of having the thumbnail creators remake them.

Style Guide

UNIFIED BRANDING ECOSYSTEM

Online Style Guide for Sponsorship Partners

I developed a comprehensive style guide that we hosted online for easy sharing with our sponsorship partners. This ensured the maintenance of consistent branding when designs were produced by external teams, in contrast to our in-house team. This style guide encompassed branding directives, including color schemes, typography choices, design elements, and specific advertisement specifications for creating ads on our website and product lineup.

Site CMS

ROBUST CONTENT MANAGEMENT

Site CMS Design

I designed Cracked’s Content Management System (CMS), working closely alongside our editorial, product management, and engineering teams. Together, we created an intuitive CMS interface for our website, streamlining content management and publication for our content editors. Our objective was to not only meet our business needs but also ensure a user-friendly experience for our editors in storing and publishing content.