Senior product designer for Cyanogen, a mobile OS provider
Improving discovery and management of custom UI elements on users’ phones
Use familiarity and fun to communicate complex ideas more clearly
Themes drew larger and heavier usage, especially when brought to new markets
Internal growth marked the first half of 2014 for Cyanogen in several ways. A newly-expanded office with seats for its growing design team meant the company could broaden thinking about new and existing IP. One such product was the operating system’s theme engine, which let users customize the visual nature of their phones’ UI. Earlier efforts helped organize theme content, but we now wanted a platform to grow it as a revenue stream.
At the time, themes were only available through the Google Play Store and manual installation, making discovery difficult. For consumers, it meant sifting through search results and online forums, and for theme creators it meant limited reach and revenue growth. Our goal was to make themes as easy to find and install as apps.
Two experiences were planned to accomplish this:
Theme chooser, to apply and customize themes
Theme store, to discover, purchase, and download themes
Helping people understand themes and how they worked was our primary challenge.
Cyanogen OS typically attracted savvy Android enthusiasts, but we knew this wasn’t always going to be the case when entering new markets. Good communication was also essential to our biggest feature: the ability to mix and match components from different themes. Solving this meant making sure our designs felt familiar, but also informed what themes were and what they did.
For the theme store, we drafted a model inspired by marketplaces that manage multiple content types - important when navigating the theme components. Early work included a featured section and a cart system to support component-specific purchases, but these were dropped due to technical scope.
Themes were organized by cost at launch, and could be explored by their included components, such as icon packs or ringtones. Tapping into a theme showed previews of its design and the primary CTA. Further down included additional details like author, description, component breakdown, and reviews.
Users could also search for themes by name. Searching by color was designed, but not implemented. Currently and previously installed themes were listed in another view so users could remove themes from both the store and chooser. This was especially important as themes did not appear in the app drawer.
While initially the store meant to include a new way to purchase and download individual theme components, this functionality was dropped due to technical scope. Instead, the app connected directly to the Play Store as a source, meaning any payment was done on Google’s end. These were early designs for these features.
The chooser UX was lead by another member of the team. It was designed as a single row of theme collections, which users could apply or open and customize based on the installed components from other themes.
Testing for the theme store was done with internal walkthroughs and discussions with trusted community members to make sure themes and their components were represented clearly. The store was considered straight-forward, with little tuning required. At the same time, we drafted and ran user interviews for the theme chooser. Beyond usability, we asked about:
An understanding of what themes do
How often would people use the chooser, and how often they would change various components
Our results showed people struggling with how themes were applied and customized, so these were made more clear for launch.
Multiple considerations were made for the chooser and store. They needed to be a consistent pair, so moving between them felt natural. Material design concepts were also introduced before its official launch to future-proof the experience. Finally, to help our goal of communicating themes, the chooser needed to feel like it was part of the system rather than a simple app.
The theme store’s look was inspired largely by a gallery space - white and uncluttered to bring the artwork of theme creators forward. Navigation and actions were colored with Cyanogen’s brand palette. I gave special attention to the opening and closing transition for theme previews.
Using cues from the store, themes in the Chooser are presented as a card.. Opening a theme’s components split the card into different rows as a scrolling view, the transition helping maintain their relationship. A custom open and close animation was also designed to make the chooser feel like part of the OS itself. This is also why the user’s current wallpaper is shown as the background.
The theme store and chooser debuted with a welcomed response at the end of 2014. A contest was held to promote theme creators to set up their console accounts and submit work to the store.
In 2015 the store allowed for paid themes to be accessible, which would redirect to the Play Store for purchase. The chooser was also updated with the ability to selectively theme individual elements around the system and apps with an on-screen tool called the App Themer.
According to system statistics at the time, over the course of the theme store’s availability on several Cyanogen OS devices it served north of 10 million downloads. This was covered by a variety of themes, both 1st party and from a large community of theme creators.
