Design Details: Quartz for iOS
Last week Quartz debuted a clever little app to deliver news unlike anything I’ve used before. It’s a conversational app which creates a delightful and simplified way to stay up to date on the latest stories. I have to also assume that there’s some hidden AI here that will slowly learn my preferences and improve its recommendations over time.
On the whole I’m skeptical, yet optimistic, about conversational interfaces like this which attempt to guess and learn about my preferences. I know that it’s only a matter of time before AI gets good enough to know me as well as it should, but at the present it’s quite rudimentary.
For Quartz’s new app, the lack of choice and customization is simultaneously constraining and liberating. On the one hand, I don’t have to wade through dozens of clickbaity headlines to find content relevant to me; instead, Quartz gives me one suggestion at a time that it thinks I’ll like. On the other hand, if you see a few stories in a row that don’t quite meet your taste, it becomes incredibly easy to dismiss the app and never check back.
All told, I think many people will enjoy the spontaneity offered by the lack of choice, leaving their news delivery up to whatever AI Quartz has running on the backend.
Follow me at @brian_lovin for tweets about design, startups and technology
Get emailed with future Design Details posts: Subscribe by Email
We have a podcast! Listen to the show with Bryn Jackson and yours truly at Design Details
Let’s start: Quartz has created one of the most unique onboarding experiences I’ve ever seen. No splash screen. No signup or login flow. Instead, the app “talks” to you and guides you through a lightweight setup to turn on notifications and explains how to adjust your settings.
There’s no chrome to be seen here, which at first felt foreign and out of place. It’s one of the rare times that it feels appropriate to break the HIG and truly bury settings and preferences in favor of creating a 100% immersive UI.
There’s one thing that I can’t quite get comfortable with, however: the fake typing indicator, while enjoyable the first 2-3 times, is way too robotic and stale. For first-time use, it helps to set the context that this is a conversational app, but after seeing several articles it slows down the flow of information. The timing is metronomic, which doesn’t work out when the bubbles contain varying lengths of text.
Two nitpicks: First, every messaging app on iOS has chat bubbles appear from bottom to top. Here they appear from left to right. It seems that this should be fixed for one key reason: in a conversational app, the messages come from the keyboard and user’s input, thus moving up. In Quartz, the off-screen left of the app contains settings, so the mental model here is that the messages are coming from the settings. It’d be great to see the AI bubbles be consistent with the blue bubble’s movement.
Second, I wish the bubbles didn’t have static border radii. Messenger and iMessage both do a good job of handling stacked bubbles that adjust their corners to resemble a cohesive unit of text. I imagine that QZ will polish this out in an update.
Nicely done, Quartz: teach users how to use the app by having them actually complete the functions themselves. It’s clever and helps users build momentum in the onboarding experience.
It has become standard user experience practice to tell people that you’re going to ask them for notification permission before the popup appears. Quartz handles this nicely by explaining why notifications are useful. Opting in or out is totally fair game, but that emoji in the confirmation option is oh-so enticing.
One more time: let the user know what’s about to happen. I really don’t understand why there’s a need for the 2-3 second typing indicator delay before throwing the notifications permission popup, it breaks the experience.
In the same step, Quartz explains how to adjust your settings. The emoji in this bit of text almost feels confusing, since it’s not pointing to anything. But since it’s coupled with the copy telling me to swipe, I can buy that this will be understandable for people. Again the lack of app chrome means that settings and preferences are totally hidden, so it’s best to explain this one piece of navigation before the user gets started.
This is the step of the onboarding where Quartz breaks expectations and injects some serious personality into the app. Instead of forcing me to get my first news story, I get a second option that gives me no indication of what’s about to happen. But I tapped anyways.
The copywriting here is on point, and the animated GIF is a nice touch. One nitpick: it broke the experience to have an option to continue forward while the image was still buffering.
Alright this is the good stuff: actually using the app to get news. The copywriting here is on point – the actions I can take are contextually related to the article I was shown. Quartz gives me the headline and high level points of interest, with a small blue arrow to let me read more. This right here is probably enough for most people to fall in love: I don’t have to wade through walls of text to get what’s important; Quartz does it for me. If I want more, I can have it, but it’s not forced upon me.
In this video we also get a demonstration of how all-over this AI is. An article about Scalia’s passing, straight to a story about Berlin’s concert hall being draped with life preservers. If you want diversity and spontaneity, this is great, but I’m left feeling like Quartz is just shooting in the dark to keep me hooked.
A quick look at the settings: the use of emojis here is amazing because they map to the emojis you get in push notifications. I can immediately know from the push what category of article it is, and whether it’s worth reading more about. Quartz also uses this space wisely to upsell other uses (the Apple Watch experience, for example).
Again: copywriting here is on point. More apps need to take note – telling your user why they would want something on or off builds trust and primes them for future interactions.
Oh man, this is good. I’m only 3 articles into this thing and Quartz gives me an emoji as an action. I have no clue what it means. I don’t know what to expect. But I can take a guess (since it seems related to the headline above) and tap this little robot emoji. I get a few bits of information back, broken into bite-sized, multi-media chunks.
The GIF at the end is just icing on the cake: again, bringing in personality and delight makes me want to keep finding more stories. It also breaks the mental model that news has to be all business and no play.
This video demonstrates one area where I think Quartz falls a bit flat: the static, repetitive nature of the faux typing indicator breaks the experience. I’m quickly skimming through articles and the visual effects are slowing me down considerably. I understand that the animation timing is meant to do two things: first, give me time to read each bubble; second, attempting to maintain the illusion of conversation. I just can’t help but feel that the static timing is quite slow and will be frustrating whenever someone encounters a series of articles they don’t care about.
Here’s the other weird thing about Quartz: you run out of stories. My mental model was that I could go on forever, slowly digging through the archives of time to older stories. It turns out that Quartz only surfaces the most timely news, which means that you will, in fact, run out of articles. The way Quartz handles this is amazing – a playful bit of copy, a GIF, and naturally, an inline ad.
Of course the ads are going to be here, and Quartz could have been much more aggressive with their display. But by keeping the format as part of my conversation the banner feels natural and inviting. Ads like this are the future (although in time they will become more personalized): native, inline and unobtrusive.
When I ran out of stories I closed the app then immediately re-opened it to see if it would try and repopulate anything or surface another method of engagement. It turns out Quartz has implemented some amazing product thinking to produce this empty state interaction pattern: when there are no more stories, the app explains why and offers a small bit of fun activity to help avoid disappointment or frustration. I’m sure that this also builds a strong emotional connection to the app, because there’s never any doubt that you’ll at least get something fun whenever you open the product.
And back we go to our out-of-news state. The copywriting here is phenomenal. It’s not too pushy, not overly friendly; it’s professional and concise, clear and obvious. Well done to the team that pulled this together.
That’s it for now: Quartz has built a fascinating little app that’s fun to use, adds delight at every corner and will hopefully continue to improve its suggestions as I keep using the product. The key things that stand out to me are the superb copywriting, a seamless onboarding experience, and the ability to contextually evolve a story with simple prompts to the end user.
For more updates on design, startups, and technology, follow me on Twitter.
