Insights

Redesigning the NPR One App as an Appliance

TL;DR Summary

To redesign the NPR One app around the concept of an appliance, I had one simple test in mind: does this pass the "I'm cooking in the kitchen with wet hands and not wearing my glasses" test. Here's what I came up with.

Before and After

npr01.before-and-after

The App (Appliance) in Context 

In the kitchen

npr02.kitchen

In the car

npr03.car

Take-aways

  • This is isn't an app, it's an appliance.  Like a toaster, a flashlight or an elevator.
  • Big buttons, clear fonts, and tiered functionality help users distracted by the usual radio-listening activities (driving, cooking, laundry, etc.).
  • A gadget interface, instead of a print-influenced layout. 
  • Branding breakthrough: inserting the NPR One logo into the interface merges the app with the brand, the organization, and the audio experience itself.
  • A strong visual vocabulary to quickly deliver the five context clues that users mentally triangulate when deciding to stay or pass on a story. 

1. Structuring the Zones

Establish clear content and functionality zones:

npr04-min

  1. App controls (header)
  2. Headline content
  3. Interactivity and Status
  4. Primary controls (footer)
  • The controls (1,4) are in blue, and form bookends.
  • The content stage (2,3) is white, and framed by the bookends.
  • Eye travel is minimized by corralling high-value frequently-used data to the vertical center.
  • An inner hierarchy within the blue controls (1,4):
    • Primary: big dark blue buttons on the bottom. Easy generous tap targets.
    • Secondary: smaller light blue buttons in the header (but same easy, chunky feel)

2. Header

npr05.header-min

  1. Too floaty. These 6+ elements, above the NPR brand color bar, are just too floaty. Sure, two rows are implied in the iOS ‘breakthrough’ design, but even as minimalism goes, this is too much.
  2. Page-loading progress bar? Because of its positioning and thin size, I sometimes confuse this for the iOS Safari page loading progress bar. (Sometimes I swear the black bar appears to move right!) And as a branding exercise, it feels like a missed opportunity.
  3. Brand bar, double duty. The thick branding bar clearly sets apart the phone business versus the app business while also providing a satisfying brand presence.
  4. The phone bar is valuable. Setting the phone status bar apart (in stark utilitarian white) makes it a first-class citizen -- not an awkward house guest. This data is important; users reference these status indicators when using the app: “Do I have enough time, enough battery charge, and enough wifi signal for this fantastic 20-minute segment? Or should I save/heart it for later?” This phone bar looks deliberate, purposeful, valuable -- not begrudgingly bolted-on.

3. App Controls

