view

Appsflyer

Transforming AppsFlyer's digital presence through a strategic website redesign

My Role
Research, UX/UI, Brand Identity, A/B Testing
Type
Website redesign
Tools
Sketch, Figma, Illustrator
Timeline
2020-2021

πŸ’Ό

Overview

Joining AppsFlyer in 2019, my role was pivotal in generating visual materials for marketing initiatives. I rapidly identified a critical gap - the absence of a cohesive and recognizable visual identity - which was impeding the design team's workflow and overall marketing efficacy.

πŸ”₯

Challenges

Our website's user experience was hampered by slow loading times, averaging 8.5 seconds per page, complicated navigation paths, and an aesthetic that was no longer reflective of our innovative edge. This disjointed visual presentation was undermining our ability to craft compelling marketing materials and deliver a seamless user experience.

🎯

Goals

In collaboration with my manager, we determined that a holistic redesign was imperative. Our objectives were ambitious: to drastically reduce the average page load time to under 3 seconds, simplify navigation, and revamp our visual identity to resonate with our audience. This strategic overhaul aimed not just to update the website's aesthetic but to optimize performance metrics, thereby revolutionizing AppsFlyer's digital presence to meet and exceed industry standards.

DISCOVERY PHASE

In the first phase of AppsFlyer's website redesign, the strategy focused on rapidly updating the most problematic pages, identified via heatmap analysis as areas where user engagement was either lacking or not as intended. This approach was chosen to minimize the investment of time and resources while addressing urgent needs. The existing website design was deemed ineffective for the company's promotion, plagued by numerous flaws. This necessitated an immediate and focused redesign effort.

Site and Content Audit

The redesign prioritized the most frequented pages, specifically the home page and the product overview page. These pages were crucial due to their high visibility and impact on user experience.Through detailed analysis, including feedback collection and needs assessment from product managers, a clear understanding of the target audience and key website functionalities was established. This informed the restructuring and redesign of the identified pages.

Visual Strategy

The design process involved creating mood boards and gathering inspiration that resonated with the brand's ethos and the users' preferences. This step was critical in setting a visual direction for the redesign.

First Design PHASE

Embarking on the visual transformation of AppsFlyer's website, I began with meticulous sketches, laying the groundwork for the future site's architecture and the redesign of our illustrations. These wireframes served as the blueprint for the envisioned digital space, providing a tangible reference that guided every subsequent design decision.

new Product images present

Recognizing that product imagery is a cornerstone of AppsFlyer's brand representation, I dedicated myself to crafting images that not only captivated visually but also communicated the functionality and sophistication of our products. Collaborating closely with product managers, we ensured that each image was an authentic reflection of our interfaces, marrying technical accuracy with aesthetic appeal to create compelling visual narratives for our offerings.

Design Concept

Following the wireframe and product image redesigns, we progressed to conceptualizing the home page and product page designs. This involved transforming the initial sketches into more refined versions, which were met with positive feedback. The successful reception of these initial updates fueled our motivation to delve deeper into the redesign process, aiming to elevate the user experience even further.

Second Design PHASE

In the wake of our successful initial launch in February 2020, AppsFlyer's website progressed towards a refined and user-oriented online experience. The pandemic's demand for quick digital transitions echoed the global increase in online interactions, prompting us to enlist an external design agency. Together with my manager, we prepared a comprehensive and visionary brief for the agency, laden with rich details and a clear path for our brand's evolution. The foundational design principles I established guided the agency's work, ensuring the final design not only mirrored but also enhanced AppsFlyer's brand identity.

Creating a New Visual Language

Our collaboration with the external studio was characterized by a synergy of clear communication and shared goals, leading to a comprehensive enhancement of the design style. In a concerted effort, we developed a fresh visual language for our illustrations alongside the studio's designer, culminating in a style that garnered acclaim from both our stakeholders and users.

Creating a New Visual Language

During the website's comprehensive overhaul, I took the lead in standardizing all product imagery. This initiative ensured consistency across our platform, aligning every visual aspect with our newly established brand aesthetics.

Unfited Product images to one standard

Our collaboration with the external studio was characterized by a synergy of clear communication and shared goals, leading to a comprehensive enhancement of the design style. In a concerted effort, we developed a fresh visual language for our illustrations alongside the studio's designer, culminating in a style that garnered acclaim from both our stakeholders and users.

Figma Libraries & Illustration Builder

During the website redesign, I identified the need to improve our design workflow in terms of efficiency and consistency. To address this, I took the initiative to develop a new Figma library where AppsFlyer design team could find and use pre-designed elements with the ability to customize them, or easily create new ones.
My main goal was to determine the look and feel of our dashboard illustrations for marketing use. To avoid delays caused by the parallel update of our AppsFlyer platform design, and to remain consistent with our new visual style, existing dashboards have been simplified and redesigned. I collaborated closely with my product design colleagues and received guidance from their expertise.
Furthermore, I worked on organizing and simplifying all of the libraries that were created during the website redesign.This allowed the design team to create quality designs more efficiently, resulting in a 40% increase in output.

Final say

I'm very proud of all the people involved in this challenging project and the work that has been done. The launch of the redesigned AppsFlyer website in 2021 marked a pivotal moment in the company's digital transformation journey. Accompanied by a comprehensive marketing campaign, the new website has been celebrated for its improved user experience, evidenced by positive user feedback and enhanced performance metrics like reduced bounce rates and longer session times. Notable improvements include faster loading speeds and a responsive design, significantly boosting user engagement and aligning the website's aesthetics with AppsFlyer's innovative brand image. Reflecting on the project, the team's collaborative effort and learnings from this large-scale redesign have been invaluable.
You can view the live version by going to appsflyer.com