• Facebook
  • Twitter
  • Google Plus
  • LinkedIN
  • Pinterest
Tagged in
iGuide is a classic 10-foot UI that was in need of a major face-lift. First created in 1996 and last updated in 2004, this UI has been used by millions of consumers through several different cable providers. In order to compete in today's market, I was brought on to give it a sleek, modern look and tasked to transition the design from 4:3 to 16:9. The massive overhaul has been met with much praise from our customers garnering over 2 million subscribers within the first year of deployment. By continuing to work closely with engineering and product management, new features have been developed to further its appeal to both cable providers and end users alike.

With the underlying functionality of the product already well-established, tested and documented, this project started out almost like a reskin in 2014. A lot of time and research went into this redesign. Passport, iGuide's sister product had just gone through the same redesign. I spearheaded this effort as well. So, much of the process for iGuide was handled in my Passport effort. Here's what that entailed:

Early on in the Passport project's lifecycle, colors and fonts were the big items that we could update while code changes were basically out of the question due to the scope, resources and time constraints on the effort. The font limitations were enormous in Passport, as it had previously used Univers Ultra Condensed. This was a very very narrow font and we had to maintain character count and legibility. After a ton of testing, I arrived at the best, most legible option that conveyed the updated aesthetic, Roboto Condensed. Even so, this font selection was difficult to read on low-end boxes that had minuscule resolutions (320x240). This was a huge challenge. The solution ended up being pixel-by-pixel refinement of a bitmap font, which too required a lot of testing.

Meanwhile, I had been working on new color schemes to bring the guide into the 21st century with style. With legibility remaining a major concern, testing each color scheme meant validated legibility on a range of set top boxes. I learned a lot doing the color testing. Too much contrast on a TV, especially older tube TVs results in vibration. Even though I was already well aware of this, I tried to balance enough contrast with not-too-much contrast. One of the most surprising finds in my testing was that white on blue was more legible to most people than white on black. Due to this, we added a blue-centric color scheme that addressed legibility concerns that some had with the default dark interface. Research often humbles the UX designer and renews perspective.

The Passport engineering effort continued its progress as I was brought on to do the same task for the iGuide product. This was before the dawn of Zeplin (which makes my life so much easier), so there were a lot of manual pixel specifications created to help engineering achieve the desired look. iGuide had to look as though it was in the same family as Passport. This lead to very little wiggle-room on font selections and the color palette. Having already done the testing though, we were able to move forward with confidence.

After some time, the revamped iGuide product shipped and it now has over 2 million subscribers. Carrying the momentum forward, we wanted to build on the experience to help compete in today's market. This meant going more visual. People have a massive preference towards browsing content visually with box art. Previously, this legacy product had no imagery other than iconography. This all changed with the inception of the Dashboard. From the very beginning, I was there to conceptualize this visual On Demand experience, working closely with the product manager and lead engineer. I began researching the massive number of competing products, high and low-end that were out there on the market. Without a dedicated research team, I read comments online, had many conversations with friends, coworkers and family members. I took a LOT of notes. But immediately, stakeholders and upper management wanted to see what this new feature would look like to validate their investment in the product's future. With some perspective on the market, I working closely with the PM and lead engineer conceptualizing several designs and navigation models while keeping in mind the limitations of the older set top boxes we would be working with. The biggest challenge for this effort was memory on the lower-end boxes. This forced a balance to be found between imagery size and quantity. The final designs reflect this balance.

With an approved approach, I was able to start mapping out the interactions with detailed flow charts. I also provided engineering with a full set of screens to reference. At this point Zeplin was available and became an integral part of our design communication process. Once a working demo was available, I performed user testing to validate our decisions. The feedback was positive overall, but as always, made note of areas for improvement. This was an important step in finalizing decisions for the product. The designs and interactions were updated, providing us with a better product. Towards the end of this version's development, I shifted my focus to a backend UI that allowed service providers and operations specialists to manage this new Dashboard product. The work for that phase can be seen on the Video On Demand Configuration UI page.