Background: The Problem
Mobile marketing teams who work with ad networks to advertise their campaigns, are required to go through complex settings process.
The app's code needs to be integrated properly with the partner so that the data will be reported correctly. This process is time-consuming and requires multiple steps and stops.
AppsFlyer allows Mobile Marketing teams to seamlessly configure their requirements and needs for each Partner. In this project, the main objective was to redesign the existing UI, alongside improving the functionality, the experience and most importantly - the settings' clarity to the users.
Sketch (wireframing, design mockups and style guide)
Invision (Prototyping and design specs)
Zeplin (Dev delivery)
Jira (PRD and Dev tasks)
There are many complexities to take under consideration and solve in this kind of project.
The UI's layout and components need to be as flexible as possible since different ad networks have different settings.
The development needs to be done very carefully since the interface is live for users to work with. In the user experience process, we needed to find elegant ways to overcome different challenges raised during the project.
The micro-copy got extra attention in this project. In order to create a seamless experience, in a very complex functionality flow, the texts needed to be very straightforward and clear.
Team members interviews, Mainly support and CSMs who most frequently interact with the end users.
Use cases and user flows.
Usability tests, during and after launch to validate the functionality is clear an iterate if something needs tweaking.
User flows and content hierarchy
The first thing we needed to figure out, was the content hierarchy for the basic layout. We created a rough sketch prototype based on the main use cases and actions the users take. We used Google Analytics to understand users' behavior on the platform, trends we spotted in the usage of the current UI, qualitative research and brainstorming with the PMs and the developers.
Once we had the basic layout with the basic functionalities, I worked closely with the developers to verify that the content and behavior of the UI fits the different states and cases.
Product functional and visual alignment
Once the projects' wireframing and design were completed, the next step was to apply the new insights we've learned, and the changes we made, to other related features in the system. I led, with the relevant PMs, the defining and applying of the new micro-copy, behavior, and visual components.
Follow up: Analytics
Together with the PMs, we prepared a list of actions and behaviors we wish to measure and prepared a plan for the dev team to implement in the analytics platform we embedded in the system.
Figuring the best solutions for a complex system such as this requires a lot of research and constant QA.
Working closely to the developers increased the effectiveness of our process and communicating challenges allowed us to rapidly find solutions.
Be open to change. In a system like this, where every page has a basic layout, but the different configurations per partner are endless, it's necessary to be lean, plan ahead and welcome changes.
Onboarding - Product Management