internet services

Empowering Connectivity with a Seamless Digital Experience

Race Communications is a rapidly growing internet provider specializing in high-speed fiber internet services for underserved communities in California. The goal of this project was to rebuild the B2C marketing website and optimize the online order flow. This initiative aimed to educate users about the benefits of fiber internet, simplify the customer journey, and establish brand credibility in a competitive space.
The landing page and design components for the Race Communications marketing website

Client

Race Communications
A leading fiber technology company offers a full range of communications services in California.

Timeline

October 2023 – November 2024  |  5 Phases

Team Composition

A multi-disciplinary team including a business strategist (Phase 1), visual designer, project lead, senior UXUI designer, and junior UXUI designer.

My Role

As the Senior UXUI Designer, my primary responsibilities included building a flexible design system, refining the order flow, and crafting a cohesive brand experience. I played a strategic role in client-facing interactions, guiding Race Communications through design decisions, wireframing, and rapid iteration to meet evolving project needs.
Phase 2-3
User journey mapping
Wireframes
Design system design
Client presentations
Phase 4-5
User story discussions
Order flow iteration
Design-Dev handoffs
Quality control
Goal

Rebuild the B2C marketing website and optimize the online services order flow to educate users on fiber internet, simplify the customer journey, and build brand trust in a competitive field.

Challenges & Solutions

Complex fiber benefits needed simple communication for all users.

Limited client design knowledge required detailed wireframes for direction.

Client relied on external design required scalable, clear solutions.

User-Centric Design

Simplified terms and used visuals to explain fiber benefits, bridging knowledge gaps.

High-Fidelity Prototypes Early On

Provided visual clarity to facilitate alignment and quick decision-making.

Scalable Modular Design System

Enabled client to manage content independently for sustainability and updates.

Design Process Overview

The project unfolded in five progressive phases, each focusing on specific outcomes and iterations.
Phase 1

Research & UX/UI Audit

Conducted comprehensive user research and an audit of the existing website. Identified key user pain points and gaps in the current digital experience.
Phase 2

Wireframing & Design System Development

Developed wireframes to outline the core user journey and layout. Created an initial version of the design system to establish a cohesive visual language and component library.
Phase 3

Refining Visual Identity & Completing Marketing Website

Finalized the brand’s visual identity and incorporated it into the website. Expanded the design system, adding components that support scalability and consistency across the user interface.
Phase 4

Regulatory Compliance

Integrated government-mandated broadband labels and information into the design. Ensured that all regulatory requirements were met without compromising user experience.
Phase 5

Order Flow Enhancements

Streamlined the order flow, making it more intuitive and user-friendly. Conducted usability testing to validate changes and gather user feedback for continuous improvement.
Solution

Design Decisions & Rationale

Dashboard mockup

Simplified and Accessible Design

Simplified communication by addressing knowledge gaps with relatable explanations of fiber internet benefits.
Used icons, illustrations, and photorealistic images to visually demonstrate the value of upgraded services.
Enhanced accessibility with clear and engaging content tailored to varied user expertise.

User-Centric Navigation

Created intuitive pathways with clear labels to help users navigate the site effortlessly.
Replaced complex jargon with accessible language for diverse audience groups.
Designed navigation to keep users oriented and engaged throughout their journey.
Dashboard mockup

Streamlined and Transparent Order Flow

The redesigned order flow focuses on clarity, ease of use, and transparency, creating a seamless and trustworthy experience for customers.
Mockup

Seamless Integration

Ensures a smooth transition from the marketing site to the ordering process, reducing friction and enhancing user confidence.
Mockup

Clear and Credible Steps

Features transparent pricing, clear next steps with visual cues like progress bar, product images and location maps.
Mockup

Optimized User Actions

Enables users to skip irrelevant steps, edit orders easily, and navigate with clear CTAs and intuitive button design.
Dashboard mockup

Modular Design System

Built a flexible framework that supports long-term scalability and business growth.
Maintained consistent branding with reusable components across all site and order flow.
Empowered Race’s internal team to manage updates independently, reducing reliance on developers.

Responsive Design Approach

Optimized the site for mobile users, ensuring seamless functionality on the go.
Designed adaptive layouts to provide consistent experiences across all device types.
Delivered scalable solutions that maintained usability on diverse screen sizes.
Dashboard mockup
Impact

Measurable Impact on Engagement, Conversion, and Satisfaction

The redesign transformed the digital experience, driving significant engagement, improving conversion rates, and elevating customer satisfaction.
Design process

Services Order & Checkout Flow

