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.
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.
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.
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.
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). |
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.
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.
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.
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.
Compositing is used to preview the "third-party app".
The editor was launched on ZenUI Designer Community, where designers can learn about ZenUI theme design and download the design manual and tools. There are 4 steps for editing a theme:
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.
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.
