JOOX is Tencent's strategic music app for the Southeast Asian market. As a nationalized brand, it faces some difficulties, but at the same time, it conveys its product values to users in a creative way. When we design products, a good design project is like telling a story, but this is just an expression strategy, and ultimately it is to let users understand the product content we want to express.
JOOX is Tencent's strategic music app for the Southeast Asian market. It was launched in 2014, and its user groups are mainly concentrated in Hong Kong, Indonesia, Malaysia, Myanmar, Thailand, South Africa and other markets.
In 2020, a sudden new coronavirus swept the world and had a huge impact on the global political economy. This year is an extraordinary year for each of us. Forced to reduce the frequency of going out for activities and gatherings, and can only stay at home during this gloomy time, JOOX has brought a lot of warmth, happiness and touch to users.
1. Challenges
As an international product, JOOX covers six countries and regions. Their economies, politics, languages, religions, and cultures are different, and they face relatively large challenges. Therefore, the best strategy is to extract the commonality in complex scenes, and transform it into a simple and easy-to-understand language in a creative way, and then pass on product values to users.
2. Design process
We divide the whole process into three stages:
3. Pre-exploration
1. Topic positioning
First of all, we must define our own product positioning. Who are we? Who do we serve? What kind of services we provide. As a pan-entertainment platform, our mission is to bring happiness to users in innovative ways. From the perspective of product role, JOOX is like a friend, accompanying users.
Considering the special role of our products during the epidemic, we hope to shape JOOX into the role of a companion, using some relaxed and interesting ways to bring back memories of users and re-establish the relationship between products and users.
Clarify the theme: JOOX be with you will always revolve around the current theme during subsequent design execution.
2. Style tonality
Based on the positioning of JOOX be with you, divergent thinking around "accompaniment", the entire style and tonality should be warm, peaceful, friendly, and interesting. Through these defined words, guide the final plan.
3. Design goals
The design goal must ultimately be based on business. We hope to find the touch points that resonate with users through mining needs to achieve the following goals:
- Improve activity, through a year of music review, increase the activation rate of old users, and strengthen the secondary sharing exposure communication;
- Brand promotion, as an important operation activity at the end of the year, is a good opportunity for publicity, conveying our corporate values and product concepts to users, and shortening the distance with users;
- Driving growth, this kind of large-scale activity is also a very good opportunity to do growth design, build a user experience map, do a good job of analyzing each link, and give corresponding solutions to improve core data indicators.
4. Creative execution
1. Mood board
Through the keywords sorted out above, look for style references for building visual language. When the epidemic was at its worst, everyone stayed behind closed doors. Even if the epidemic situation improved, everyone chose to stay at home for a long time. In order to restore the scene as much as possible, we targeted to find matching emotions plate.
In order to better express the atmosphere, we specially chose the very popular 3D style vision, and enhanced the user's sense of substitution by constructing a relatively real space.
2. Story arrangement
Doing a good design project is also telling a story. The main line of the story should be clear, and the plot development and character setting of the story should be based on the main line, so that it is easier to understand:
Due to the impact of the epidemic (time), our users (characters) could only stay at home (location), and when they were bored (cause), they took out their mobile phones and turned on JOOX to listen to music and watch live broadcasts (results), and soon Had a great day (result). Conceive the design according to our stories, and express the relationship between users and JOOX through stories.
After the main line of the story is clear, it is also important to mobilize the user's emotions at key points.
If the peak and end of an experience are pleasurable, then the experience as a whole is pleasurable. Therefore, at the beginning of the story, we must use some special techniques to attract the user's attention, whether it is an interactive method or an innovative effect gameplay, let the user stay first, and then let the user go down step by step through the story clues, and finally complete the whole experience process.
3. Draft plan
Drawing sketches is a very fast way to verify ideas. In the early creative stage, we can make a basic judgment in conjunction with the content display, especially for multi-language adaptation. If we can take these issues into consideration in the early stage, then in the early stage When revising the manuscript later, it will be more comfortable.
For summary H5 items, the display of content and the presentation of data will always come first. All of our design methods and strategies are built around content display. In order to better highlight our data content, when we first conceive the entire story, we need to conduct sketch simulations to leave enough space for the content.
4. Scene construction
When the story is arranged, the real state of the user listening to music at home is constructed through the scene. Anthropomorphic, we use the brand IP image JOJO to represent the product, accompany users like a friend, and achieve an atmosphere of playing together through interaction with users.
After determining the main scene, we will restore the "story" according to the sketches we drew before. At the same time, in order to highlight the characteristics and attributes of the brand, we will add JOOX's unique music elements to the scene to increase brand awareness.
While constructing the scene, it is also necessary to have a simple thinking about the final animation effect. You can’t wait until all the page designs are confirmed before thinking about how to make animations. Only by incorporating it into the plan earlier can you continue to reflect and improve your ideas in the self-game , and finally achieve an ideal effect.
5. Color
Appropriate color matching can intuitively convey the theme style. In order to create a warm family atmosphere, a warm background is used as our main color tone, and our brand green is used for embellishment and contrast, emphasizing the brand personality and highlighting the display of key information. Supplemented by a small area of yellow contrast, to blend the whole picture, in order to achieve a prominent subject, a distinctive character, and a clear tone.
6. Font
The product covers six countries and regions and uses multiple languages. It may be necessary to adapt to three mainstream languages in a certain country. Multilingualism is also a very big challenge in the process.
How to overcome designing in a multilingual environment?
- Understand the content in advance, and find the corresponding team to obtain translation materials in advance, and then arrange according to the scene;
- Multilingual adaptation is not suitable for complex scene design, so "simple" is our basic criterion;
- Variable text is a time bomb for multilingual display, and more space should be reserved in typography. Therefore, whether the adaptation of multi-language is good or bad will directly determine where the shortcomings of the "barrel effect" lie.
The arrangement rules of each font are slightly different, such as the picture below, the same copy, different character lengths and different line heights, if you encounter variable text, the situation will become more complicated.
7. Page Design
According to the analysis of the emotional board, story arrangement, color, font, etc. in the early stage of the project, we will finally present our static effect. The whole design is mainly simple, and the overall atmosphere is mainly peaceful and warm. The content is given priority, and the design concept is conveyed while ensuring the display of the content.
8. Interaction/Animation
JOOX is a relatively young product. In addition to our need to spend more energy on scene construction and story arrangement, interesting animation effects are essential, which can connect each of our small scenes and make the whole story flow in one go.
Our brand IP image, JOJO, has been associated with each page, using it to support the main thread and serve as a link between the past and the future, which can better attract users and guide them to read on.
The whole animation adopts the method of one mirror to the end. JOJO jumps to the corresponding position on the next page as the page slides. Its advantage is that users can have an immersive experience, follow the clues down, and reduce the loss rate of intermediate links.
In the process of animation production, rhythm is also very important, and changes in rhythm will directly drive changes in user emotions. Use rhythm according to the needs of the theme to help improve the quality of the entire visual perception. Such animations are meaningful.
On the basis of retaining the home page, the "Next" button is canceled. After loading is loaded, first enter the P0 home page and stay for a certain period of time, and then automatically jump to the P1 data page. From the later data feedback, here One step of data, the improvement is very large.
9. Music
Music has no borders. Music with different tonality is like perfume with different tonality, which gives people different feelings and affects users' emotions. A background music that fits the theme is not only the icing on the cake, but also the core of building an emotional connection.
We express the rhythm and emotion of music into three categories, rhythm: fast→medium→slow; emotion: joy→bright→smooth.
This is more intuitive, and the scope is further narrowed, and the target music can be found quickly through permutation and combination. Due to the epidemic, the overall atmosphere is still peaceful and warm. So our final plan is "slow→gentle".
10. Material output
Related materials, splash screen, drainage banner, and templates for sharing to ins, facebook and other channels.
V. Summary
1. Data Recovery
Based on past experience, the design has been optimized and adjusted in some links with relatively large data loss. The final data performance is still relatively good, and some core indicators have been significantly improved.
As an international product, the difficulties and challenges we face when promoting the design are much greater than those in a single market, but the solutions to the problems are the same. Don't be afraid, start analyzing from the most basic bottom-level problems.
Users in different regions have different usage habits. Our goal is to find commonalities and stimulate users to resonate in a way that everyone can understand and understand. For example, background music is a good emotional connector.
Doing a good design project is like telling a story, but this is just an expression strategy, the purpose is to allow our users to better understand the content we deliver. So we can't put the cart before the horse when telling stories, at least for this kind of inventory H5, the content must be given priority.