npr06.appcontrols-min

  1. Primary menu. This is the primary menu as users expect. A hamburger or similar icon would be optimal, but the User icon appears here for the sake of continuity for existing users.
  2. Search is shifted to center. Search is crucial but doesn’t warrant a top-left corner position in the UI (where the primary icon or hamburger might go.
  3. My Content / My Stuff. This content tag-teams with the heart icon below to display saved or favorited items. It's a flexible junk drawer for lists of stories: Saved/hearted stories, previously heard stories, featured stories, etc. A frequently used button, it’s on the right hand side.

4. Headline

I often look up from cooking and glance at the headline to contextualize what I’m hearing. This is especially true for reporting styles and segments that feature an extended intro or nut graph -- where the topic or theme isn’t always immediately discernible.

npr07.headline-min

  1. Tiny narrow gutters. Edge-to-edge letters to accommodate more characters and offset the cost of the larger font. Sure, in a print design, this zero gutter would look crowded, but it’s an appliance where utility reigns.
  2. Font makeover. For better usability. This font (Roboto) is full jet black (not grayscale) and larger. It’s sharp and readable from across the kitchen.
  3. Line height is super tight. To fully leverage the real estate.
  4. Narrow font. To accommodate more characters and words per line. Clipped headlines are a problem.

5. Context Bar as a Divider

Listeners mentally triangulate five context clues to decide if they want to listen to the current segment or pass and try the next segment:

  1. The audio they’re now hearing.
  2. The headline they see.
  3. The source of the program.
  4. The date.
  5. The story length (time).

npr08.divider-min

  1. Framing the headline. The context bar divides the headline zone above from the audio controls below. Framing helps users to quickly orient to the app and focus on the text.
  2. The source is more visible. The content’s source is a major factor in helping the user contextualize what they’re hearing, e.g. when I see “On the Media” versus “TED Talks,” it changes my perception.
  3. The date is more visible. Being upfront with users (that some content is from the vault) helps to build the trust that curators must continually earn.

6. The NPR Story Clock

And finally, for the ta-da moment: the logo itself is inserted into the interface. Serving as a circular progress bar, the story clock deeply merges NPR, the app, and the concept of listening to audio.

Infusing the brand logo for NPR One into the interface as a core element is a massive game changer. This could ultimately become NPR’s logo and identity. NPR = audio. Audio = NPR.

npr09.clock-min

  1. No zazz? The only time I ever really see this element is this initial state: a stationary-looking blue “i” next to a gray box. There is no joy in this visualization of the audio experience.
  2. Grayscale ghostly. The size, color and positioning of this text sends a signal that it’s not relevant. Yes, grayscale signals info tiers, but how light is too light?
  3. The NPR Story Clock is a countdown timer, indicating how much time remains for the playing segment. It’s one of the five context clues listeners use when choosing stories: Do I have time for this 30-minute segment? Or should I save/heart it for later in the car? (As a progress bar, it’s also a scrubbing tool.)
  4. Big chunky numbers clearly tell users how much time remains. Users instantly know what it is.
  5. The Moving Notch. Previously static and pointing (arbitrarily?) at the 8 o’clock position, the notch is now a dynamic progress indicator, spinning steadfastly around to the final 12 o’clock position. When at rest (and in static images), it’s pointing straight up -- at the beginning, at the ending. The alpha and the omega. Like a rocket. Power on. Here we go. 

7. Interacting with Stories in Real-time

npr10.interacting-min

  1. Confusing icon. This icon looks like the Venus female gender symbol. When my brain tries to pair the Venus symbol with the nearby Mars-ish male arrow, it's distracting to me (and possibly Prince). My best guess is that it’s a lightbulb, though that has its own connotative messaging troubles. So the challenge: how to select a familiar icon for up-voting interestingness?
  2. Platform-specific share icon. An Android-ism?
  3. Native iOS share icon. Given the potential for confusion with platform icons and confusion with emojis, going native seems helpful.
  4. Save / heart button. To save or bookmark stories for later. The heart is such an ideal icon. As New Yorkers will tell you, it’s more than a symbol of romantic love. It signifies approval, passion, and affinity in a way that’s both meaningful and safely generic. Even Facebook feels hemmed in by the Like button.

8. Navigation

  1. Rewind 15 seconds. Essential for modern life.
  2. Fast-forward 15 seconds. When I’m in the car with the kids, I wish I had a way to skip over inappropriate content (e.g. newscasts with brief but graphic carnage reports). Otherwise, I’m forced to skip the entire segment via the Next button.
  3. The back button is important. The current design breaks the back button, a basic UI expectation. Some common use cases for me:
    1. I wanted to share the story only AFTER it ended. But now it’s too late because I can’t go 'back' to it. Maybe it’s in the history somewhere?
    2. When kids in the car ask to “play that again” -- but the car audio's Back/Previous button doesn’t work as expected. I can’t fiddle with the history at 65 m.p.h.
  4. Play and pause.
  5. Next story! This is the magic button. The app's latest incarnation doesn’t have a background color, but I love the huge visual tap targets here.
  6. Another pause button. The white circle in the Story Clock is also a pause and play button.

9. Early Drafts of the NPR Story Clock

This may seem surprising, but the concept of using the notch as a status indicator for the progress bar in the NPR Story Clock was not obvious to me for a long while. Maybe it was a traditional reluctance to alter an existing logo mark? In order, here are the alternative versions I explored.

npr.drafts1-min

 

npr.drafts2-min

 

npr.drafts3-min

 

npr.drafts4-min

10. Initial Sketches

My first sketches, drawn on post-its on the kitchen table.

npr.sketches-min

Narrative Summary

Every once in a great while, an idea comes around that perfectly captures a rare intersection: what people want, what an organization does, and what technology can deliver. The NPR One app is one such triumph.

It's not just another streaming or news app -- it's a whole new way of listening to radio and podcasts. It's like magic. Just turn it on and out comes an ideal mix of content that is consistently engaging.

Don't like what you're hearing? Skip ahead (which is the recurring dream for any radio listener who's ever pondered time travel while patiently waiting-out a segment).

It succeeds because the curated mix of content, made further relevant by recommendation technology, balances and blends an unruly array of needs:

  • National content versus local content
  • Quick and timely news versus deeper, long-form stories
  • Control versus trust
  • Predictable versus surprising
  • Streaming versus podcasts

NPR One is like getting a gift certificate at your favorite store; you don't know what you're going to get, but it's going to be good.

The triumph of the NPR One app couldn't come at a better time for NPR, as it ponders its future and strategy in a shifting, crowded, and financially struggling media landscape.

The Design Imperative

Seemingly overnight, the NPR One app has vaulted to become my favorite and most-frequently used smartphone app.

The a-ha moment for me was seeing those big wonderfully oversized buttons. It struck me instantly: this is isn't an app, it's an appliance. This app wasn't intended to be merely looked at, it's supposed to be used. Like a toaster, a flashlight or an elevator.

So earlier this year, when NPR sent me a survey, asking how they might improve the app, I decided to go one step further and redesign the main screen, building on the idea of an appliance.

Author

rob192

BlueSkyMinds principal Rob Condit is a UX architect and content strategist. For more on his work, see his recent projects and LinkedIn.

Colophon 2016: State-of-the-art WordPress

Are you looking to create a quick WordPress with a professional set of modern features? Yea, well, earlier this year, I was too. (Seriously? What were we thinking, putting “quick,” “Wordpress,” and “features” in the same sentence?)

Happily, you can skip the frustration and time-sink via this colophon — a cheat sheet with all the ingredients needed to create a lean, fast, modern, state-of-the-art website in WordPress.

Too Long; Didn’t Read Summary

If you’re in a big big hurry and just need the TL;DR shopping-list version, here you go:

The Theme

The Plugins

Done! Just download all of those and configure them and you’re good to go.

However, if you’re saying things out loud like, “Whoa! That’s a lot of plugins!”  or “Wow, no caching plugin?” read on.

A Somewhat Longer and More-Taxing Summary But With Helpful Explanations

If you’re a red-pill type who’s needing a deeper understanding as to why these particular plugins represent an ideal plugin cocktail, here you go:

The Theme

Twenty Fourteen
Visuals. The Twenty Fourteen design sports an overall excellent desktop AND mobile visual design. A rare bird.

Code. If you aren’t a coder, this theme will look and work great out of the box. It was built by Automattic, the company behind WordPress itself, so the code is super lean and mean and good. 

For web developers who have attempted to find the perfect “90% there” theme and then hand-code the rest (only to discover, under the hood, a massively confusing, over-coded mess that is a nightmare to understand and maintain), this codebase is a dream. If you’re OK with a “80% there” set of CSS styles, getting the other 20% with this theme will be easy, fast, and satisfying. Let’s acknowledge that an unfortunate part of WordPress theme culture is the lure of turn-key and plug-and-play promises.

 Fourteenpress – A companion child theme that removes the left sidebar and makes the theme look less like a blog and more like a regular web site. If you planned to customize the design anyway, this saves you the step of creating the child theme. 

The Plugins

Again, as above, in alphabetical order.

Akismet – If you plan to allow comments on your pages or posts, this comment spam service blocks the obvious comment spammer bots, which is important because, like ferreting out your email spam, it can be time-consuming if done manually.  FWIW, some major sites have given up on comments — too much effort for too many trolls and spammers — turning instead to solutions like Disqus or Facebook comments.

AMP – This plugin creates a second, stripped-down, fast-loading version of your post pages (viewable by appending “/amp/” to your post links) according to the standards of Google’s Accelerated Mobile Pages (AMP) Project. And good thing too: “Google is now planning to show AMP links everywhere.

Autoptimize – In addition to “minifying” your CSS and Javascripts (taking out the extra spaces and hard returns in the code that make your files bigger and slower to download), this plugin also grabs all the various helper files and packs them into one CSS and one JS file which really speeds up your website. It even converts your small images into lightning-fast text data! (who knew?) Just turn it on and it works. A must-have performance booster.

Better WordPress reCAPTCHA – Ah, gone are the simple days. A couple of years ago, computers figured out how to read and defeat regular CAPTCHAs. Puzzles are the new black, i.e. Turing tests, and your first line of defense from getting hacked, spammed, bothered in general, etc. There are many plugins that embed the new reCAPTCHA puzzles into your site; I liked this one.

CloudFlare – This is your game changer. In the olden days, we worried about 1) caching and 2) having too many plugins that slowed your site’s speed. CloudFlare has free accounts where they cache and host your content on their speedy international network of content servers. Now your feature-rich and plugin-happy site won’t be brought to its knees by a small hoard of well-intended visitors — or a mob of ransom-seeking DDoS attackers. This is yuge. Suddenly, deploying your own content delivery network (CDN) is viable.  Go ahead, have another plugin.

