Let's Fix Kenwood's Car Stereo Interface

I recently needed to replace an in-car stereo and nav system with something more modern. I quickly realized that from a design and user-experience perspective, the aftermarket stereo landscape is a complete disaster. There seems to be little to no conscious effort to optimize these systems for real-world usage, and the interface design feels like an afterthought.

I ended up selecting a model from Kenwood, as it was the best balance of features and price This is what you’re presented with when you start your car with a Kenwood DNX892 installed. Keep in mind that this is in Kenwood’s flagship line of products.

And here’s my take on what it should be:

A list view:

Here's What's Wrong

  1. At the highest level, Kenwood seems more interested in showing you what their systems are capable of than focusing on giving you the most important choices at the right time.
  2. Garish, distracting design aesthetic. The point of these aftermarket systems should be to integrate as well as possible with your car while providing a superior user experience (both visually and aurally).

    As an example, that strangely-lit, blue, carbon fiber background has absolutely nothing to do with anything, aside from someone thinking it looks "racy". It serves no purpose other than to distract the user by adding visual noise. There is no car in the world in which this texture looks natural.

  3. Ridiculously large amount of wasted space. A screen of this size needs to be efficient and place a very high value on each pixel. As one example, in the above screen the "NAV" and "TEL" buttons occupy almost 1/4 of the entire screen real estate. These are both buttons that have physical equivalents at the bottom of the unit. You don't need both.

User Models

There are 2 types of physical interactions with a system like this.

  1. "I have time to look at the screen and perform complex tasks"
  2. "I'm driving, and need to make changes based on feel or approximate location because my attention is on the road"

The current system doesn’t seem to make any distinction between these models, and everything is presented as if the user is giving the system their full attention.

As an example, on the touchscreen, arguably the easiest location to find without looking is the bottom-left corner. It’s the closest point to the driver’s hand, and can be found by feel due to the bezels. Kenwood has taken this critical location, and dedicated it to the equalizer button!

How often do you actually adjust the EQ on your car stereo? Maybe a handful of times over the course of its life? On this system, the EQ button is in the core position on EVERY. SINGLE. SCREEN. Even when you’re in navigation mode, the EQ is still the dominant control.

This area should be dedicated to the most common activity for a given context. In this case, if I’m in my favorites list, it should be used for cycling through my favorites.

There are dozens of examples of this lack of user empathy throughout the system.

Showing the Wrong Information

Here is what you see once you select an audio source.

Let’s start with the complete waste of space that is the green navigation bar. Its sole purpose is to tell you that the navigation system is active, and will also show you the current street name. This is almost completely useless in this context. If I need navigational information, I’ll press the physical “NAV” button. This is wasting approximately 11% of the screen real estate.

As sophisticated as an 8-track

Now let’s move our attention to the preset buttons (listed as P1 through P6 above). I hope you have a good memory, as these are the only labels you’ll get. I guess the upside is that you only have 6 slots to fill with presets. To be precise, you can actually store more than 6 presets, you just have to store them in different “bands”, which makes absolutely no sense in a modern system. You have to press an action button, then select the other band, and then press another button to exit the band selection. After all of this, the current P1-P6 is replaced with another set of P1-P6 buttons that look identical to the first.

Why not show channel names and even imagery, since HD Radio and SiriusXM support these? This is seriously broken and woefully lazy design.

A Look at an Alternative

In my opinion, the key is striking the right balance between giving the user a rich, fully featured experience when they have attention to give, and simplifying things when they don’t. Remove the clutter, focus on what’s important, and consider the user.

Let Them Build It

Kenwood should also take a cue from other enthusiast-based markets and let their most ardent fans contribute. If you get the hardcore folks on board, they will espouse your products for free.

One way of doing this is to allow customers to create and share their own themes. This accomplishes two goals:

  1. It will improve loyalty among these enthusiasts. When they can contribute their own preferences to their purchase, they're much more likely to develop a fondness for it.
  2. They can create a collection of themes tailored to certain cars, which can then be shared with other users.

The Tip of the Iceberg

There are many more views than the ones shown above (there are dozens of settings screens alone). However, if designed correctly, the redesigned home screen is the one in which a user will spend the vast majority of their time. In the world of web and app development, we’re used to a certain level of rigor as applied to interface design work. This does not seem to be the case in the aftermarket audio industry (hell, even OEM systems are mostly rubbish).

I don’t mean to single out Kenwood here, just about all of these manufacturers produce terrible interfaces. There’s certainly an opportunity for a company like Kenwood to differntiate itself by placing an emphasis on user-centered design, and don’t treat the software as an afterthought.

MAME Arcade Cabinet

Since we’re now living in the Midwest, where space is abundant, it’s time to build an arcade cabinet for the basement. Researching existing plans and ideas puts you into a late-90’s internet time warp. Marquee tags and CRTs abound!

I figured I’d write up a quick post on a modern build (circa 2014).

  • Build the cabinet myself from a 3/4" walnut plywood.
  • Don't want to deal with retro-looking CRTs. This would be a flat panel display.
  • No custom controls here, I went with the X-Arcade Tankstick + Trackball
  • Reuse my old-ish Mac Mini, which has plenty of power for these old games.

