The New Quartz Mobile App: A UI/UX Breakdown

Quartz’s app is a social news aggregator that allows its users to select articles by topic as well as other users to generate content. It uses gamification to encourage users to return to the app and keep it in front of them longer.Quartz are innovative publishers, and we can learn a lot from them.So what key UX elements does Quartz use to ensure it's users can read, share, and curate content within the app?Let's take a look.

Key Features

Primary features of the Quartz app include the ability to:

• Generate news feeds based on user’s topic of interest
• Include other user’s feeds with comments to diversify content
• “Pick” articles to create their own feed other users can follow
• “Pick” articles outside Quartz to contribute new content
• Gamification system keeps users engaged as they attempt to work their way up the leader board building an audience

Initial Observations

Firstly, after installing and launching the app, users can use the app without creating an account. This made it easy to get started, and was definitely preferential to being forced to create an account in order to access content for a new user.

While viewing the News feed suggestions by Quartz I noticed other users engagement was a key aspect that differentiates it from other topical feed products. Users are given the ability to select which users you would like to follow.This can be accomplished by randomly selecting them or using its Leaderboard which ranks most popular users by the number of liked comments they make on articles.The leaderboard is the core of its gamification element.There are few UI elements on the screen which allowed me to pick up on how the app is intended to be used with no significant friction.The Quartz app's overall design, both aesthetically and intuitively, is well thought out and easy to understand.

1. Layout

There are four primary “blocks” (or sections) on most screens, top bar, top navigation, body, and footer navigation. They are numbered 1-4, respectively in the following screenshot of the app on first render.

The navigational elements are well laid-out with spacing around each element that will afford users with large fingers low friction on interaction.

1.1. Top Bar

The top bar three elements, two of which are straightforward but the third is initially unclear.Notice there’s no hamburger icon, as they often perform poorly in usability testing.

1.2. Magnifying Glass Icon

First is the magnifying glass icon typically associated with search and as expected it loads a new page offering a tool to both search by keywords and view previous searches. The ability to view previous searches without retyping the keyword by a single click is another win for users. Users are also afforded the ability to delete search history, unfortunately it‘s an all or nothing process.

1.3. Quartz Name

Second element is the Quartz name. It offers no interaction and is simply branding as one would expect on an app.

1.4. Load Icon

The last icon opens a page that allows users to add content they find. It also includes instruction on how to add Quartz to iOS’s “share sheet”. That too is a win for users, as it affords users a method to add content with less interaction.

The following screenshot is the page that loads after clicking on the third element of this block.

2. Top Navigation

This block has the fewest elements with only two tabs, Editors’ Picks and My Feed.

This simple two option block was obvious for me using well labelled tabs. Clicking on either one does exactly as I expected, no surprises. The primary difference in the two are generic feed everyone sees and the one I customized. We’ll get into more detail around that next.

2.1. Left Tab

Editors’ Picks serves two purposes. It not only keeps fresh content quickly available while on the News page but also helps new users get started by suggesting content.

2.2. Right Tab

My Feed is created by the user given dozens of topics to choose from and other users feeds on the platform which you choose to follow. As I continue to use the app, I’m sure it will go through several article and comment selections.

Having the ability to see new content and customising one’s on feed are both wins for users. I also believe the ease at which users can quickly create their initial feed had little friction.

3. Body

The content that renders in the body block is dependent on the footer navigation icon in focus. With that said, when the News icon is in focus, the body’s content is then determined by the two tabs in the top navigation block. Although the two would typically be different in content, they’re nearly identical in the content’s design.

Both consist of what I’ll refer to as “cards” with two halves. Each card is dedicated to an individual article (top half), and when available, a comment (bottom half).

In the following screenshot, you can see the two halves separated by thin light grey line.

Notice there’s no teaser copy from the article as the emphasis is placed on other users’ engagement, and your ability to quickly ‘pick’ it for your feed. This has to do with encouraging your participation and thus gamification performance.

4. Footer Navigation

In Quartz’s forth block are four labelled icons, News, Discover, Updates, and Profile.Again, they are nicely spaced out giving users with larger fingers a better user experience.

Let's take a look at how they work, and discuss how they affect User Experience in the app.

4.1. News

This icon will be the primary icon in focus as it renders the feeds.

4.2. Discover

This icon takes users to a page to find new users to follow. As well, it’s where gamification standings are found. It includes the Leaderboard of users with the most liked comments. It also offers groups of users by category. Incorporating this ability to easily include top users in your feed is another win for users.

Here’s a screenshot of the Discover page.

4.3. Updates

This element is essentially a page of notifications or alerts about the Quartz platform, your new followers, comments on articles you’ve commented on, etc.

The following screenshot is the Updates page.

4.4. Profile

As labelled, this takes the user to their profile page with the ability to enter an edit page to add/edit/remove information & photos as needed.

However, it is also the method in which the user accesses account information, settings, app version number and logs out of the app. Doing that allowed Quartz team to avoid using a hamburger icon and minimizing visual noise in the design. This is another win for the user experience.

However, there is one item I wasn’t counting on in Settings page.During my evaluation I decided to add additional article topics to my feed. I returned to the “My Feed” tab to choose additional topic cards. Once on the page, I realized it was different as I now have a feed of articles cards rendering (where it was previously empty).On initial visit to “My Feed” tab, all the topic cards rendered, allowing me to click on the ones I wanted to add. Now those topic cards are no longer rendering.So how do I add/remove topics in my feed? They are found on the Settings page’s “Settings” section.The first sub item is “My Feed”. When that page loads, all the original topic cards are available to add/remove. In this screenshot you can see where the “My Feed” sub item is located on the Settings page.

Intuitively, the ability to add/remove article topics should be from on the “My Feed” tab.

Conclusion

The Quartz app provides an understandable, logical user experience. The ability to follow other app users’ feeds, nicer access to the articles themselves, and less friction to read & engage in comments are all great elements.

If you’re an avid news reader and like to engage with others about the articles, download the Quartz app and test it out yourself.