Contact Form 7 – An old standby. Create contact forms or other forms easily. Large community and ecosystem. Lots of integrations with other plugins.  A basic building block.

Customize Login Image – It replaces the WordPress logo on the login page with your logo or image.  Not a biggie.  Just a pro fit-and-finish touch.

Duplicator – This unique plugin captures your whole site — WordPress, images, database content, everything! — and creates a ZIP file package that you can tuck away as a backup or use to migrate to another web server or provider.  Wow.

Easy Forms for MailChimp – If you use MailChimp, this is a good customizable plugin to start with. It lets you create unlimited forms and use AJAX to respond to user signups (versus having to reload the whole page just to say “Thank you for subscribing!”).

Enable Media Replace – Sometimes you’ll see an image on your site that needs tweaking. This plugin allows you to easily swap-in an updated version of the image. (Oddly, WordPress won’t let you do this out of the box.)

EWWW Image Optimizer – Even my images, optimized via an online tool, received a ~20% reduction in file size. It works automatically as you add images. It also has a bulk feature to shrink your previously uploaded images.

FV Simpler SEO – The SEO plugin arena has long been dominated by heavyweights like Yoast and All in One SEO Pack, but I prefer this lightweight alternative. SEO continues to change fast and seems to matter less and less over time — versus the basics of: be discoverable, use HTTPS, be mobile-friendly, be fast, and have really compelling content. Search leader Google is systematically removing ways to game the system and that’s good news for everyone.

