Project Overview

About HTC Themes 

HTC launches a new phone with a new application every year, and HTC Themes was the new application launched with the M9 model in 2015. HTC believes that personalization has become a big part of people’s lives, and HTC Themes will be the best tool for smartphone customization.

Problem Statement

Market Demand for Themes

Xiaomi, Sony and Samsung were the major three direct competitors who have already invested in the theme category for a while. Xiaomi especially, has achieved great success in this market. In March 2014, HTC began to prepare to join the game.

Project

Platform for Theme Customization on Mobile and Website

Empower users to customize wallpapers, colors, icons, lockscreen and sounds anytime.

Project Goal

Differentiation from Competitors

  • Provide features that competitors don’t have - for example, the system can generate a set of themes based on the picture user - uploaded.

  • A platform for advanced customization.

Business Goal

A New Business Model

  • Attract young generation, stimulate phone sales.

  • New revenue source from paid themes - crossover themes with popular designers and illustrators.

Users & Audience

All HTC Users

The short-term goal is targeting mainly HTC users. If it goes viral, it will be expanded for all Android users.

Design Challenge

Create Three Platforms in 10 Months

Project scope and requirements are as below:

  • App UI design has to follow Sense design guidelines.   

  • Easy personalization! Customization of wallpapers, colors, icons, lock screen and sounds should take no longer than 5 minutes. 

  • Enable users to create themes on the HTC Theme website.

  • Enable users to sell their themes on Theme store.

My Role

Lead 2 junior UI designers on visual design, interaction prototype, and Hi-fi mockup delivery. Partnered closely with 3 UX designers on user flow, wireframe, and user experience. Collaborated with 1 product manager, 2 tech leads and 10 + developers to lock down requirements and ensure on-time product delivery. 

Key Deliverables

A number of deliverables were required for the project, including:

  • Wireframes

  • Branding 

  • Web design 

  • Mobile design

  • Illustration 

  • Interactive prototype

Design Process

Three Platforms for Different Users

HTC Themes has three platforms: Theme Maker, Maker Pro, and Themes. Theme Maker and Maker Pro are web services, and Themes is an application for HTC phones. Theme Maker and Themes are mainly for all users, on the other hand, Maker Pro is for advanced users with more customized features.

Wireframe

Feature Sorting

Provide different features on different platforms.

Theme maker

Maker Pro

Themes

Solution

Web Design

An Unprecedented Visual Design at HTC

HTC Themes is a fun, youthful and creative platform. With a wide variety of customization, users are able to theme their HTC phones the way they want it. To echo the playful vibe, I implemented a lot of colors and flat illustrations to highlight the product features.

Landing design

Web- Maker pro

Feature map

Theme Maker

Maker pro

App Design

Informative Tutorial Design

Tutorial is where users get the initial impression of the app, which is why it is important that the designs have to be informative, engaging and visually exciting. I wanted to create a casual experience where the users wouldn’t feel like they’re being forced to walkthrough a setup process; instead they are intrigued and want more of HTC themes. My art direction in the tutorial design is also being expanded to other HTC apps.

Tutorial wireframe

Hi-fi tutorial

Themes

Branding

Kaleidoscope and Color Wheel

The inspiration comes from kaleidoscope and color wheel; they symbolize endless possibilities and plentiful creations, which is what HTC theme is all about.

Sketch 

First design pitch

Second design pitch

Final design

Shape combinations

Outcome

Missed the Opportunity to Evaluate the Product

After the release of the first phase design, we simultaneously started the second phase of the development process. Unfortunately, tracking our user behaviors and collecting user feedback from the first phase were not part of the scope before moving onto the next phase. This is where we missed the opportunity to evaluate the success of our product. Instead of making any adjustments to our product to better fit our users needs, we continued to add more new features in the second phase as the original plan.

Themes Expanding

After the launch of HTC Theme, there were many business strategies that were Theme related, such as the HTC Desire phone. The business strategy for the new Desire phone is to create a default theme that is unique, bold and fresh. This time around, the design requirements were beyond the original capability of HTC Themes:

  • A new weather clock widget and layout

  • A customized grid or without grid and guide

  • A new font family that is NOT Roboto

  • Graphical wallpapers

Ideation

Think Outside of Box

I focused on creating a new weather clock that has never been seen before in the market. To do so, I tried to break the rule of grid and guide system in Android phones. A fresh look and stunning homepage design is that I aim to achieve.

What We can Improve

I left HTC 7 months after HTC Themes was launched. Moving forward, my advice for the future of HTC Themes include: 
 

  • Evaluate the Product Using data 
    After the launch of HTC Theme, data was never used as design references to optimize our product. I believe data is a metric way to measure the success of the product. By recording all user actions, it helps us to identify UX opportunities and evaluate the success of UX designs.
     

  • Health Monitoring
    Identify goals and metrics to develop an ongoing measurement plan to track Key Performance Indicators (KPIs). This KPI can be used to indicate any UX issues.
     

  • Experimentation
    Regularly run and evaluate A/B and multivariate tests.  

© 2019 by Jason CT Yang.