The Process

My first steps were to order the items that would dictate the overall dimensions. In this case it was the display panel and the Tankstick. While I could have placed these two in SketchUp, I don’t really trust that process and nothing beats having the actual components on-hand for layout purposes.

For the display, I picked up the Asus VE278Q 27-Inch LED panel. It’s a 1080p display, which is more than enough. An important consideration here is the fact that it has a Display Port input. My intent is to use an old Mac Mini to power the cabinet, so this is important.

After doing some measurements and SketchUp prototyping, I settled on a design I liked, and proceeded to make sawdust!

Well, actually I proceeded to make polystyrene dust. Using a jigsaw, I created an approximate shape of the side panel in order to make sure all of the heights and angles were comfortable in actual use.

From there, I cut the plywood sides, supporting shelves and struts and did a sanity check assembly.

After ensuring all was well, it was just a matter of building out the rest of the cabinet using the plywood pieces. For joinery, I took the easy route and used pocket screws. In a few places, rabbets provided a little more structural support.

One detail, that I think goes a long way in making things look professional, is to mask the lexan overlay to create a black border around the display. It really ups the perceived contrast of the display and hides the ugly bezel.

I finished the cabinet with a wipe on polyurethane. While waiting for it to dry, I began the process of figuring out what software would power the front end. I ended up selecting Maximus Arcade, primarily because it required the least amount of configuration and setup headaches.


I’m really happy with how the MAME cabinet turned out, and I’m sure it’ll lead to many happy retro gaming nights in the future. My last step will be to figure out what to do for the marquee…

Architectural Visualization

Over the past few weeks, I’ve taken some time to investigate the current state of tools used in ArchViz. There is some amazing work being done out there, a lot of which can be seen over at Ronen Bekerman.

Here are a few of my own experiments. Light bath Kitchen shot Cathedral Blue bathroom Red bathroom Cylinders

UITableView Parallax Background a la Path

Path does a clever little parallax trick when you overscroll the main timeline view. This effect gives a nice sense of depth between the tableview and background image.

Reproducing it is quite easy, and only requires a few entry points.

The gist: give the UITableView a transparent header, through which we see the positioned background image. When the user scrolls, if the scroll offset is negative, position the underlying image accordingly.

  1. Add a UIImageView behind the UITableView and offset it a bit vertically from its natural state. This gives some room for it to move vertically and still be onscreen.
- (void)viewDidLoad {
    [super viewDidLoad];

    // Create an empty table header view with small bottom border view
    UIView *tableHeaderView = [[UIView alloc] initWithFrame: CGRectMake(0.0, 0.0, self.view.frame.size.width, 180.0)];
    UIView *blackBorderView = [[UIView alloc] initWithFrame: CGRectMake(0.0, 179.0, self.view.frame.size.width, 1.0)];
    blackBorderView.backgroundColor = [UIColor colorWithRed: 0.0 green: 0.0 blue: 0.0 alpha: 0.8];
    [tableHeaderView addSubview: blackBorderView];
    [blackBorderView release];

    _tableView.tableHeaderView = tableHeaderView;
    [tableHeaderView release];

    // Create the underlying imageview and offset it
    _headerImageYOffset = -150.0;
    _headerImage = [[UIImageView alloc] initWithImage: [UIImage imageNamed: @"header-image.png"]];
    CGRect headerImageFrame = _headerImage.frame;
    headerImageFrame.origin.y = _headerImageYOffset;
    _headerImage.frame = headerImageFrame;
    [self.view insertSubview: _headerImage belowSubview: _tableView];
  1. Hook up your controller as a UIScrollViewDelegate and implement the scrollViewDidScroll callback.
  2. For each call, move the underlying image a multiple of the scroll offset.
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat scrollOffset = scrollView.contentOffset.y;
    CGRect headerImageFrame = _headerImage.frame;

    if (scrollOffset < 0) {
         // Adjust image proportionally
        headerImageFrame.origin.y = _headerImageYOffset - ((scrollOffset / 3));
    } else {
         // We're scrolling up, return to normal behavior
        headerImageFrame.origin.y = _headerImageYOffset - scrollOffset;
    _headerImage.frame = headerImageFrame;

You could take this even further by having multiple images relatively offset, creating a nice multi-layer parallax.

Drafting Pencil

Drafting Pencil Specularity experiment. Depth of field is handled by exporting a depth map from Cinema 4D to After Effects, using Frischluft.

This is How to Launch a Kickstarter Campaign

Double FineTim Schafer (Full Throttle, Psychonauts) launched a Kickstarter Campaign to create an old-school graphical adventure game. When I first heard about it, around $3,000 had been raised. Less than 24 hours later, that number is north of $650,000 (the goal was $400,000).

This is the perfect example of how Kickstarter can be a disruptive influence: a group of talented people are able to subvert the existing industry restrictions to do work directly for their customers. This style of game probably doesn’t have enough potential to interest a big name publisher, but it has more than enough potential to interest the developers themselves.

Make sure you watch the into video, it’s hilariously done and clearly conveys the goals of the project. Check it out.