Lazy Load – Images on your pages will only load into the vistor’s browser when they become visible to the visitor. This will quicken their above-the-fold load time and reduce unnecessary image downloads.

Page Builder by SiteOrigin – Your first plugin. Next to WordPress itself, this is a primary building tool.  It allows you to turn any page into a framework of rows and columns, inside which you can add content widgets. Powerful. WordPress is now truly a full-fledged CMS. So, whenever you need a new layout for a page, you and your editors don’t need a developer to code a whole new template in WordPress. Better still, it’s a great foundation for building responsive content for mobile.

Postman SMTP Mailer/Email Log – If you want your site or contact form to send emails to a Gmail email account, you need this plugin. Gmail’s servers regard mail sent from WordPress as a spam risk and won’t receive it.

Really Simple SSL – This plugin enforces that HTTPS is used for all of your URLs — for both your users AND for your content files, images, etc. If even one of your plugins or themes isn’t coded correctly (and, say, uses an insecure URL style), it could trigger unsightly and scary warnings, block your site, or even lock you out of your own site. Ask me how I know this.

Remove Category URL – This plugin, err, removes the “/category/” part of your URLs for category pages, i.e. turning the inelegant “mysite.com/category/foo” URL into simply “mysite.com/foo”.

Search & Replace – A dream come true. A quick fix when you need to change content not just in a post or page, but across the whole site.

