BACKGROUND
Brightspeed is the nation's fifth largest ILEC valued at over 7.5 billion USD. It is expanding its fiber optics network to reach 1 million new connections by 2023. As a spin-off of Lumen and CenturyLink, it serves 6.5 million locations in rural and suburban areas. Brightspeed focuses on fiber-based telecom solutions for B2C and B2B markets in the southeast, southwest, and great lakes regions.
Card image cap
THE PROBLEM
In November 2021, Apollo Global Management (A hedgefund) struck a deal with Lumen Technologies to acquire Brightspeed. After the acquisition, the website experience felt disjointed due to branding associated with Lumen and CenturyLink webpages, as well as subpar navigation and support pages. As a result, a lot of existing users dropped off, leading to client attrition. Since then the organiztion has been affected with existing users dropping of the service and client attrition.
MY ROLE & ROADMAP
I joined the team as senior product designer and worked alongside a UX writer, UX strategist and supervised two UX designers for the whole migration effort. My team was brought on to help the new transition from Lumen (formally CenturyLink) to Brightspeed. We immediately had two main goals that would span close to a years worth of work.
  • Help with the migration of "cloned pages" from Lumen.com and Centurylink.com to the new Brightspeed.com Business experience and launch by October 2022.
  • Build a new 2.0 website experience for Brightspeed and launch mid January 2023.
OUR APPROACH & DIRECTION
DEFINING THE CHALLENGE
DAY 2 - BUILD 2.0 EXPERIENCE
Before diving in and starting to build a new experience, there was a lot of planning and strategy before we could start to design, which involved:
  • Design workshop
    • Rose-thorn-bud
    • Affinity mapping
    • User flow
    • Define user types (Proto-personas)
    • Competitive analysis
    • Define requirements
  • Design systems
  • Iterative working sessions
  • Support development efforts
DESIGN WORKSHOP: ROSE, THORN, BUD & AFFINITY CLUSTERS
Used these two methods together to seek insight from an existing experience in order to discover patterns and connections to guide positive action. It's best to use this method since I needed to clarify goals and objectives, define immidiate needs and create focus. This method helped a way to provide structured way to reveal participant's thoughts, observatitions and concerns, generates healthy discussion and frames challenges in a way that leads a healthy path forward.


PICTURING THE TARGET AUDIENCE
Since we did not have access to any customers at the time, and we were on an incredibly tight deadline, we utilized proto personas.




USER JOURNEYS
COMPETITIVE ANALYSIS
We needed to look at specific pages of our competitors to see how they solved design challenges, and how they speak to their audience.
Responsive image
Detailed competitive analysis of Spectrum, Verison, At&t and Google fiber business landing page:
KEY INSIGHTS & OPPORTUINITIES
Through user interviews and workshops with our stakeholders we understood the gaps and opportunities for the new experience as shown below:

USER FLOW
We started to create the site map to determine what's working, what's not, and what areas need improvement, also to visualize how individual webpages are related to each other.

2.0 DESIGN SYSTEM
I took full ownership to research, create and maintain the branding guidelines and new design system in Figma which was migrated from Sketch. More than 15 new components were built accross 15 design sprints to satisfy the new design needs and improve the user experience.
Design Guidelines:
Responsive UI Elements:
WORKING SESSIONS & 15 SCRUM SPRINTS
We started our sprints and prioritized tasks for redesinging Business landing page first followed by segment pages, product pages and support pages. All the tasks were borken down into small stories on Jira, which were deligated to designers, writers and developers. Every sprint were 2 week long with 4 working sessions in each sprint. We delivered solutions every working session backed with data and user research and received good amounts to feedback which we incorporated in iterative working sessions.
We tried to incorporate and balance what the client wants while maintaining business goals and user needs. This helped us maintain a very good relationship with them.
Working sessions on Mural.
Click on the window above to view

Working Session in detail.
Click on the window above to view
HI-FIDELITY PROTOTYPES
During the working sessions, we designed mid to high-fidelity prototypes to receive iterative feedback. We started to create pixel perfect Hi-fidelity prototypes based on the feedback of 4th and final working session of every sprint.

