Acer Halo

About

Acer Halo is an intelligent speaker designed based on Google Assistant. In addition to optimizing sound effects with the latest DTS acoustic technology at the time, the main difference lies in enhancing the visual effects. The base of the device features RGB ambient lighting that displays lights in different modes, such as with music. Additionally, the device body includes an LED screen that can display basic functions like time, weather, and volume, and it can also be used to create custom patterns and animations. This integration allows technology devices to seamlessly blend into family life.

Basic Information：

Product：Halo
Issuing Company：Acer
Scope of Work：UX Design
Plateform：iOS、Android
Released Date：2020

Getting Started：

At the beginning, the project manager presented the final proposal from the industrial design team, hoping that I could create an app to switch between different lighting modes on the device. I posed the first question: Why an app? Is the experience we want to provide really just about downloading an app and connecting it for light switching? I then proposed enabling customers to fully customize the front LED array.

Challenges and Opportunities：

Ease of Drawing：Drawing on a low-resolution display like this often leads to an inaccurate placement of a single pixel affecting the overall presentation. To address this, the editing area on the phone had to be enlarged so that users could edit patterns at the pixel level. Simultaneously, quick deployment of text information was essential. For design, we implemented a mode switch to facilitate easier creation of text and patterns.

Dynamic Effects：Ordinary users might not grasp the basics of animation creation. Simplifying the drawing process required considerable research. Initially, we retained a design similar to a mobile video timeline, allowing users to quickly link the experience of recording videos on their phones. Next, we designed frame copying and shifting effects to ensure that customers creating dynamic images for the first time could quickly understand and feel accomplished.

Quick Start：After addressing dynamic effects, we felt that creating animations still required patience. We designed a shareable graphics library to provide a faster deployment method. This allows everyone to share their own works and engage in secondary creative efforts based on existing creations. The company also regularly provides interesting patterns for customers to download.

Design Process：

Structural Confirmation：With the goal of enabling editing, we needed to modify the lighting commands originally written in firmware. Therefore, the LED screen on this device is only a 17x22 array. In essence, as long as we had a file format capable of packaging multiple frame boolean arrays, we could achieve our goal. Once the feasibility was confirmed through practical operation, we proceeded to the wireframe design phase.

Wireframe Creation：Unlike fully expanding the wireframe according to functionality, at this stage, reducing the user learning curve was the primary focus. Using the array canvas as a baseline, I added basic functions such as an undo button. Simultaneously, I simulated the process of drawing and recorded the necessary tools.

Flow Documentation：Because the design process was based entirely on the user experience, the flow documentation was nearly completed around the same time as the wireframe.

Afterword：

Lowering the threshold of expertise to a level accessible by the general user is an interesting challenge. Professional users pursue results, requiring comprehensive tools and a smooth interface. However, for the average user, emphasis lies in entertainment and an easy learning curve. Seeing my colleagues test and create on the canvas as if discovering a new world reminded me of the pure joy of creating my own work for the first time in Flash, and it's also the most rewarding process for a product designer.