SHIPPED

BroadbandNow

find internet in your area

M — Y

M — Y

M — Y

BroadbandNow (BBN) is a resource hub that helps people find & compare local internet options in their area. These options consists of comprehensive plans/bundles from thousands of internet service providers.

BroadbandNow (BBN) is a resource hub that helps people find & compare local internet options in their area. These options consists of comprehensive plans/bundles from thousands of internet service providers.

CATEGORY

CATEGORY

eCommerce (B2C) • Design System • SEO

eCommerce (B2C) • Design System • SEO

TIMELINE

TIMELINE

7 months

7 months

SKILLS

SKILLS

Product design

User research & testing

Branding
Design system
Interactive prototyping

Responsive design

Product strategy
Stakeholder management

Product design

User research & testing

Branding
Design system
Interactive prototyping

Responsive design

Product strategy
Stakeholder management

TEAM

TEAM

Director of Product Design • Brand Designer • PM • 2x Developers

Director of Product Design • Brand Designer • PM • 2x Developers

MY ROLE

Product Designer

• Led and shipped end-to-end redesign of search results experience


• Influenced product direction by securing CMO buy-in for full site redesign by presenting research-backed mockups, resulting in increased budget allocation for implementation


• Reduced design-to-development time by 40% by creating company's first design system, establishing consistent branding, solving scalability issues, and engineering alignment


• Developed strategic roadmap that aligned 5 cross-functional teams on north star vision, accelerating project timeline by 6 weeks

• Led and shipped end-to-end redesign of search results experience


• Influenced product direction by securing CMO buy-in for full site redesign by presenting research-backed mockups, resulting in increased budget allocation for implementation


• Reduced design-to-development time by 40% by creating company's first design system, establishing consistent branding, solving scalability issues, and engineering alignment


• Developed strategic roadmap that aligned 5 cross-functional teams on north star vision, accelerating project timeline by 6 weeks

CONTEXT

A history of "Well, we don't do that."

Change is never easy. Getting people to work and think differently from their everyday, see other's perspectives, and be able to align on a single vision is very difficult—which is why this project was so significant for the company and really paved the path for a new way of working cross-functionally.


How did this redesign even come about?

There has been a long history of how Leadership and Product tend to zoom into one isolated component to A/B test on core pages without considering the broader context of the entire site and how it affects the overall user experience as a whole.


However, I saw the bigger picture. I wanted to zoom out and understand what and why something was not working vs. guessing with only assumptions and purely relying on quantitative data, which has not been successful in the past.


After discussing with my design team, I initiated to conduct user research, create multiple concepts in hi-fidelity, and present all my findings to the broader team as to why this was such an important problem to solve. I sold this longer-term north star vision aligning all stakeholders, which inspired this redesign.

PROBLEM

Outdated site with no tailored experience

BroadbandNow helps consumers find internet providers, making revenue primarily through click-outs and phone call conversions. Despite being position #2 on Google for "internet providers near me," the site was struggling with:


• Low conversion rates: Users weren't clicking out or calling providers (our primary revenue drivers)

• SEO vulnerability: Ranking #2 instead of #1 meant millions in lost traffic

• Trust problem: Branded inconsistencies made the site feel untrustworthy

• Technical debt: Hard-coded site made optimization nearly impossible



Business Problems

• Inconsistent UI/branding across site

• Hard-coded backend made iterations slow

• SEO-focused design hurt user experience


User Problems

• Hard to differentiate between provider plans

• Comparison required juggling multiple tabs

• Lack of trust in brand (perceived as biased)

SCOPE

Shipping a redesign from 0-1

This is an overview of the design process we created for this project as previously our company did not have one defined.


Although this process seems linear, it was not. Sometimes we would be working on branding/design system while simultaneously iterating on wireframes and user testing.

CONTEXT

A history of "Well, we don't do that."

Change is never easy. Getting people to work and think differently from their everyday, see other's perspectives, and be able to align on a single vision is very difficult—which is why this project was so significant for the company and really paved the path for a new way of working cross-functionally.


How did this redesign even come about?

There has been a long history of how Leadership and Product tend to zoom into one isolated component to A/B test on core pages without considering the broader context of the entire site and how it affects the overall user experience as a whole.


However, I saw the bigger picture. I wanted to zoom out and understand what and why something was not working vs. guessing with only assumptions and purely relying on quantitative data, which has not been successful in the past.