SiteOrigin Widgets Bundle – This companion plugin to the Page Builder plugin, mentioned above, adds a grab-bag of content widgets including: Google Maps, embedded videos, a slider,  a simple contact form and more. I mostly like it for the rich-HTML editor you can embed in sidebars and footers (versus the default plain text widget in WordPress, which is unfriendly to editors who can’t or don’t code HTML.)

Super Socializer – There are lots of social plugins that enable you to embed social sharing icons, but this one also enables “social login” (so users can login to your site via their Facebook, Google+, LinkedIn, Twitter, Instagram, etc. accounts — versus creating an account locally inside your WordPress site).  Additionally, it allows you to add or shift to “social commenting” (where the heavy lifting of commenting is performed by Disqus, Facebook, or Google+ for the reasons mentioned earlier).

TablePress – For elegantly designed data tables. It matters.

Widget Logic – An oldie but a goodie. This plugin enables you to make widgets appear or disappear according to the logic conditions you give it, e.g. don’t display the What’s New content widget on the homepage or the contact form page, but include on all the other pages. Sooner or later, everyone needs Widget Logic.

WP Remote WordPress Plugin – If you manage more than one WordPress site, you need this. From the wpremote.com site, you can carefully control how and when to apply updates to plugins, themes, and WordPress for each of your sites.

XML Sitemap & Google News feeds – Not glamorous, but essential to your site being properly discovered by search engines. This plugin generates a sitemap XML that Google, Bing, etc. use to index your web site. You can help them help you by indicating and scoring your important pages.

The 5 Big Take-aways

When we talk about “modern websites,” this is code for: must-have features users are expecting.  Sure you could skip them, but there’s a strategic risk that Google and/or users might get an intangible (or tangible) sense that your site is not quite up to professional grade.

For your users, this perception could result in a lack of trust and engagement. For Google, skipping these aspects may well result in your site being listed lower on search results pages, effectively hiding your pages from the world. Which would be bad.

1. Discoverable. For Google and the other search engines, make sure you have an XML sitemap. For your users, use an SEO plugin to ensure your page titles and meta descriptions are consistent and accurate; these are used for your search engine page entries when users search for you.

2. Speed. Your site must be fast. Speed is a feature. Check out your site’s speed score on Google’s free PageSpeed tool.  Not just a good idea, but one you ignore at your own peril; Google penalizes sites for slow performance, especially slow mobile sites.

3. Mobile-friendly. Your theme must look and work great on your phone. This is the new normal. No longer a nice-to-have, it’s a must-have.  Open your website in your phone. Is it as compelling as it should be, compared to your favorite news or social site or app? Does it even render properly? Well, this is the new standard. (Many older WordPress themes don’t have responsive design built in, so check it out before you commit to a theme.) Again, Google will penalize sites that aren’t mobile-friendly.

4. Security. Your site must be secure. The new standard is secure by default. You might not have noticed, but all the major sites like Google, Yahoo, etc. are now using https — even on regular pages. No longer is security reserved for e-commerce or personal data forms. Free SSL certificates are now available via Let’s Encrypt, so there’s no excuse.  And yet again, Google will penalize sites that aren’t secure.

5. Social. Your site must be social. Or at least social-ish. With users spending increasingly more time with smartphone apps and in walled-garden communities (Facebook, SnapChat, Twitter, What’s App, LinkedIn, etc. ), the open web has a diminishing role in the lives of average people. Help people find you and engage with you by enabling social interactions.

