ASUS Mobile GUI Theme Editor

May - Jul 2017, Lead Designer, Company Project, Tool Design & Development

This project aims to simplify the process of mobile GUI theme creation for worldwide creators. I did research, defined features, created usage flow and wireframe, designed the interface, and coded frontend pages. I collaborated with 2 project managers, 2 backend engineers, and 1 operator to polish the product and launch it.

Summary


Issue
To make an Android mobile GUI theme, we need to resize icons for different devices.

Barriers
Resize process is problematic and disable creators from completing the theme.

Solution
An online editor to help creators resize automatically.

Success Metrics
Designers save 50% of time on theme development.
Process


●   Discover User Interviews, Competitor Analysis ●   Define Problem Focus, Product Requirements ●   Develop Wireframe, User Flow Chart ●   Deliver Frontend Development, Launch, User Testing ●   Reflect
Background

Theme Packs are the decorative content which allows ZenFone users to personalize the devices’ screens with various designed theme packs products. Theme Packs are sold in Theme Store which was launched in 2015. Theme allows users to personalize lock screen, launcher, app icons, and color of system UI on Zenfone. Currently, it had 14M active users/month

There are 2 steps before launching a theme: design for the theme and process design into a specific format so the device can install and read. This project aims to provide a better tool for file processing so designers can complete and launch the work easily.

User Interviews

I interviewed about 20 stakeholders such as inhouse and outsourcing designers, students, operators, testers, and managers. I tried to explore the barriers that everyone had when they worked for theme development.

After interviews and analysis, I summarized 8 main barriers. The tools we provided had some issues and the tools caused a complex process for theme development as well. Many works required designers to complete manually and thus it's better to have an interactive tool that can complete partial work automatically.

Competitor Analysis

To understand the feasiblity of the interactive tools, I spend a week analyzed theme editors made by HTC, Xiaomi, and Samsung.

I analyzed the pros and cons of these products. Instant preview and design tips are very helpful for designers, editors complete file processing automatically so designers don't need to resize and compress files to specific formats. However, some user experience can be improved - separate screen preview cause designers to keep switching between different pages to review the whole design, software upgrade, and lack of save feature also require unnecessary works and process.

Takeaway from Interview & Competitor Analysis Phase -
From research, I decided to launch an "online editor" that provides “multiple" previews in one editing page, and completes the file processing automatically (e.g. resize files, fill color codes).

###
Focus Problems

Our goal was to provide a better tool to simplify the file processing process and help designers complete a theme pack easier and faster. With an online editor, designers need to complete less templates and can spend less time on processing files, they can save images directly, upload to editor to edit and preview it. An online editor can simplify process and save time on theme development.

Barriers Product Requirements
Process files manually, update tools from time to time. #1 Provide a web editor that users can easily access to and no need to upgrade
Limited preview tool influence the design quality, switch between different pages to review the whole design. #2 Provide multiple screen preview on each edit page of the editor.
Need to work on a design for days, need to modify design and preview result. #3 Enable change images, choose color, save and resume.
Process files manually, learning curve, compatibility issue. #4 Auto file processing by editor after submit (resize, name, and save files).
User Flow Chart

We had meetings with internal and external engineering teams to confirm database connection and functions. We postponed providing "save and resume" due to the cost and schedule concern, to support creators, we would send the file package to creators if the submitted works needed to be modified.

Wireframe

I delivered the wireframe and discussed with the engineering team, there was no argument on it and thus I moved on to the next phase, front-end coding.

Frontend Development

The most challenge parts are SVG and canvas techniques. I used SVG to present UI elements so user can change color, and I used Canvas to present the applied style of third-party icons.

37 app interface = 148 SVG layers

To edit and preview the color change on preview interface, I needed to decomposed each interface into 4 SVG layers and assign each of them with the right color variable. To manage the huge amount of SVG layers was one of the biggest challenge.

HTML5 Canvas to present the icon style for third-party apps

Compositing is used to preview the "third-party app".

Impact

This tool brought impact to 2 groups:
(1) Worldwide Creators: Save time on resizing and learning how to resize, save up to 50% of time on theme creation (data came from one of our partners).
(2) ZenUI Mobile Theme Team: Save time on educating creators how to resize, save 20% of time on communication with creators.

Lessons

I learned about 2 things from this project: how the tools can influence process, and how to convince others to realize your idea. When we designed a tool, we should not just think about its main users, but all related stakeholders; in addition, we should think about the "best solution/process" in the beginning and set up the plan to move forward to it. We all have good idea sometimes but we fail to realize it because people don't know the benefit of it, I found out that once I lowered the threshold of implementation and made it imaginable, people can accept it easily.

END ###
mujiunshie@gmail.com