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.
Lark Player's Users
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.
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.
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.
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
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.
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.
The following shows part of the pages I designed.
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.
I also redesign the Logo and Logotype for Lark Player to make it look more modern.