Other than all of that, err, things went pretty quick.

What’s on your dream list of plugins? Did I miss anything?

Updates

2016-08-04 Added AMP

2016-05-06 Added Search & Replace

2016-05-04 Added EWWW Image Optimizer

2016-04-27 Added Lazy Load

New Zealand Considers a New Flag

On a lighter note, the nation of New Zealand recently considered a new flag, an effort fueled by the desire to assert a post-colonial identity. Yet to the disappointment of flag change advocates, voters ultimately chose to keep the existing flag over the other finalist, the Silver Fern flag.

nzflags-vote

If our country was a car, what would our brand be?

To anyone who’s ever been part of a design selection committee, it’s not entirely surprising that a nation might fail to agree on a piece of collective art that would serve as a national brand and identity. Or agree that any change was needed at all.

Fire the Lazar!

Still, the national “project” yielded some excellent options, including my personal favorite, Fire the Lazar!, a laser-firing kiwi.

nzflags-lazar

According to its designer, “The laser beam projects a powerful image of New Zealand. I believe my design is so powerful it does not need to be discussed.”

Final Five

The final five designs picked by voters in the lead-up to the final vote:

nzflags-ff-min

Serious Flags

For those taking the challenge seriously (if not conventionally), some outstanding graphic design ensued:

nzflags-serious

A Different Drum

Other designs from the complete gallery, well, went a different way:

nzflags-different

Designing in Context Matters

Throughout the decision process, project designers created virtual waving flags to enable voters to see the flags in their natural context and try-before-they-buy.

My Flag Idea

Koru design in blue + 4 red stars):

nzflags-idea

Flags Must Wave

And, of course, the fluttering version via — wait for it — the Makesweet Flying Flag generator (thank you, internets!):

nzflags-waving

Apparently a windy day.

Elements of Digital Design

To create a digital product, six elements overlap each other to define six disciplines. Here's a handy visualization of how these areas dovetail and compliment each other.

Six Elements

  1. Marketing
  2. Editorial
  3. User Interface Design
  4. Graphic Design
  5. Coding & Programming
  6. Technology Analysis 

Six Disciplines

  1. Business Plan
  2. Content Strategy
  3. User Experience
  4. Visual Design
  5. Development
  6. Technology Plan

Hover between each element below to reveal the overlapping discipline.

Business PlanTechnology AnalysisTechnologyBusiness PlanContent StrategyMarketingBusiness PlanTechnology AnalysisTechnologyCode ProgrammingDevelopmentGraphic DesignCode / ProgrammingBusiness PlanVisual DesignInterface Design/UsabilityUser ExperienceEditorialContent StrategyMarketingDevelopmentGraphic DesignVisual DesignVisual DesignInterface Design/UsabilityUser Experience
Which technologies are reliable and affordable investments?, Will they enable growth?, How can I future-proof current decisions against fads?, Keywords: budgets, TCO, architecture, integration, solutionsWho are my audiences?, Who are my competitors?, How can my print, web, email, and media work together?, How do I generate traffic?  , Keywords: search engines, domains, SEO, SEM, advertising
How do I translate my vision into real web pages?, Can off-the-shelf systems do the job? And cheaper? , Is my site accessible and compliant with web standards?, Keywords: HTML, CSS, SQL, JS, databases, plugins, librariesWhat is the right voice and tone for my audience?, Where is my natural content? Who will create which parts?, What are the step-by-step phases of content development?, Keywords: content strategy, style guide, schedule, project management
What specific appeal, style, and feel is right for my site?, How can I find and add images?, Is my site over- or under- designed? Is the layout clear?, Keywords: brand, identity, logo, fonts, colors, print, consistencyWhat are the interactive goals?, Is the information user-friendly and easy to find?, Which content? When and How?, Keywords: organize, navigation, taxonomy, chunking, information architecture