WeSing

Mobile Music Editing and Sharing APP
Major design revision
March 2015 - October 2015
Tencent Technology Co. LTD. Beijing
Product:
WeSing
Type:
Mobile music Editing and Sharing APP
Duration:
8 months
My Role:
Chief Graphic Designer;
Interaction Designer
Team size:
4 designers

Background

WeSing is a revolutionary mobile product which is helpful to professional musicians and amateurs to compose a demo of an original piece of music within 5 minutes. The two major traditional ways of creating a demo are using professional computer software and recording in a studio, which are either too difficult and complex or really expensive. Thus, there had emerged a need for a creative solution of composing demo more conveniently and economically. Obviously, solving the problem with an APP would save an amount of time and money for composers. But sadly, although there are some existing mobile composing applications in the market, they are not capable of reaching this goal.

However, by elaborated designing and programming, the WeSing created by the team is a product which would meet diverse requirements and needs from the musicians and help amateurs and beginners to complete a quality demo without professional knowledge.

Keywords

In the first place, to achieve the major task of WeSing-- completing a high-quality demo, this software provides a variety of adjustment options of arrangement. In other words, although emerging as a application for cell phones, Wesing indeed is a professional musical tool, thus one of the keywords is decided to be “Professional”. This asks visual designers to create an atmosphere to imply users that WeSing will benefit them with a distinguished outcome.

Meanwhile, since composing a great piece of music is a kind of dream comes true, we agreed that the atmosphere of WeSing should be “dreamlike”. Moreover, the target users are music lovers (both the experts and amateurs) who would use mobile application on smart phones to create, which means most of them would be young people, thus “fashionable” must be another key point.

Drafts

Since the keywords and design orientation were both definite, it did not take long for exploration for visual design, based on the most important page—arrangement. After two rounds of optimizing and discussion, the design style was finalized.

As the picture shows below, during this phase, we chose to use purple as the major color. Not only because it impresses people as “mysterious and dreamlike”, but also because dark color like this could offer immersive experience for users. To imitate the professional environment of recording studio, colorful halo was embellished on the top of the pages just like the spotlight shining on the ceiling.

Interaction Design

WeSing is the first product which enables users to compose high-quality music demos by using an application on a cell-phone, which means there was no codified experience to draw upon. As the composing procedure was really complicated, we spent a great amount time on the interaction design in order to improve use experience. After the first internal version was released, we did the UE test and interviewed with both musicians and amateurs again and again, and then optimized the product accordingly.

Since the interaction part is really so complex that it runs into hundred pages, there is no way to show the whole picture of it here. But still, the screenshot below might show the scale and some details of the interaction design of WeSing.

Main Pages

There were many options and details included in the composing procedure, which posed a big challenge for graphic designers. We utilized all the visual elements—such as color, font size, icons, texture, and so forth—to show the difference between various levels of information, as well as to make the product more user-friendly.

In the major composing procedure, as purple was the main color, blue, green and pink were selected to be complementary colors. The use of a series of analogous colors distinguished different functional areas clearer while making the whole visual design younger and more fashionable. Moreover, the color strategy changed among different phases because of users’ habits or the consideration of usability. For example, the MTV-recording procedure adopted black just like the original application in iOS platform “camera“, while most lists colored white to be more reading friendly.

Meanwhile, the uniform application of arc and circle in different places embodied the “perfect” personality of music and echoed the logo design. Because of the abundant content of many pages, slim lines and graphics were applied, which also made the whole design appear sophisticated and professional.

Although the size of characters was limited in Chinese, we used different font size reasonably to differentiate the hierarchy of information.

Reflection

As I mentioned above, WeSing is an original product which almost has no competitors to refer to. And meantime, WeSing is a very complicated musical tool trying to resolve problems which could only be done by computer software before. Thus it sets a high demand for interaction design. Although we have already spent a lot of time on user research and the optimizing of interaction design, I think so far the application is still not user-friendly enough for beginners. Even for professional musicians, it would take some time for them to get used to this brand new way of composing and arrangement.

In my view, there must be some ways to simplify the whole procedure and solve the problem in a better way. Maybe it is to hide some secondary functions, maybe it is to boldly cut down some options and make the tool simpler. Whatever it is, we will keep on exploring. Our goal is to find a method to make it as easy to use as a graphic edit APP, and a user can use it without professional background or too much thinking just like anyone could use Snapseed without Photoshop skills.