’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.
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.
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
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.
Only a few areas created questions or confusion, and we’ll cover those in this article.
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.
The one suggestion I would make on this block is to increase the contrast between the font colour and background colour. The out of focus tab is just too low for easy readability. The design already provides information scent as to which tab is in focus by underlining it.
However, I do wonder if I would prefer the two tabs swapped once I become acquainted with the app. That way My Feed would default when I start the app. That is the purpose of building a custom feed, so you’re fed what you’re interested in, right?
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.
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.
The article half of the card includes mostly obvious elements
- A small image but occasionally a screen width image
- Stacked icons of users who have commented with number of picks
- The ability to “Pick” the article.
The ability to Pick the article is the one non-intuitive element, which is their method to add the article to the user’s feed.
The comment half of the card also includes obvious elements
- Commenter’s name
- Job title
- Truncated comment
- Ability to “like” it without viewing
- “Pro” badge
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.
This icon will be the primary icon in focus as it renders the feeds.
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.
With all that said, this icon and its label was the second element that created questions for me before I clicked on it.
Firstly, the magnifying glass icon has already been used for Search. As a UX best practice, each icon should only be used once.
Secondly, in my mind the label Discover conveyed search and there is already a search feature. As well, I’ve already been given two methods to find content, the Editors’ Picks tab and ability to follow articles by topic. All of that was quickly overcome when the page loaded.
Here’s a screenshot of the Discover page.
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.
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?
It wasn’t initially clear, but 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.
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.
As for usability, there were only three issues that merit mentioning, and only the location to add/remove article topics in My Feed being the one making a significant impact on the user experience.
If you’re an avid reader of articles and like to engage with others about the articles, download the.
Want to learn all about building and launching mobile apps for your WordPress site? If you liked this article, you’ll love the Mobile App Strategy Handbook. Click here to download it for free.