Home Return to the Comcast Bio

Beta testing simplified with Firebolt Developer

Getting Started
Dev Application
User Testing
Visual Design
Wrap Up

Comcast, TATA
My Role
UX Lead & Principal
Project Time
Overview #

Firebolt Developer, is a marketplace-like app to load, run, and debug Firebolt SDK applications. Real-time feedback if an application crashes with the ability to see runtime code errors like popular editors.

A developer faces hurdles while learning a new platform. Firebolt SDK is no exception to that rule. If anything, it meets more of a challenge because of its recent release.

I led a team's effort to discover how developers learned, applied that research to build a developer portal, developer testing app, and kicked off a new platform over a year and a half. We launched four products in six-week dev sprints.

Backstory #

A few years ago, Comcast and other large cable companies formed RDK, an open-source platform to run their set-top devices.

After version one, a problem arose when demand for third-party device demand fell short and provided little incentive for popular applications to join the platform. Even worse, competitors like Google saw an opportunity to enter the market with a version of Andriod for TVs and set-top boxes.

Getting started #

The initial discovery focused on how developers learned and what methods were the most effective. The team and I needed a holistic overview of what was required and how to get there. We sat down with stakeholders, developers, and the product team to define goals.

  • Create a marketing website to lure 100 new developers to Firebolt.
  • Build a robust testing application that reduces third-party vendors' reliance on our internal QA and Dev teams' assistance.
  • Create a learning center that teaches new developers what Firebolt is, which version is best for their application, and how to qualify for the Firebolt Program.

We first tackled the marketing website; next, we learned and built a lesson-based system to onboard new developers.

Dev Application #

The success of our first two products was paying off unexpectedly. Instead of the influx of independent developers we initially sought out, we were getting more corporate publishers. That led to more strain for our QA and Dev support teams. The developer testing application became our next priority.

User Insights

Developers prefer a debugging experience with Git integration and regular updates.

We didn't have to start entirely from scratch; There was a version of the application available and lacked most of what we were trying to achieve.

Dev testing app in 2018.

The team objectives were to rapid prototype, iterate, and repeat until we achieved:


Phase 1

Prioritize bug display similar to typical code editing software


Phase 1

Add suspend functionality and validation to everything

Wireframe — 1

Our hypothesis was developers who would use the app for the first time would want to see their app first. We imagined a scenario where developers could have several builds of their app and want a way to organize them.


Wireframe 1

All the features combined lacked hierarchy, which resulted in a disjointed experience.

Wireframe — 2

I asked our QA team for help; I wanted to know if our assumption about the groups is warranted. Most teams work on a max of three builds, which is far under our hypothesis. Dropping that opened up the possibility to focus on functions: Start and Stop.

Wireframe — 3


Wireframe 3

The moment we realized we had an idea that met our goals and saw the clarity and hierarchy in place, we moved to test.

User Testing #

Paper Prototyping was the most agile and reliable way to test a set-top box application. Our testers were split between high and low domain knowledge. Early tests revealed:

Test Results

3 of the 4 participants could not figure out how to access the shortcut controls.

Test Results

General dissatisfaction and frustration due to lack of navigational clarity.

Note: Two of the participants noted that the low-quality keyboard impacted their experience.

Paper Prototype — 1

In the first round, our testers were asked to open an application then stop it.

Paper Prototype — 2

To prove that we had solved the navigational problems, we asked the next round of testers to perform the first test. To advance the experience, we asked them to perform a secondary task: Open an application, then suspend it.

Test Results

The navigational elements proved to be more intuitive, but one tester asked for help.

Test Results

Assumption: A second drawer to add clarity. The impact was not helpful, and if anything, complicated the interaction.

Our iteration included changing from Options to Controls to help clarify the shortcut commands drawer. We also added toasts, which showed the command they used after using it, and removed the second drawer option.

Test Results

The toasts helped by clarifying actions and boosted the testers' confidence.

