Website Optimisation
✕
Overview
Impact
This project showcases a data-driven design process for the company’s global overhaul of its official websites and ecosystem, aiming to drive user growth. This initiative resulted in a 30% increase in new registrations by optimizing the official websites and registration funnels. Additionally, it brought a threefold increase in productivity through a new web design system developed during this project. Using the new design system and creating a coherent ecosystem, we updated over 10 different web platforms within 3 months, enhancing both business success and brand awareness.
Contribution
My role in this project initially involved analyzing the data to better understand the environment and user behavior, ultimately utilizing these insights as a resource to develop an optimized websites. My responsibility included finding a solution to harmonize all Deezer websites and promptly readjusting them based on data-driven insights obtained from tests.
Analysis
Context
The official Deezer website, a music streaming app, was created to introduce and promote the service. As it serves as the initial point of contact for users interested in using the app, it should be considered a crucial space for acquiring customers. However, all Deezer websites were underperforming and inconsistent with the current branding due to slow and outdated updates.
Needs
Business
The official Deezer website exhibited low performance for several visible reasons: it fell short of achieving SEO excellence, the website structure disrupted the user journey, and other websites under their brand displayed inconsistencies with misaligned branding. Therefore, the company aimed to achieve the following business goals:
- Improving registration and subscription journey.
- Achieving SEO perfection.
- Provide informations that users are seeking at a high level.
- Updating graphics to align with the new branding.
User
Due to a disrupted user journey and outdated graphics, users experienced confusion and had difficulty finding the information they sought. The outdated interface raised doubts about the product’s quality. Additionally, users seemed to have trouble accomplishing the following tasks:
- Getting information quickly to resolve their questions about the product.
- Managing their account or accessing other Deezer services through the official website.
Goal
Challenge
After analyzing the quantitative and qualitative data above, we understood that users are looking for something unique that sets the company apart from competitors to determine whether they are willing to try the app. Since we haven’t yet identified this differentiator, our challenge was to establish an efficient, data-driven design process that allows us to quickly test different content and determine what interests users.
Problem to solve
How might we efficiently optimize the website to deliver the information users are seeking and encourage them to test the app?
Design
Setting hypotheses
1. “New visitors are seeking immediate information about the subscriptions.”
Since 94% of users visit the website organically, we presume they already have some knowledge about the product. Due to a significant decrease in scroll loss and concentrated clicks on the subscription cards, our initial hypothesis is that users are seeking information related to the subscription more than any other type of information.
Test: We decided to test bringing the information related to the subscription (“offer cards”) to the top level, above the scroll line, to provide users with an immediate answer to what they are seeking as soon as they enter.
Design
2. “New users are looking for differentiators that set the product apart from competitors.”
On the legacy website, the page where we introduce features is one of the most visited pages after the login and subscription pages. Users are not simply looking for a music streaming app but a reason why they should use Deezer compared to other competitor services. For example, Flow, one of the key differentiating features, draws more attention than other elements on the previous features page.
Test: We decided to test highlighting some key differentiators right below the subscription cards and create a dedicated menu to introduce features.
Design
3. “Users miss the chance to discover Deezer because the SEO is not optimized.”
Users primarily come through direct traffic (by URL) rather than organic traffic (SEO). Users who may not know about the company should have more opportunities for discovery through search engines. This issue arises from the structure of the legacy website, where SEO was not optimized due to a limited design for integrating keywords.
Test: We decided to test incorporating FAQ and catalog pages to increase SEO opportunities.
Design
4. Subscribed users log in first to manage their accounts, upgrade, or downgrade.
On the click map and heat map, there is a concentration of clicks around the login button. The data shows that the login button has the highest click rate, accounting for 33% of all clicks compared to the rest of the elements on the page.
Test: We decided to test providing a simple account management experience while highlighting the upsell options once users are logged in.
Design
A/B tests and iterations
Based on the hypothesis and test results, the design has been improved using data. The A/B test results proved the importance of the scroll line, leading to a more dynamic linear framework to optimize space. The confusing content image was updated to reduce dead clicks and make it more understandable. Through the design test and SEO optimization, we also learned the key features to highlight in the correct order.
Design
Data-driven structure
Systemization
Website optimization required a strong reliance on data to determine which information or features should be highlighted. To increase efficiency in this fast-paced, data-driven design process, we decided to systematize the interface from the component level to the whole scale. When designing the first draft, we kept the systematization concept in mind to facilitate the creation of a design system.
Landing composer
The landing composer, termed “systemization,” encompasses the foundation of every element: from text, buttons, and images to sections, and from sections to the entire page. All possible elements were transformed into variations, allowing for quick replacements when necessary.
After creating each atomic component, we integrated them into the dev-design system. This enables us to swiftly complete the cycle of testing, gathering quantitative data, and interchanging or rearranging the order of components to address issues as quickly and efficiently as possible. It improved efficiency in the design-dev process and the establishment of visual consistency across a product and the various channels of a brand.
Success metrics
Increase in performance
Since the launch of the new web ecosystem, Deezer has gained 1.48 million new users within two quarters. By focusing primarily on the information and journey that users seek and displaying it prominently, we swiftly captured users’ attention. This led to increased appreciation and a significant rise in new registrations.
Harmonized branches
Throughout this process, we addressed the issue of disharmonious branding across the company’s websites. We revamped other websites within the company to align with current branding standards using the landing composer. By centralizing the web design system, we ensured consistency across all Deezer sub-branches with high efficiency, resulting in over 10 platform updates within three months.
Designing the design process
As this project was highly data-driven, achieving an agile process throughout the design phases was crucial. It was not only about designing the outcome but also about learning how to design the right process according to the nature of the project.
