Jeff Keen

Jake and I just finished a little collaborative effort. For this little thing, he initially wanted a way to throw in a legitimate looking news article into a chat conversation but have it end up with sort of a “just kidding” type page.

To me, this seemed like a good time to bring back the Rick Roll.

We wanted to have the URL look as close to a legitimate news organization as possible, and considered things like “huff.post”, or “nytim.es”, but ended up with with the incredible latlmes.com, which we are pronouncing “Lah-Tillmes”.

Of everything in this silly project, the name is the thing I’m most proud of. A two pixel difference between it and a legitimate news organization’s URL? Amazing.

Because when receiving with a message from a friend like, “whoa, this is crazy” paired with long url like http://www.latlmes.com/culture/john-travolta-assassination-attempt-after-denouncing-scientology-1, are you really gonna notice that it’s a lowercase L instead of a lowercase I?

No. No, you are not.

Jake made the real nice design, and I did the development. Create a headline on the front page, and choose the video your target will end up being forced to watch: Rick Astley, Tay Zonday, or Epic Sax Guy.

Enjoy!

I’ve been working on features for this website lately, one of which has been figuring out silly social sharing links. I’ve had a website long enough to remember the days of building a comment system in Perl, having a hit counter, and that being good enough.

Now you need to have all sorts of crap on a page in order to make sharing as easy as possible. One option is to piecemeal all the different networks together, but that requires giving up some control of your aesthetic, which I am not a fan of.

Or you use a plugin like AddThis, which makes all that easier, maintains some control of your aesthetic, and also allows the people on your site a comical number of options for sharing.

Personally, I don’t like either of these, which left me to write my own. Here’s the problem:

TMI

As a user, how does knowing the breakdown of how many shares your content had on each social network influence me about your content, or where I should share it? If it’s blowing up on Facebook but not on Twitter, should I be more compelled to Tweet about it, or post it on Facebook?

You shouldn’t really care. The thing you’re trying to communicate is: “Hey! This is popular! People are sharing this!” Or if nobody has shared it: “You can share this if you want” and then making that process easy.

If that person only uses Facebook, they’re not going to sign up for Twitter just because that post got more retweets than likes, so why all this extra information?

Things are scattered

Some of my content has been scattered around posted in various places, and it all doesn’t come back nicely to one URL. If I write a new song, I’ll post the soundcloud song URL to Facebook and Reddit, and then I might write about it a bit on here. The Facebook link wasn’t pointing back to here, so any sort of share button I put on the blog post isn’t going to indicate how many shares that song got. Because things are scattered now.

Everything’s getting siloed off, and everybody wants to have a platform for content with their own ranking system. Meanwhile, I’m trying to reel everything back under one roof and consolidate things. More on that later.

Step One

Step one in implementing a consistent indication of popularity on this here website was to write something to go out and fetch social metrics for multiple URLs. That part is done. I wrote a Ruby Gem (aptly named Popularity). Given a url (or multiple urls) it goes out and fetches the social metrics across the major networks, and gives you the total number.

1
2
3
4
5
6
7
8
9
10
11
search = Popularity.search(
    "http://jeffkeen.me/p/I-know-its-you/",
    "http://soundcloud.com/jeffkeen/i-know-its-you")
search.facebook.shares    #=> 38
search.twitter.tweets     #=> 0
search.pinterest.pins     #=> 0
search.reddit.posts       #=> 1
search.reddit.comments    #=> 34
search.reddit.score       #=> 626
search.soundcloud.plays   #=> 14732
search.total              #=> 15407

It was pretty fun to write, and I’d like to add some more features to it. But not before I do the next step of actually hooking it up to this here web site.

We’ve all got those websites that seem to sap away our time. For me, it’s Facebook, Reddit, and Hacker News. For others, it’s Twitter, or ESPN.

I realized that given a free moment while working—like waiting for a file to download, or an app to start up—my muscle memory will kick in and I’ll command-T open a new tab in Chrome and start typing f-a-c or r-e-d-d. And before you know it, my productivity is getting chewed up by an endless stream of gifs, AMAs, and ice bucket challenge videos.

I’ve tried “productivity tools” that block websites completely, but I always felt that those solutions were too severe. I’m not an addict, where one sweet sweet taste of a friend’s flash-soaked concert-selfie will require me to join a twelve-step program; I just need to be reminded that hey, maybe this isn’t what I should be doing right now.

