Lark Player

Product Design / Design System / Visual Identity

Lark Player is a media player with more than 12 million users from Latin America, the Middle East, North Africa and other regions every day. I am responsible for the interface design of all versions of Android 4.2 up to now and iOS versions. During this time I also organized multiple workshops to define the issues of the product through various design tools and methods.

Client

Lark Player's Users

Year

2020

Persona

01

We have established four character models with their own characteristics in the co-creation workshop and user research. What they have in common is the use of mobile phones with smaller screen sizes, and the network environment has certain restrictions. The charts below shown their respective characteristics.

persona
persona
persona
persona

Information Architecture

02

I categorized product pages into Main Page and Global Page. The Main Pages have fixed locations and entries, and the Global Pages have flexible locations and entries. We can observe the paths and pages that people go through when performing tasks.

function-map

Design System

03

For a unified interactive logic and a consistent visual language, I have organized the relationship between the design system and brand system, component libraries of each platform, and products. As shown in the figure, the brand system should be the highest principle of the entire product. The design system not only inherits the characteristics of emphasizing consistency, but also cares about design and development efficiency, and asset maintenance costs.

designSystem

UI Kits

04

The design system includes two parts: Design Library for storing cross-platform assets and UI Kits for storing each platform components. They will iterate due to brand system updates or product iterations. According to the usage scenarios, I defined design guideline including copywriting style, component usage scenarios and use cases.

UIKits
UIKits
UIKits

Music Player Page

05

Music Player is the most frequently visited page in the product. I redesigned the layout according to functional groups. In the original page, Up Next and Lyrics are two different pages independent of Music Player, but now they have become two different states of the page.

musicPlayer
musicPlayer

iOS Version

06

In the iOS version, in addition to the use of native components, it also inherits most of the assets attributes in the Design System, such as colors and icons, to maintains consistency.

iOS

Pages Display

07

The following shows part of the pages I designed.

allPages
allPages
allPages
allPages
allPages
allPages

Day Mode

08

Lark Player added a day mode in version 4.13. For this feature, I also added the color plan and components of the day mode to the design system. With this version, we also changed the file type of Icon in the development asset from .png to .svg, unified the naming standard, used parameters to render colors, and established an asset library that is easier to maintain and manage.

dayMode
dayMode
dayMode
dayMode

Visual Identity

09

I also redesign the Logo and Logotype for Lark Player to make it look more modern.

branding
branding
branding

Up Next

Su Pin

Service Design / Product Design / User Research

Full Project

Go Back