Huawei Photo Gallery

Overview

My role

Design manager
UX designer

Duration

March 2021

Techic

Sketch
Origami Studio

In the past, the video playback in the gallery app directly called Huawei video player (another individual app), and the overall interaction and experience were very fragmented. In HarmonyOS 2.1, we redesigned and redeveloped the video playback experience in the gallery. Among them, for slow-motion videos, we wanted to provide a quick and easy slow-motion interval adjustment experience for users.

Competitive analysis

Apple and Xiaomi offer the same features. Therefore, they are the main competitors. Their components consists of two parts. The player bar and the adjustment component. The adjustment component displays playback speeds through the density of the elements.

Pros

Components are relatively simple and easy to understand. Users can quickly get up and running.

Cons

They have two components, the adjustment component itself does not contain any video-related information, meaning that the user's attention is slightly distracted when operating and also they take up more space height.

Design goals -
ONE clean component

Users can focus.

Save the space to make the interface clean.

Ideation

Combine two components into one

Assume that the total length of the timeline is W, and the number of frames of the whole video at normal speed is N.
The length of each frame is W/N.
The width of each frame in the slow playback interval is 2W/N~3W/N, and the actual length is based on visual, dynamic effects and development opinions.

With the length comparison, users can easily understand the different speed intervals of the timeline.

A simple interaction demo

Replenish necessary elements

Hierarchy of different elements

We found a strong similarity between the thumb and slider. Since the thumb is a standard element, we explored how the slider could be.

We made two lo-fi prototypes for rapid user testing. User acceptance of both designs was relatively high. Among them, Design A has a slight advantage..

Design A is too SIMILAR to existing component

However, as we were about to continue optimizing on the basis of Design A, we realized that Design A was extremely similar to a component that already existed in the photo gallery application. That's the component in the video editing module that users can use to perform video trimming.

Move forward with Design B

Refine the interaction

Distinguish between left or right?

When we were doing prototype testing, we found some difficulties with interactions when the user selected very short intervals for slow motion playback, or did not select any intervals.
‍
We found that the underlying issue was whether the two sliders should distinguish between left and right.

The slow-motion part of the video needs to have a sufficient number of frames (long enough intervals) to be meaningful.
Based on this premise, when the child sliders distinguish between left and right, it means that the user needs to precisely select the correct slider to move in the correct direction in order to change the interval.

NO!

We chose not to distinguish between left and right, and when two sliders are close enough to be within a certain distance, the moving slider will be attracted to the other element, rendering a complete overlap. When the user wants to reselect the longer interval, he only needs to drag in either direction, left or right, without selecting a specific slider.

Contact me to learn more about other interaction iteration process!

Visualize the new component

Since it is a component design, the interaction, visuals, motion and development are actually multi-threaded and concurrent. Each role gave full advice during the process. Here are our final visuals.

Verify if the final design meets the initial Design goals?

ONE clean component? Yes!

The new components have an extremely simplified design compared to other products in the industry. It saves a lot of space in the interface while effectively helping users focus on their tasks and enhancing their immersion in their operations.

Industry

HUAWEI