I wanted an extension that would just make me wait 15 seconds or so before letting me see those troublesome sites, with a reminder about what’s important.

After doing some searching, I found that this wasn’t an original idea. Randall Munroe, of xkcd, talked about it in a comic, and a couple of chrome extensions inspired from his comic already existed that did a similar thing. But the experience of these extensions was, pretty pretty poor.

Forcing a short delay is one piece of the puzzle, but how about adding a little inspiration to the mix, with a touch of playful shaming? Front and center: an inspiring quote about productivity. Something that puts some goals in perspective.

“Amateurs sit and wait for inspiration, the rest of us just get up and go to work.”—Stephen King

And then not as loud, but still visible, something to put what you’re trying to do in perspective, customized for each site.

“Honestly though, when was the last time this site brought you joy?”

Put all those bits together, and you’ve got Garlic. Add a 15 second delay plus a little extra motivation to keep you on task.

You use multiple passwords, right? Do some of your passwords just vary by the last character? Probably. reallylongpassword and reallylongpassword1, maybe.

In the clip below, I try logging into Instagram, using the first incorrect password, followed by the second variation.

See what happened there? The first password was wrong, so I thought I’d just edit it and add a 1 to the end of it, but when I tried to do that it cleared the field. This seems to be the norm in iOS apps, and it provides for a less than ideal experience.

There are two correct options, here.

1. After entering an invalid password, clear and focus the field. This makes it obvious to the user that they have to retype their password.
2. After entering an invalid password, don’t clear the field, but allow editing of the field’s contents. To avoid other mediocre experiences, you should also have a clear button on the right side of the input.

What you should definitely not do is make it seem like the field is editable by keeping the contents in there, and then clear it when the user tries to type in it. That’s just rude.

We all had tried our fair share of todo list apps, and none of them quite did the job. A friend of mine swore highly of his very low-tech system: write down the next three things he was going to accomplish, immediately followed by doing them. In a world of overly complex productivity solutions, this worked surprisingly well.

We started talking about creating a web-app that would better mimic this simple approach, called “Daily Goals”.

Common Problems With Todo Software

1. People tend to put too much on their lists, leaving many tasks unfinished at the end of the day.
2. Most Todo list software is either boring, overly-complex, or too open ended. We felt that with the right UI and right messaging, things could be made much better.

How Daily Goals Would Be Different

1. Focus all messaging on what could be done today.
2. Make our UI stand out, by not taking the typical approach to the problem.
3. Don’t allow more than 3-5 incomplete tasks on the list at a time.
4. Don’t automatically carry over unfinished tasks from the previous day.

Design Principles

1. Simple things should be simple, and complex things shouldn’t be too hard.
2. Talk to your users like they’re humans. Light, playful messaging is key.

“Boring software is broken software.”

Sketches

Instead of representing each day’s tasks as a flat list, we thought it would be interesting to represent it as a linear timeline, with each day represented as a card. To the left of today: yesterday. To the right: tomorrow.

The card for “Today” would be focused when the user logs in.

If a user hadn’t visited in a while, instead of showing them blank cards without any tasks filled in, we would mark gaps in the timeline with an icon on the line connecting the two cards. When hovering over the icon, we would reveal a short message, taking a stab at why they were missing those days.

In the sketch above, it says “I guess you skipped work on Wednesday.”

If they were gone for weeks, we’d have an icon of an island with a message that said “Have a nice vacation?”

Comps

The design would be big, minimal, simple, interactive, and playful.

Messaging

Good messaging is essential. It gives your app personality, and makes users feel more closely connected to it. In terms of errors, it can mean the difference between someone forgiving you, and someone bailing.

Welcome messages

For welcome prompts, we used custom messages based on the time of day.

If it was morning: “It’s going to be a productive day. Enter your first goal.”

If it was late morning: “What can you get done before lunch?”

If it was past midnight: “Burning the midnight oil?”

Entering too many tasks

In order to prevent too many tasks from piling up, and to help discourage users from entering very large tasks, the messaging changes depending on what they’ve entered. When prompting for more tasks, each message is different, depending on how many tasks they had entered and had completed.

Interactions

Adding small delighters are vital to a great user experience; the details make a world of difference. Once we settled on the timeline concept, with each card connected by a piece of string, we took it even further by making the string elastic.

Moving between days