The case study below demonstrates how a user-centered design approach can significantly impact user satisfaction and business outcomes. By optimizing the order flow, we were able to increase conversion rates and reduce customer support inquiries.
1. Empathize

Understanding Our Users

To begin, we identified our target audiences: homeowners, renters, and business owners in the services available areas in California. Understanding their needs and pain points was crucial to designing a user-centric solution that is not only solving users' problems, but also archiving the business goals.
To gain deeper insights into user needs and preferences, we conducted thorough user research, including:

User Interviews

We conducted in-depth interviews with 15 potential customers to understand their specific needs and frustrations.

Surveys

Via online surveys over 200 potential customers, we collected quantitative data on user demographics, behaviors, and preferences.

Usability Testing

We observed 15 users as they interacted with the existing order flow to identify pain points and areas for improvement.
2. Define

Key Pain Points & Design Goals

To address the key pain points identified through user research, we focused on the following design goals:

Unclear Services Benefits

Users were unsure of the benefits of fiber internet and struggled to make decisions.

Difficulty Understanding Plans

Users struggled to understand the different service plans and their features.

Complex Ordering Process

The existing order flow was confusing and time-consuming.

Clarity

Provide clear and concise information about the overall benefits.

Simplicity

Streamline the user journey and reduce cognitive load.

Efficiency

Optimize the order flow to minimize user effort and time.

Key Performance Indicators

Conversion Rate

Our top goal is to increase the number of users who complete the service order process.

Average Order Value

Additionally, encourage users to select higher-tier plans and add-on services in one of the main goals.

Sales NPS Score

Improve user satisfaction and loyalty through a positive user experience is the key to success.
3. Ideate

Information Architecture & User Flows

We designed a user-centered information architecture and user flow that prioritized:

Clear and Intuitive Navigation

A well-organized navigation structure to help users find what they need quickly.

Progressive Disclosure

Revealing complex features and settings only when necessary to avoid overwhelming users.

Consistent User Experience

A consistent visual language and interaction patterns across different screens.

Efficient Task Completion

Minimizing the number of steps required to complete common tasks.
Based on our research findings and the backend data processing requirements, I designed a streamlined and intuitive user flow. The key steps in the process in the front-end include: Providing Address, Selecting Service Plans, Providing Contact Information, Setting Payment Method, Creating PIN, Scheduling Installation, Order Confirmation, and Order Completed. The order of the first and last three steps is fixed due to the nature of the service order process:
Providing Address
As the service is location-specific, accurately identifying the user's address is crucial. This step determines service availability, pricing, and potential promotions.
Order Confirmation & Order Completed
These steps are the last two since they represent the completion of the order and the initiation of the installation process.
Scheduling Installation
This step is placed towards the end of the flow. This is because it requires backend processing to determine available time slots based on the user's specific service and location. By placing this step later in the process, we can ensure that the provided time slots are accurate and up-to-date.
Through multiple iterations and user testing, we optimized the order of steps in the user flow to create a seamless and efficient user experience. By prioritizing user needs and leveraging data-driven insights, we were able to fine-tune the process.
Understanding the Initial Approach
Initially, collecting user information early seemed logical. However, it was discovered that this approach could potentially deter users by interrupting the core service selection process.
The Revised Approach
After careful consideration, we decided to prioritize the core service selection process. By presenting service options upfront, we can capture user interest and motivate them to complete the order. Once the service is selected, collecting user information becomes a natural next step.
4. prototype

Interface Design & Content Strategy

With a focus on user experience, we designed a clean and intuitive interface that guides users through the order process seamlessly:

Clean and Minimalist Interface

A clean and minimalist design reduces visual clutter and improves readability.

Consistent Visual Language

A consistent visual language, including typography, color palette, and iconography, creates a cohesive and professional look and feel.

Visual Hierarchy

Important information is highlighted through typography, color, and spacing.

Clear and Concise Language

Simple and direct language is used to avoid confusion and improve understanding.
Dashboard mockup

Interactive Elements and Microinteractions

Expandable sections provided additional information without cluttering the screen. Subtle animations and transitions added visual interest and improved the overall user experience.
Dashboard mockup

Card-Based Design with Product Imagery

Cards were used to organize information into digestible chunks, making it easier for users to scan and understand available service plans and compare options. High-quality images enhanced the visual appeal and provided context for the products offered, building trust and credibility.
Dashboard mockup

Realtime Cost Estimates and Dual Panel Layout

The expandable order summary panel lets users review their order at any time during the process, enhancing trust and transparency. The dual-panel layout improves information hierarchy and minimizes cognitive load by clearly separating primary actions from secondary ones.
4. Testing & Iteration

