Calix Website Redesign

Introduction:‍

As digital landscapes evolve, Calix recognized the imperative to revolutionize their online presence to align with modern user expectations. The project's cornerstone was to reengineer Calix’s digital ecosystem, enhancing how it presents its robust product and service offerings while effectively engaging varied user segments.

The Problem

Calix, a leading provider of cloud and software platforms, systems, and services for internet service providers, was experiencing significant growth and establishing itself as the top technology provider for broadband internet in rural locations. They wanted their website to reflect their status as the industry leader.

Business KPIs and Performance Metrics

• Increase Quality Traffic: Organic traffic was slipping, and the website was not designed with a digital journey in mind.
• Consistent and Predictable Design: Every page was custom, creating inconsistency.
  • Problem 1: Navigation difficulties from both prospects' and customers' perspectives, leading to lost potential business and upsell opportunities.
  • Problem 2: Inefficiencies in building and updating pages.
• Persona-Based Journey: Calix wanted to highlight personas on the site, allowing users to self-identify and align with relevant products.
• Simple, Accessible Design and Clear Brand Messaging: Calix sought a modern UX design to help existing and prospective clients understand their offerings and benefits.
• Greater Accessibility and ADA Compliance
• Increase Digital Funnel and Pipeline Build

‍

Website Audit

Information Architecture

• Problem: Users had difficulty with wayfinding.
• Solution: Introduced nesting and grouping to align with personas' mental models.

Progressive Disclosure

• Problem: Complex content led to pages overloaded with information.
• Solution: Introduced progressive disclosure to provide users with the right amount of information and options to dive deeper if needed.

Lack of Page Structure

• Problem: No clear distinction between different types of pages, leading to user confusion.
• Solution: Created page templates and a set of components based on UX best practices for both desktop and mobile.

Competitive Analysis

We developed a new internal process called the "Ask the Audience" approach for the competitive analysis:

• Identified pages in content blocks to analyze the content, purpose, and story of each page.
• Modeled after competitors and top industry leaders to understand successful content organization, making modifications based on Calix's business and user needs.

Persona Definition and Journeys

Calix had existing persona documentation, but we needed more information on how those personas interacted with the website. Although not part of the initial deliverables, I identified the critical user flow for each persona and tied it to business KPIs.

For the first round of user journeys, we made assumptions based on earlier conversations, presented our findings to the client, and revised based on feedback. This activity helped us identify pain points and opportunities for each persona before moving on to page definitions and wireframes.

Page Definition

Using our research from the competitive analysis and user journeys, we transitioned to sketching and content definitions. We faced challenges at the intersection of the Define and Design process:

• Problem: Lack of an existing design system slowed wireframe production.
• Solution: Created a new process with a Copy Lead responsible for page definitions and storytelling. I developed a batch of standard components (Heroes, CTAs, 3ups, etc.) based on modern UX best practices and identified the best components for each page module. This process allowed for quick iterations and collaboration, saving hundreds of hours and money for Calix and future clients.

Wireframing and Prototyping

I directed my UX designer to create low-fidelity wireframes based on the sketches. We used a divide-and-conquer approach, creating batches based on critical flows identified in the user journeys. This method facilitated usability testing by directing users to take specific actions in a flow rather than testing isolated pages.

I held regular UX check-ins with my designer to maintain quality and speed. We presented the wireframes in three batches, conducted internal and client reviews, and completed multiple revisions for both desktop and mobile.

Design and Development

We handed over the final wireframes to the design team and heldUX check-ins to ensure the designs aligned with the wireframes and followed UX best practices.Throughout the process, we included the Developer Lead in presentations for technical feasibility, fostering collaboration. We also created a resource document for developers, and our Associate Creative Director was embedded in the subsequent developer Sprints to ensure the designs were executed as expected.

The redesign of the Calix website achieved significant results:

• Increased Quality Traffic: Organic traffic increased, reflecting improved website design and user engagement.
• Improved Navigation: Users reported an increase in ease of navigation, reducing drop-offs and enhancing the user journey.
• Consistent Design: Standardized components and page templates ensured a consistent and predictable design across the website.
• Enhanced Persona-Based Journey: Users could easily self-identify and navigate to relevant products, resulting in an increase in user engagement with personalized content.
• Improved Accessibility: Achieved greater ADA compliance, making the site more accessible to all users.
• Increased Digital Funnel: The enhanced user experience contributed to an increase in lead generation and a more robust digital pipeline.

These results demonstrate the successful implementation and positive impact of the redesigned Calix website, aligning with business objectives and significantly enhancing the user experience.