This project was a two-week-long major redesign of the popular Root Checker apps on the Google Play store, which help users in the rooting process by verifying whether or not they have installed root access on their devices.
Root Checker Basic and Pro are the most popular root checking apps in the Google Play store, fetching a 4.1/5 star rating and more than 10 million downloads, about 10 times that of the leading competitor. For those unfamiliar with the world of Android and the concept of "rooting," it essentially allows users to more powerfully customize their device for their own needs, such as deleting unnecessary canned apps preloaded on your device. So “rooting" an Android is similar to “jailbreaking” an iPhone, though not entirely the same.
The app’s developer Joey Conway (or joeykrim) approached me to redesign the user experience. It’s a very simple utility app, with only a few screens and one primary use case: to check if root access has been installed (very much following the 80-20 rule, where 20% of your features make up 80% of the traffic). He gave me a few high-level and low-level goals and visions for the redesign, and I took and ran with them. The natural constraints of a does-one-thing app was at first mind-numbing, but it eventually became a fertile breeding ground for creative work.
Although most of the details of my work on joeykrim’s Root Checker apps are confidential, I am able to divulge a portion of my own work as it relates to the visual redesign. To help usher myself out of my mind-numbing designer’s block, I first took a test drive on the app itself. As a lifelong iPhone user, I had no experience with rooting, or even with Android, as well as the Android operating system's attendant affordances, interfaces, standards, and limitations. After a quick run-through, I wrote a 1000-word assessment, full of commentary, questions, and suggestions. Joey responded, and we communicated back and forth like this all throughout the design process.
I then conducted a cursory overview of UX design methods on uxdesign.cc and the design approaches in IDEO’s Field Guide to Human-Centered Design. I then chose three particular approaches that I considered would provide the most productive feedback for innovation and have the greatest overall impact on Root Checker’s redesign.
The first was a Competitive Audit, where I compared joeykrim’s app with those from seven competitors, and evaluated them all on fifteen different aspects, including basic features, resources, user flow, and aesthetic appeal.
The second was a Material Design Heuristic Analysis, where I exhaustively checked 70 different aspects of the Root Checker apps for alignment to Material Design standards. I also pinpointed how the app could be improved or redesigned to align more closely with Google’s standards.
The third was a User Flow Analysis, where I evaluated the user flow experiences for twelve different user objectives within the app. I counted the number of actions (such as taps) necessary to complete each objective, and shared my thoughts on how the process could be simplified or made more efficient.
For the sketching and prototyping phase of this design project, Dieter Rams and his ten principles for good design were my inspiration.
The principles of his that I considered most carefully for Root Checker’s redesign are as follows:
I also decided to use Google’s Material Design as a jumping off point for this design because as a pure utility app, Root Checker needed to come off as trustworthy, reliable, and loyal to Google and the Android ecosystem. (I also happened to love Material Design, and thought Google was finally catching up to – if not passing! – Apple’s design standards.) By having Root Checker conform to Material Design, it could improve its aesthetic without jumping too far into ostentatious territory. It didn't need to be a particularly flashy or stylish app. That could send the wrong message, like it were more of an app than it actually was, and that wouldn’t have been honest.
See below for the before/after screenshots of the Root Checker app redesign.
Since this page’s function was the major reason why users downloaded this app, I designed the interface to be dead simple by magnifying the area to tap to check for root. I deleted the app promotions, and featured them only when the user tries to check root and fails. He would at that point be prompted with an app upgrade (see the following image). Removing those app promotions clears away much of the visual clutter of the interface, leaving the button front and center and highly visible.
I then took some creative liberty with the menu bar and deleted the top title, since the title would be repeating the button’s name. The accompanying logo was cut too, which isn’t ideal, but I wanted the interface to look like a one-button remote control, that conveys the message: “I do this one thing and I do it very well.” Unobtrusive, fading into the background, doing its job, and doing it well: these were all aspirations. This pared away more of the clutter so that the user realizes that there’s only a few simple options. I changed the tabs to icons, to further simplify the interface. By taking away so many elements, I aimed for “as little design as possible.”
This image shows how the app upgrade option is presented to the user only after he has trouble installing root access.
When a user is able to very root access on his phone, it is a moment worth celebrating. Some users had to jump many hurdles to get to this point, and it’s a fun accomplishment to share, so a prompt comes onto screen with an option to share their success (along with their trophy badge). The extra mentions about the Root Checker app help build brand loyalty, legitimacy, and social media presence.
I updated this page to Material Design standards. with shadow on all four sides of the white overlaying cards, and updated the graphics just a bit, with a few new icons and colors (I stuck with the Material Design palette). I also changed the leading in the text to make it easier to read.
I experienced an interesting user experience tradeoff when using Material Design as the standard: larger fonts and bolder visual elements often meant that it took more scrolls to get to the information I wanted. I experienced this during the transition between using Dropbox’s Mailbox app and Google’s Inbox app. With Mailbox, I had visibility of six email messages. With Inbox, I only had visibility of four to five messages. That’s a reduction of 17% to 33%, and a drastic cut in usability. While designing for Root Checker, I noticed that applying Material Design often inflated the content to often twice as long as the original content (this is apparent in many of the following images). I may have to veer away from Material Design standards for the final iteration, to increase visibility of content, thus improving usability.
I also updated this page to Material Design standards. The original page made the upgrades look like completely different apps, but they aren’t. They really are just added features, so I took away the boundary box to make each card look like a feature upgrade, instead of a full-on app purchase.
For the Root Checker Pro Bundle, there were a few more tabs than would fit comfortably on one screen, so I added a title bar to fit the sharing and triple dot menu icon. It also afforded space to include a logo in the upper left corner.
The animation at the beginning of this post helps showcase how this interaction flows. The original animation (a looping outline around the circle) was borderline static, and barely noticeable, though it was still better than not having any animation at all. I wanted there to be more of a pop when it came to the animation. How could I add a bit more flair to the result, so that it was absolutely clear that the result came through, and also clear what the result was? This is like the finish line of a long journey of trying to root your device, and I wanted it to be somewhat celebratory, somewhat spectacular, at least for a utility app. I made the elements spin, I had the cards come in at different speeds, to look more organic, and the refresh button completely covered the screen with a blue haze before subsiding into a fresh new page with an untapped button.
This page was chock full of technical jargon, which cluttered the screen. The perplexing terminology could easily be intimidating for some users, so I hid the data behind a hide/view arrow. I am working with Joey to translate the text throughout the app into more layman’s terms, so that it could be much more understandable.
This page is equivalent to the Advanced Root Check page, with the same interaction flow and animations. By using the same colors for the success and failure as those in the root check operation, I stand a chance of confusing the users, even if the word “BUSYBOX” is clearly labeled below. With that in mind, I could either change the colors entirely (although it would be hard to choose which colors, since green and red are culturally consistent with the concepts of success and failure, respectively) or use the graphics that were provided previously by the last designer working on this project. (I can just expand the size of the yellow and orange gears graphic found in the original image.)
As this app progresses to a final redesign, the vision I expect to deliver is a cleaner, more unobtrusive, more honest, more aesthetic, and more intuitive user experience, just as Rams outlined.
This app's current stage of redesign was recently submitted to the engineer for review and development. There will likely be another final iteration before the design is coded and goes live. Joey will A/B test the new designs to see if they in fact provide a more pleasant and delightful user experience, and lead to greater customer loyalty and higher reviews in the Google Play store.
Assets Credits: Brian Oppenlander (double arrow transformation icon), Yaroslav Samoilov (sunburst gear), Aha-Soft (crank gear), Johannes S (concave gear)