After discussing with my design team, I initiated to conduct user research, create multiple concepts in hi-fidelity, and present all my findings to the broader team as to why this was such an important problem to solve. I sold this longer-term north star vision aligning all stakeholders, which inspired this redesign.

PROBLEM

Outdated site with no tailored experience

BroadbandNow helps consumers find internet providers, making revenue primarily through click-outs and phone call conversions. Despite being position #2 on Google for "internet providers near me," the site was struggling with:


• Low conversion rates: Users weren't clicking out or calling providers (our primary revenue drivers)

• SEO vulnerability: Ranking #2 instead of #1 meant millions in lost traffic

• Trust problem: Branded inconsistencies made the site feel untrustworthy

• Technical debt: Hard-coded site made optimization nearly impossible



Business Problems

• Inconsistent UI/branding across site

• Hard-coded backend made iterations slow

• SEO-focused design hurt user experience


User Problems

• Hard to differentiate between provider plans

• Comparison required juggling multiple tabs

• Lack of trust in brand (perceived as biased)

SCOPE

Shipping a redesign from 0-1

This is an overview of the design process we created for this project as previously our company did not have one defined.


Although this process seems linear, it was not. Sometimes we would be working on branding/design system while simultaneously iterating on wireframes and user testing.

DISCOVERY & DEFINE

Balancing the business , SEO requirements, tech constraints & customers

We conducted a current site audit with how pages were connected and flowed—noting usability issues & inconsistencies.


Also documented existing components into groups and noted any redundancies.

We met with the SEO team to understand their Google requirements & future site architecture as well as engineering to understand tech constraints & restrictions

Looked at multiple competitors to understand the market, specifically High Speed Internet since they were ranking #1 on organic search


Key Takeaways

  • Their cards were more table-like and only highlighted specific information

  • They really focused on personalization of content depending on location to delivery the best availability options

GOALS

GOALS

Site redesign to capture #1 placement on Google

Site redesign to capture #1 placement on Google

Our main objective was to redesign the core search experience to increase conversions while positioning BBN to become the #1 trusted resource for internet plan comparison.

IDEATE & TEST

A/B testing provider cards and page layouts

Using the insights we learned, we explored and A/B tested different iterations for the provider cards since those were the highest converting elements on the page.


We tried:

• adding filters for more personalization

• emphasizing important decision making specs like speed vs. price

• highlighting the first recommended option to prevent decision fatigue

• adding current promos that providers were running to attract interest

We then focused on overall page layouts, having cards stack like the initial design or having a table instead for better comparison.


Our team ended up going with the original layout of provider cards stack because we did not want to stray too far from the original design, but cleaned up the content within to be more relevant and personalized to what users were looking for in this first launch. We can eventually test a table layout for future optimizations.

DISCOVERY & DEFINE

Balancing the business , SEO requirements, tech constraints & customers

We conducted a current site audit with how pages were connected and flowed—noting usability issues & inconsistencies.


Also documented existing components into groups and noted any redundancies.

We met with the SEO team to understand their Google requirements & future site architecture as well as engineering to understand tech constraints & restrictions

Looked at multiple competitors to understand the market, specifically High Speed Internet since they were ranking #1 on organic search


Key Takeaways

  • Their cards were more table-like and only highlighted specific information

  • They really focused on personalization of content depending on location to delivery the best availability options

RESEARCH

RESEARCH

Understanding how people were searching for internet

Understanding how people were searching for internet

Userlytics

Userlytics

I led a total of 40 unmoderated usability tests across mobile & desktop to better understand how the targeted demographic was searching for internet & using our current BBN site.

Key Research Questions

  • How do users currently search for and compare internet providers?

  • What information is critical to their decision-making?

  • Where does our current experience fail them?

Critical Insights

Critical Insights

Needs

Needs

  • #1 priority was finding a reliable provider in their area

  • Pricing & speed were the main specs looked at when comparing plans

  • Comparing provider plans quickly

  • Reviews are important to them

Pain Points

Pain Points

  • Difficult time differentiating & understanding provider plans

  • Frustrated because they could not see pricing

  • Time wasted due to difficulty comparing plans

  • People lacked trust in the brand—relied on multiple resources of unbiased content in order to make a decision

“These options are not relevant to me if they're not at my location.”

“These options are not relevant to me if they're not at my location.”

