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.
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.
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.
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.
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.
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.
Pages Display
07
The following shows part of the pages I designed.
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.
Visual Identity
09
I also redesign the Logo and Logotype for Lark Player to make it look more modern.
Up Next
Su Pin
Service Design / Product Design / User Research
Full Project
Go Back