Tech Crunch Site Redesign
2023 | UX Design
A comprehensive redesign to enhance user engagement and content discoverability, leveraging strategic UX improvements and innovative design components.

INTRODUCTION

TechCrunch, a leading technology news platform, needed a full site redesign to align its digital experience with its forward-thinking editorial vision. The project focused on improving content discoverability, creating a cohesive design system, and enhancing overall user engagement. My role as the lead UX designer was to drive the redesign, translating editorial goals into intuitive and visually compelling user interfaces while ensuring scalability across platforms.

MY ROLE

Lead UX designer responsible for design system initiatives, conducting competitive analysis and user research, designing wireframes, writing design documentation for dev handoff

THE TEAM

1 UX designer, director of experience strategy, 1 design director, 2 visual designers

TIMELINE

Nov 2023 - Dec 2023

THE CHALLENGE

TechCrunch’s existing site struggled with content discoverability and lacked a cohesive design system, leading to inconsistent user experiences. Users were struggling to find relevant content quickly, and the overall experience wasn’t streamlined across devices or content types. The editorial team also needed a flexible interface that could adapt to changing content priorities without compromising user experience or aesthetic consistency.

DESIGN PROCESS

The first step in tackling this project was conducting a site audit to assess the existing TechCrunch website and design systems strengths, weaknesses, and opportunities for improvement. Additionally, insights from the competitive analysis informed strategic decisions on layout adjustments, content presentation enhancements, and the introduction of new components aimed at optimizing user engagement.

New components were strategically implemented based on insights gathered from the site audit and competitive analysis. These components were added to the design across all relevant page types (e.g., homepage, article pages, event listings) and design system components.

We developed an article toolkit to encapsulate all the essential elements needed for an article detail page. This toolkit includes features such as image and video embeds, WYSIWYG editors, pull quotes, and right rail components for content recirculation. Additionally, it incorporates a progress indicator, a robust utility bar that follows users down the page for easy access to share links, inline article cards, an inline audio player, accordions, and options for bulleted and numbered lists. These components ensure a rich and engaging reading experience, accommodating various content types and enhancing user interaction.

THE SOLUTION

Enhancing Accessibility and Responsiveness Across Devices

We implemented a mobile-first design, ensuring that content was easily accessible and visually appealing on smaller screens. The focus on mobile optimization led to a streamlined, responsive design that prioritized ease of navigation and readability across all screen sizes.

VIDEO PLAYLIST
UTILITY BAR
Simplified Navigation

The navigation was restructured to be more intuitive, allowing users to quickly explore curated topics and trending content. I designed for desktop and mobile navigation and integrated a search bar with multiple states, including predictive dropdown, hover, clear input, and close bar states.

A clean, accessible navigation structure was key to improving content discoverability and keeping users engaged for longer periods.

NAVIGATION HOVER STATE
USER LOGGED IN STATE
SEARCH BAR OPEN STATE
PREDICTIVE SEARCH DROPDOWN STATE
TechCrunch+ Integration

Designed a dedicated landing page and article detail pages to showcase premium content and drive subscriptions by clearly communicating the value of joining TechCrunch+. We also designed a featured TC+ Topics module for better visibility, increasing the likelihood of user discovery and engagement.

The TechCrunch+ initiative was a direct response to the need for better monetization, driving conversions through clear content differentiation and user flow.

TC+ TOPIC MODULE
TC+ LANDING PAGE
TC+ ARTICLE DETAIL PAGE

IMPACT + TAKEAWAYS

The redesigned website successfully launched and positioned TechCrunch as a modern, user-centric platform:

• Enhanced user ability to discover and engage with content.
• Streamlined editorial workflows, empowering teams to publish live updates on breaking news and events.
• Created a scalable design system that future-proofed the platform for evolving content and user needs.
• Strengthened TechCrunch’s brand identity with a modern aesthetic that resonated with its tech-savvy audience.


Reflecting on the TechCrunch redesign, there were areas for improvement. Enhanced iterative user testing would have allowed for more precise feature fine-tuning. Additionally, implementing a structured post-launch analysis to track the redesign’s effectiveness against KPIs would have provided valuable insights for continuous optimization. These adjustments could have further solidified the long-term success of the project.

I learned a lot and most importantly learned the importance of balancing strategic insights with user-centric design. I’ve gained a stronger understanding of the need for scalability in design systems and the value of continuous testing and post-launch feedback to ensure long-term success.

Content Discoverability
Simplified navigation and introduced dynamic content modules to surface trending stories and editor’s picks more effectively.
Flexible Design Solutions
Designed dynamic hero layouts and reusable components, giving editors the flexibility to showcase featured content while maintaining visual consistency.
Collaboration & Iterations
• Partnered with the editorial team to align designs with TechCrunch’s brand vision and content strategy.

• Worked closely with developers to address technical constraints and ensure flawless implementation.
Scalability & Accessibility
• Worked closely with visual designers to enhance the design system to include scalable components and ensure WCAG compliance for accessibility.

• Developed a cohesive framework that could adapt to future needs, minimizing technical debt.