“I'm looking for the best price for the available speed.”

“I'm looking for the best price for the available speed.”

“I'll probably go with one of the cheaper ones probably, but I need to figure what's the difference.”

“I'll probably go with one of the cheaper ones probably, but I need to figure what's the difference.”

IDEATE & TEST

A/B testing provider cards and page layouts

Using the insights we learned, we explored and A/B tested different iterations for the provider cards since those were the highest converting elements on the page.


We tried:

• adding filters for more personalization

• emphasizing important decision making specs like speed vs. price

• highlighting the first recommended option to prevent decision fatigue

• adding current promos that providers were running to attract interest

We then focused on overall page layouts, having cards stack like the initial design or having a table instead for better comparison.


Our team ended up going with the original layout of provider cards stack because we did not want to stray too far from the original design, but cleaned up the content within to be more relevant and personalized to what users were looking for in this first launch. We can eventually test a table layout for future optimizations.

DEVELOPMENT & LAUNCH

Making sure build matches design specs

Making sure build matches design specs

We ended up doing 2x rounds of UAT reviews with the engineers before it went over to QA to ensure design specifications were built out accordingly while it was in staging.

SOLUTION

SOLUTION

Design System

Design System

Design File

Design File

This is how we organized our design file with each component type having it's own page.

This is how we organized our design file with each component type having it's own page.

Components

Components

Slowly rolled out components by page templates.

Slowly rolled out components by page templates.

Brand Strategy

Brand Strategy

Typography

Typography

Color Palette

Color Palette

Components

Components

Final Design

Final Design

INSIGHT #1

INSIGHT #1

Availability is the highest priority

Availability is the highest priority

Prioritize zip check feature & allow search results to show closest availability first

Prioritize zip check feature & allow search results to show closest availability first

INSIGHT #2

INSIGHT #2

Personalization of content is important

Personalization of content is important

Allow users to filter by: provider, connection type, pricing, speed, & ratings

Allow users to filter by: provider, connection type, pricing, speed, & ratings

INSIGHT #3

INSIGHT #3

Pricing & speed are the most important specs when comparing

Pricing & speed are the most important specs when comparing

Show pricing and emphasize both in visual hierarchy

Show pricing and emphasize both in visual hierarchy

INSIGHT #4

INSIGHT #4

Customers had a difficult time understanding connecting types

Customers had a difficult time understanding connecting types

Provide tool tip to help educate and aid in decision making

Provide tool tip to help educate and aid in decision making

INSIGHT #5

INSIGHT #5

Unbiased internet options & reviews creates trust

Unbiased internet options & reviews creates trust

Provide disclaimer to assure users & make sure all providers show reviews on plan card

Provide disclaimer to assure users & make sure all providers show reviews on plan card

IMPACT

Transformed search from generic to personal

Call Rate

Call Rate

0
0

%

%

Conversion

Conversion

0
0

%

%

Engagement

Engagement

0
0

%

%

Sales

Sales

0
0

%

%

The redesigned experience successfully addressed our core problems:
• Increased conversions by making provider comparison easier

• Built trust through consistent branding and unbiased content

• Improved SEO performance with cleaner, more accessible structure

• Established a design system that reduced development time by 50%

WHAT'S NEXT

The Future

We planned to break this project out into 3 phases to reach our north star vision which was a table layout. Table layouts are much better at comparing content and organizing a lot of information at once. We initially designed this version first after discovering all the user insights but decided to pair the designs back for ease of transition for developers.


For the future, we plan to:

  • Have address check for more accurate recommendations

  • A/B test a table layout

  • Work our way up to the north star vision while refining filters and personalization

  • Update and roll out the rest of the page templates using the new design system

  • Maintain design system and create documentation on how & where type, color, components are used for other designers and engineering team

next projects

Nextiles App

Wearble Tech

Sports Performance

AI

Nextiles App

Wearble Tech

Sports Performance

AI

Nextiles App

Wearble Tech

Sports Performance

AI

UFC Fit App

Health & Wellness

Branding

Design System

UFC Fit App

Health & Wellness

Branding

Design System

UFC Fit App

Health & Wellness

Branding

Design System

LINKEDIN

LINKEDIN

EMAIL

EMAIL

resume

resume

MAY

YUAN

LINKEDIN

LINKEDIN

EMAIL

EMAIL

resume

resume

MAY

YUAN