Oxygen Updater redesign (v5.0.0)

A ground-up redesign with focus on UI/UX, performance, and privacy. Comparison images within (old vs new).
Adhiraj S. Chauhan

UPDATES

2020-12-15 11:01 IST:

There were ~10K beta testers who helped us with this redesign release. We've finally released v5.0.0 to the stable track, which contains no additional changes from v5.0.0-beta.1. If you hadn't tried out the redesign on the beta track, we recommend reading through the rest of the article as it contains comparison pictures (old vs new design).

If you encounter any issues, reach out to us via Discord, or email us at [email protected], or file an issue on GitHub if you're familiar with it.

2020-12-10 14:05 IST:

Thanks to our beta testers, we're one step closer to a wider stable rollout. v5.0.0-beta.1 fixes the following bugs:

  • App could not exit by pressing back, if an article or an install guide was opened from the notification. Pressing back from an article, for example, took you to the main screen as expected — but when pressing back from the main screen itself, it would take you back to the article — causing an infinite loop of sorts, switching between main & article screens every time you pressed back.
  • While in the "News" screen, if the list was in the "view only unread" mode, opening/closing an article caused some wonky transitions (black borders at the edges, overlaying text etc).

We recently crossed an important milestone: 1M+ total downloads, and to celebrate we announced that we were working on a ground-up redesign back in October 2020. After several rounds of internal testing & tweaking, we finalized the v5 redesign update, and had released it as a beta on the Play Store on 7th December 2020. v5.0.0-beta.1 (bugfix) was released shortly after, on 10th December. 15th December marked the first stable release (v5.0.0).

This redesign was focused on three things: updating the design language throughout the app, improving certain UI/UX issues, and reducing CPU/memory usage as much as possible (the app was already optimized, but this update goes even further). The main screen of the app has been flattened, and now uses a bottom navigation bar instead of the top tabs layout. In today's world where smartphone screen sizes increase every year, it's important to improve accessibility — with a bottom navbar, you can quickly switch between different screens without needing to adjust your hand's position.

Apart from design changes, this release also includes several bug fixes, greater focus on privacy, a revamped notification channels experience (you can now have fine-grained control over each type of notification), and allows you to create "app shortcuts" (long press the icon on your launcher): these shortcuts open either the "Update", "News", or "Device" pages.

This article serves as an explanation of the new design, so that you can get used to it quicker (any design change needs some getting used to). Let's start with simple comparison pictures, so you can see what's changed & improved side-by-side (left: old; right: new).

In the pictures below, you will notice that we've removed the red background colour as much as possible. Since our brand colour is red, it's a bit polarizing to use it as a background colour (red is usually seen as an aggressive colour). We initially thought of changing red to a dark blue, since blue is supposed to be interpreted as a "calm colour" but we decided against that, because using primary colours as a background quickly starts to make that UI look dated.

This is the screen shown when your device is already up-to-date.
The old design had a large checkmark icon, and not much else. Some users didn't like this big icon and a lot of empty space as it looked ugly, and we agree. So while overhauling this screen, we thought about what could be important to the user. First of all, you of course need to immediately know if you're up-to-date or not. Second, you might also want other important software-related information: Android & OxygenOS versions, exact OTA version, security patch date, and the changelog/patch notes for the version you're currently on (this can be expanded/collapsed at your convenience).

This screen is shown when you've enabled "advanced mode" (app's settings).
Advanced mode is useful when you want to re-download the same update, or if you want to switch between different update tracks (e.g. from stable to Open Beta). There's not much that's changed in this screen, except improve legibility. We've also added the "Advanced mode is enabled" subtext at the top to let the user know why they're seeing this screen. In the old design, some users were confused about seeing a download button when they're already up-to-date (maybe they forgot that they turned advanced mode on).

List of news articles published by our team.
Long-time users of our app would know that we routinely publish articles that cover OnePlus, OxygenOS, project status, and other software-related research topics. The redesign brings this screen to be more in line with news applications (text on the left, image on the right etc). We also added author names and relative timestamps (e.g. 6 days ago) to aid you in figuring out how recent an article is. Users used to share our articles on social forums via screenshots, which of course isn't ideal. So we've also added copy/share link functionalities that can be accessed via the overflow/options/3-dot icon. You can also mark individual articles as read through this icon (previously you could only mark all articles as read).

This is what opening a news article looks like.
Some users told us that the spacing between the title & author was too small, so we improved that a bit. We changed timestamp to a relative format, so it's easier to read and added the article subtitle as well (which previously was shown only in the news list screen).

This is the "My Device" screen.
This, combined with the "Update" screen has changed the most — the old design, frankly, looked like it was quickly thrown together in haste. While it provides roughly the same information, it wasn't organized neatly. With the new design the app even shows a device image and model number. Also, in case your device isn't supported (e.g. carrier-branded device or a new device we haven't tested yet) this screen provides more contextual information as to why exactly is it device not supported.

The "About this app" screen.
In the old design this screen was accessible via the overflow/options/3-dot icon at the top. Since the redesign flattens everything, you can just tap the "About" icon on the bottom nav. The only difference here is an additional paragraph explaining what the app is and how it works — this should be useful for new users. We've also put the Help & FAQ items in this screen (previously accessible via the icons on the top toolbar).

The FAQ (frequently asked questions) screen.
We've moved away from a WebView to a native UI for FAQ. The web-rendered FAQ page did not fit with the design language of the app and looked out-of-place. Content in this page remains the same.

If you made it this far through the article, what do you think of the redesign? We've added a few subtle transitions as well, and we'd love to hear your feedback: https://forms.gle/XR5KuKf1Y6cbitA57 (Google Forms survey).

At the beginning of this article we mentioned this redesign was meant as a way to celebrate our 1M milestone. We're also thinking of organizing a giveaway of sorts, but haven't thought about too much yet. There are several issues to address:

  • Logistics
    • How do we ship the product? Do we buy it ourselves locally, and then ship it internationally?
    • How do we make sure that only Oxygen Updater users are participating in this giveaway? Since the app doesn't collect any personal information like email addresses etc, it's impossible to verify if the winner is actually an OU user.
  • Financials
    • Which products do we include in the giveaway — expensive items like flagships phones, or smaller items like earbuds, chargers, cases, screen guards, etc?
    • How many products should be giveaway? Should we do a 1st, 2nd, and 3rd prize format?
    • Since this giveaway will obviously be costly, should be instead just think about a small-scale giveaway — e.g. OU-branded merch?

Do join our Discord server to either talk about the redesign, or about hosting a potential giveaway. Or, you can email us at [email protected].