LeEco OS UI

Product overview

What is LeEco?

LeEco, formerly known as LeTv was a Chinese-based technology company founded in 2004. It initially focused on online video streaming but subsequently expanded into smartphones, smart TVs, electric vehicles, and other consumer based electronics.

Project summary

Overcoming cross-device synergy

In 2017, LeEco embarked on the ambitious journey to expand its reach into the United States market. With a vision to launch a series of cutting-edge devices including smartphones, smart TVs, VR, and automotive, I was tasked with developing a creative strategy and design process for a unified ecosystem named EUI (Ecosystem User Interface) that would seamlessly integrate hardware and software with the diverse needs of American consumers.

LeEco’s inaugural foray into the American market was the launch of a groundbreaking smartphone. Featuring a host of features and new standards for mobile experiences, the smartphone would run on the latest Android operating system version, nougat 7.1.1. and the code base would be split from the China-based EUI.

Design process

Defining a creative strategy

Kicking off the development of a new UI, we wanted to accomplish the goal of bringing together the visual inconsistencies across all of the company’s product lines by focusing on the areas of color, typography, iconography and layout.

With the aim of launching the latest version of EUI in parallel with the Android 7.0 release, we assessed the baseline android 7.0 OS and compared with the current version of EUI developed by the team in China. With this assessment, we determined the scope of work and any gaps in functionality.

Due to the tight timeline of releasing a new EUI to the United States market with android 7.0, it was decided the extent of visual branding would be limited to a re-skinning of 7.0. Visual branding included the customization of color treatment, iconography, typography and photography. On top of adhering to android’s 7.0, the release also had to comply with requirements based on U.S.-based carrier guidelines.

The project was divided into features for faster sprints. Features range from the Lock Screen, Home Screen, Settings, Notifications, Dialer and more. Divided amongst two UI designers and one UX designer, the UX designer would first develop a page flow based on the 7.0 baseline and then introduce any additional requirements based on the carrier or the LeEco team. The UI designer would be required to re-skin all of the instances based on an established LeEco UI guideline. Specifications and assets would be sliced out and delivered to an android developer for production into the base code.

On a weekly basis the developer team would meet with the visual QA team to test and find any bugs in the implementation before saving the code in the master code.

Design process

Baseline

Chinese-based EUI 6.0

Release timeline

Color exploration

Visual branding ranging from color, typography and iconography were carefully selected and implemented based on the WCAG 2.1 guidelines, ensuring optimal contrast and legibility.

Wireframes

Page flows underwent various iterations and testing prior to handing over the designs to the UI designer.

Redlines and specifications

Redlines and design specifications were packaged and provided to an android developer for every design feature, ensuring precise implementation and design alignment.