We designed the wireframes for three different screen sizes, such as desktop, tablet, and mobile. The desktop and mobile versions were the most commonly used by the majority of users. Once the final designs were completed, our responsibility shifted towards supporting the development process.
RESULTS
BRIGHTSPEED BUSINESS LANDING PAGE
We first built the Business Solutions page using components that we built based on the requirements we gathered from our competitive analysis, proto personas, and our clients at Brightspeed. This pages purpose is to help users navigate to their business segment (Enterprise, Wholesale, Public Sector, Small Business, or Channel Partners.) We wanted to highlight different areas of support and sales on the page, and touch on subjects like upcoming events, promotions, and of course content to support the brand.
We weren't able to modify the branding of few components like the 'Contact form' since it was connected to the Marketo form from the Lumen website experience and due to tight deadlines, we coudln't afford to develop a new component for it. The first built components included:
  • A hero header / carousel
  • A link bar
  • Image + text component
  • Card boxes with icons
  • Contact bar (Sales & support)
Responsive image
1.0: After migration

2.0: Redesign, Visit /ew/businesssolutions/
PRODUCT SEGMENT
Next on our list was a product segment page, and we started with Wholesale due to client needs. Many components were reused from our Business Solutions landing page, but we also had a few new ones including:
  • Breadcrumbs
  • Product selection
  • 3 segment component
The components used across this page were also used to build the Medium & Enterprise, Public Sector, and Channel Partners pages.
Responsive image
1.0: After migration

2.0: Redesign, Visit /ew/wholesale/wholesale/
PRODUCT PAGE
Product pages are where we start to get into the meat and potatoes of Brightspeed Business. Overall it is following a consistent pattern while presenting information in a clean and effective way.
I expect these pages to be changing in the future as the products change, and we develop more resources and support information around these products. We transformed the lumen product pages with brightspeed components and branding which included few of the new components as shown below:
  • Breadcrumbs
  • New Brightspeed icons
  • New Image Component
  • Comprehensible writing
Responsive image
1.0: Lumen Design

2.0: Redesign, Visit networking/dedicated-internet-access/
SUPPORT PAGES
Contact support and Contact Sales were the last set of webpages we had to redesign. We provided a complete new solution for the whole segment with new functionality, components and content. The Day 1 consisted of a large wall of text with an unclear direction for the user to ask for help. The new page were designed in a way that we grouped segments and displayed them separately using a dropdown selector, so users could specifically select the type of help they are looking for rather than just searching for it in wall of text. The new components used in the page are:
  • Breadcrumbs
  • Heading + Dropdown
  • 3 segment component
  • Accordions
1.0: After migration

2.0: Redesign, Visit /ew/contact-us-support/
RESEARCH FINDINGS
Relationships matter, especially the ones you haven't formed yet. While on this engagement, my team had a lot of quick wins. We hit the nail on the head early on in many sprints, saving us a lot of iteration work. This is all thanks to proper research and a great client team. Our team created a lot of noise, earning much praise across Brightspeed and internally at CGI, creating a lot of trust between the two companies.

Please look at the metrics below that compares the Day 1 vs Day 2 activity generated via analytics
Responsive image
More time was spend on Business Solutions Day 2 page versus the Day 1 version and the bouncerate dropped by 50% for that page alone.
Responsive image
The image above some numbers that are converted from the Marketo form to date. Coverted status means that the business have agreed for a contract with Brightspeed.
Analysis: March and April 23 have the highest # of leads vs any other months, with Feb averaging higher than December 2022. Day 2 months have a higher converted metric than Day 1.
The challenges of engagement didn't lay within building designs and meeting client requirements. The challenges laid within making ourself heard to higher parts of Brightspeed. Getting clients to acknowledge the value we bring to their company and partner with us. We did this, especially where it was necessary, but we didn't get to do this enough with the consumer side, who ultimately makes more decisions around budgeting for the entire company. We are nowhere near done, but certainly off to an amazing start.
Responsive image
Back to top