Test Results

We solved the problem of testers asking for help while using shortcuts.

Paper Prototype — 3

Testing version three came later during our run-up to deployment for version six. We added more screens and toasts to the test to show participants feedback per their actions. In addition to that, we added an Xfinity remote. The task was to use the keyboard or remote to open, suspend, then return home.

Visual Design #

Conceptualizing the initial design, I kept a couple of thoughts in mind. Refer to what we learned from testing and work within these constraints:

  • The interaction was limited to a few JS transitions. (Ex. slide-in/out)
  • We're limited to three Fonts.
  • SVG's were problematic use a PNG when possible.
  • A resolution of 720p
Proposed Visual Design

Design System

We needed icons and typography that worked together. Our answer was with Xfinity's TV design system icons and font.

Design System

Brandmark progression

Design System


Primary Blue indicates any action. Primary Orange was initially used as a secondary action until we moved it to the primary validation action for simplicity and clarification.

Primary Backgrounds
#292929 / #767676

RGB(41, 41, 41) RGB (118, 118, 118)

Secondary Backgrounds
RGB(0, 0, 0, 73)

RGB(0, 0, 0, 90)

Primary Action

RGB(0, 169, 157)

Validation Warning Actions

RGB(255, 127, 80))

Design System


Segeo, a monospace font, was selected due to its familiarity with the debugging interface.


Xfinity Standard
App title, Options, Toasts


Segeo UI
App titles

600 — Bold
400 — Regular

600 — Bold
400 — Regular
300 — Light

400 — Regular
300 — Light

600 — Bold
400 — Regular

Version 2 Changes

A drawer feature with shortcuts and help information
A debug/diagnostic screen
A grouped apps bundled with a vertical slide for additional apps
A shortcut toast popup
Production Build of version 2
Iterations #

One unforeseen problem was with SVG's. Scaling became a problem from 720p to 1080p. The drawer wasn't scaling correctly; it showed too much horizontal white space. We solved it by including a second SVG but exposed a long term problem for other resolutions.

SVG Scaling

Version three was updated for internal teams but not distributed to our partners. Version four was updated and deployed.

Version 3

Replaced the "Add New" function with a toast that shows detected, and loaded.

Version 4

Solved the scaling SVG issue with a viewport JS script.
Added new icons based on the updated design system.
Production Build of version 3/4

Version five was updated for internal teams. Version six was updated and deployed.

Version 5

Added Metrological's Lightning App Store.
Added more set-top devices and support for computers.

Version 6

Revised the debug feature.
Added remote control voice framework.
Added more toasts and adjusted the UI to clarify shortcuts.
Debugging Update
Production Build of version 5/6
Launch #

The combination of Paper prototyping and working with QA drove the development cycle of this product. It allowed the team to quickly produce an outcome that helped internal and external development teams reduce their applications' beta testing by weeks.

I want to give the QA team a huge thanks for all of their work supporting this application. Without their help, the design team would not have had the insights that drove many of the application's features.

The dev testing app — 2020
Wrap Up #

Firebolt was my first experience leading not just other designers but everyone else in a team. Tracking those who reported to me was a big challenge. I created a doc that outlined each task, worker, discipline, check-in dates, and due date to solve that.

The other challenge was in getting to know everyone. Local workers are easier because grabbing lunch or just checking in will build a relationship. International workers are different because of the time difference in some cases that was 12 hours or more. After experimenting with ideas, hosting a snack break on Teams or Slack helped build better relationships.


The most significant impact was felt by the internal teams, who no longer had to work each step of the way with developers. Cost-saving estimated over $1M a year.

Return to the Comcast Bio
Graphic Designer (3 Years)
Web Designer (10 Years)
UX Designer (4 Years)

Product Designer (8 Years)
I am a lead experience designer at Verizon. Contact me with something interesting.

Thinking about it? Email me


View or download my 2022 Product Design Resume