When moving between days, the cards snap into place and you can see the wave move down the string. When hovering over a card on the left or the right, the card peeks out, causing the string to droop.

Moving tasks between days

When moving an incomplete task from a previous day to Today, the task jumps off the page while the timeline shifts behind it.

Demo

Here’s a working demo you can look at it. There are definitely bugs, but the concepts are there.

It would be really nice if Messages knew about the people I had on Find My Friends. Right now there’s a disconnect that really doesn’t need to be there.

It works. It’s fine. But you know what would be better? Something like this:

Taking it even further

iOS also has capabilities to detect what you’re doing, such as walking, driving, etc, and I think it’d be really nice if it also said that.

Driving, especially. If the person who just texted me knew I was driving, they might understand why I’m not responding right away. Because I’m being safe, or whatever.

Update: 10/2014. iOS8 Implemented this feature, pretty much just how I outlined in my comp, minus the small text under the name on the main screen. I’ll take it. Much better.

When it’s so easy to pick five frames and try them on, it sure would be helpful to know which I’ve tried before and which I haven’t.

And it’d be so easy, too. They know my order history, and I’m logged in. Why not something like this?

“You ordered the Woodland Tortise color in Februrary 2014 and returned them.”

The KUTX mobile experience was in a sorry state. It’s so bare-bones, it doesn’t even feel minimal; it feels broken. After a friend pointed out that the iPhone app was built using Cordova and Angular, and how easy it was to extract that source code from the .ipa file, I got to work. With KUTX’s first birthday coming up just around the corner, I figured a much improved iPhone app would be a great birthday gift.

Their playlist was freely available on their website and all loaded via javascript, so finding API urls was easy. Soon enough, I had the angular app loading up the current playlist.

Layout

I mimiced the aesthetic of their recently redesigned website, sticking with Futura for the font, but some changes had to be made with how data was being formatted.

The two primary questions we’re trying to answer with a radio playlist are “What’s currently playing?” and “What just played?”

The website shows this data, but the way it’s displayed is problematic. With the currently broadcasting show and the most recently updated playlist right next to each other, it seems like they’re connected. And when DJs update their playlists frequently, they are. But not all do. Paul Ray just don’t give a damn about online playlists when he’s spinning 45s from the 50s, so when Twine Time is playing, the playlist directly below it displays what played hours ago.

So to fix that in the mobile app, I grouped the tracks by show, and displayed them all linearly. If a show doesn’t have any playlist data, you still see the name of the show, and the times it played.

Album Art

The API they were using to pull down tracks had album art available—but not for all the tracks. When it’s available, it’s really nice to see, but when it’s not, we don’t want to leave a blank square.

So instead I used the first letter of the artist name as the album art. Still visually interesting enough to not look broken, until their APIs got better at providing album art.

For background art on the show listings, I used images from their website so that there wouldn’t be any problems with licensing rights.

Happy Birthday, KUTX

I figured giving them this functioning app would be easy—I just needed a contact at KUTX. I posted the app on the Austin sub-reddit where it got much interest, and for a few days it was #1. From some tips I got from that thread, I found out who the guy I needed to talk to was. So one morning I walked into KUTX, asked to speak with him, and gave him a demo, and talked about what I hoped to do—just give them all rights to the app.

Slam dunk, right?

Wrong. You would not believe how many layers of bureaucracy need navigating for a little app improvement like this to get through the university’s approval process. I learned the details in the hour chat we had, and to make a long story short, it couldn’t happen.

So now the source code sits unused on github, and is regularly used on my iPhone alone, while still—many months later—the featureless KUTX-built app is still on the App Store, frustrating KUTX listeners everywhere.

At Spiceworks, we really wanted to stop supporting older versions of IE, but understood from the stats we collected that 5-10% of our users were still on old versions. So we came up with an upgrade strategy.

Whenever you’re asking someone to do something that might be a little unpleasant, it helps if you make it enjoyable, or funny. That’s basic User Experience. Take their mind off the bad part— “You want me to what?”—by distracting them with laughs.

So catering to an audience of IT guys, I thought making an Office Space joke would be appropriate.

And apparently it worked, because it just made it to the front page of reddit today!

I made this for fun while I had mono. (Yes, Mono. At 31.)

It seems easy—just rotate those panels, right? Except they’re half panels. We’re making numbers fold in half, here, and it’s not that simple.