Usability Testing for Feedbacks

To gather authentic feedback, we invited potential customers and cross-functional team members to navigate the prototype and complete tasks related to ordering services without any prior explanation of the plans or interactions. With just one month to build the order flow from scratch to high-fidelity mockups, we prioritized creating a realistic experience for testing, anticipating multiple iterations.

There are two main buckets of findings from the usability testing:

Confusion over Optional and Required Steps

Users experienced confusion regarding which steps were mandatory and which were optional.
Unclear CTAs further exacerbated this issue, making it difficult for users to understand the next steps in the process.
The presence of passive CTAs for optional actions, while intended to be user-friendly, inadvertently discouraged users from exploring add-on services, potentially impacting revenue.

Cognitive Load and Inconsistent Design

Inconsistent use of visual elements, such as card styles and interaction patterns, created confusion and hindered user navigation.
Unclear CTAs further exacerbated this issue, making it difficult for users to understand the next steps in the process.
To address these key findings, we refined the flows and interactions through multiple iterations. Below are examples of the primary improvements we implemented:

Refining Plan Selection

Version 1
Dashboard mockup
Version 2
Dashboard mockup

Enhancing Address Confirmation

Finding: Users were unsure if they had entered the correct service address.
Solution: Displayed the full address on the screen and provided a clear "Edit" button, allowing users to easily confirm or modify the address.

Improving Service Plan Selection

Finding: Unclear selection mechanism for service plans. Users were unsure how to select a plan.
Solution: Added a clear CTA button ("Add to Plan") within each plan card, and made the plan selection process more intuitive and user-friendly.

Prominent Business Plan Option

Finding: Business users were inadvertently selecting residential plans, leading to frustration and potential abandonment.
Solution: Moved the "Business" plan option to a more prominent position on the page, making it easier for business users to identify and select the correct plan type.

Simplifying Progress Indication

Finding: The multiple step indicators created confused users when the actual number of steps varied.
Solution: Used a single progress bar which provides a more concise visual representation of the user's progress.

Optimizing Add-on Selection

Version 1
Dashboard mockup
Version 2
Dashboard mockup

Optimizing Add-on Quantity Selection

Finding: The use of radio buttons limited user flexibility and increased cognitive load.
Solution: Introduced an intuitive "plus/minus" system for adjusting the number of add-ons, providing a clear visual cue for adding multiple lines and encouraging users to explore additional options.

Encouraging Add-On Selection

Finding: Passive CTAs discouraged users from exploring and selecting additional phone lines.
Solution: Used more active and encouraging language to incentivize users to explore and select additional services.

Optimizing Scheduling Flow

Version 1
Dashboard mockup
Version 2
Dashboard mockup

Separating Personal Contact Collection

Finding: Combining multiple tasks on a single screen increased cognitive load and user confusion.
Solution: Separated these steps into distinct screens, allowing users to focus on one task at a time

Streamlining Scheduling

Finding: Displaying time slots across multiple dates increased decision time and risked abandonment.
Solution: Displayed a limited number of optimal time slots to encourage quick decisions while introducing a "Schedule Later" feature to allow users to complete orders at their own pace.

Enhancing Order Summary Visibility

Finding: The initial order summary was hidden, requiring users to actively click to view it, which could disrupt the user flow.
Solution: Introduced a persistent order summary panel on the side, providing users with constant visibility of their order details, enhancing transparency and reducing the need for users to constantly switch between screens.

Improving CTA Placement

Finding: CTAs in two locations, by the content and at the page bottom, confused users and increase effort.
Solution: Repositioned the CTA buttons closer to the relevant selection points, making them more easily accessible and encouraging user interaction.
Through these design iterations, we effectively addressed key user insights, enhancing the overall user experience. Our goal was to not only improve usability but also achieve critical business objectives, such as boosting conversion rates and promoting the selection of higher-tier plans.
A person makes order of the Race internet service on a laptop

Reflections & Learnings

This project reinforced the importance of early client engagement through high-fidelity designs, allowing for clearer communication and quicker iterations. I learned how critical it is to balance regulatory compliance with user experience, ensuring that necessary information is presented transparently. Additionally, the experience of building a modular design system showcased how empowering clients can drive their success and independence in managing digital assets. Overall, this project deepened my understanding of user-centered design in a complex and evolving landscape.

Discover Other Projects

A man views the positive environmental impact that the bank has on the bank's webpage
bank of the west

Banking Experience Design with Design System Strategy

View Project
View the project of FHLBank San Francisco
FHLBank San Francisco

B2B Banking Public Website and Design System Design

View Project