In late 2019 App Annie acquired a company called Libring. The goal of the acquisition was to bring in most of Libring's features to App Annie customers under the name Ascend.
‍Read more on Tech Crunch.

The short term goal of the project was to define, design and deliver the core functionalities of Ascend to developers within 6 months.
The ongoing long term goal of the project is to keep researching and finding ways to bring value to existing and new customers.

The main challenge I faced while rethinking Libring and incorporating it into Ascend was the sheer complexity of the existing solution. The process of onboarding a new customer highlighted the challenge perfectly. A CSM and a developer would meet with new customers over a few days where they would explain the different stages of the data collection, data audit, normalization, and report generation. Even after the lengthy onboarding process, a trained CSM would be in charge of each user's account to make sure they do not make any mistakes.

The second challenge was the redundancy of some of the steps in Libring. For example there were multiple modules that made sure the data the users are collecting are clean and have no duplicates. I suspect the reason might have been adding features to the platform requested by a handful of high stake customers without considering the overall impact of the new features on the platform.

I spent a couple of weeks meeting with CSM and PMs and fully understanding the existing solution. I then worked closely with a PM and the primary stakeholders who have a very deep understanding of the platform to summarize the 21 existing modules into their core components and the problems they were solving. This allowed us to use first principles thinking to reorganize, rename, remove and combine some of the modules to create a set of 9 modules that when put together, tell a great story of the functions of the platform.

This step made sure the information architecture of the new Ascend platform is very intuitive by being as simple as possible, without any redundancy.

We also considered a future were new modules would be added to the platform to introduce new features. A quick mockup highlighted the flexibility of the new information architecture and how the new modules could be integrated without creating too much complexity or confusion.

I partnered with a PM to work on the newly defined modules to break them down to their core components. I would then take the components and create a few different low fidelity mockups with different layouts. We then showed the mockups to some of the customers and industry experts to make sure we are moving in the right direction.

After designing a few modules a few design patterns started to emerge and made it clear what type of components were needed for the platform. After all of the modules were laid out, I started working on the design components and creating high fidelity mockups. Although some high fidelity concepts were made earlier, it was important to wait until the last module was laid out to create the final components. This ensured that each component was flexible enough to accommodate all of the scenarios they would be used on the platform.
‍
The new platform's simplifications made the onboarding experience of new users a lot easier. But we didn't stop there. I worked with a PMM to create a 2-4 minute tutorial video for each of the modules. After handling some empty states and first time user experiences, Ascend could be onboarded by anyone on their own time with no need for a CSM to get involved.

By having the platform simplified and the onboarding process automated, the cost of onboarding new customers has dropped enough for us to consider a free variation of Ascend.

The customers that have been migrated to Ascend from Libring already show that they need customer support less than half as much as before.

The design system created for Ascend was deemed a success and a major step forward from existing App Annie design system. We are not in the process of using the Ascend design system and expanding it to apply to all of App Annie.
You can read about it here.

The goals for the first phase of the project (the first 6 months) were met and exceeded. I received a Design MVP Award for the year of 2019 from App Annie for my work in the first phase.

Creating the animations for Ascend was easily the most fun part of the project for me. Microinteractions and final touches like loading state animations provide the final touch for a project to feel finished for me, and it's a very satisfying moment when they are implemented.

Due to the complexity of the data, some pages needed a few seconds before they could show the full report. So instead of showing the basic spinner on those pages I created a spinning version of the logo to be used instead.

I used Cinema 4D to build the logo in 3D and create the spinning animation. It made the waiting on the website a lot more bearable.

I also created a custom animation which is meant to be shown to users after they sign up for Ascend and load the page for the first time. The animation was eventually deemed a bit much and was descoped, but I'm proud of it nonetheless. Instead it ended up being used in internal presentations as an intro.

The next step was creating subtle animations for the components in the Design System to give them a dynamic feel. I started with the primary tabs, secondary tabs, and radio pads (AKA segmented controls).
‍
The same ease out animation from the main navigation bar is used throughout the components. The benefit of easing out, compared to easing in and out, is that it makes the UI feel a lot more responsive to the user input. As if the component is rushing to complete the action and it comes to a graceful stop at the end.

Designing the animation for the dropdowns was challenging. Dropdowns can vary in size based on the number of items in them, whether the items inside have icons or not, if there are multiple select checkboxes, etc... I wanted to create an animation that works for all sizes and dropdowns, but at the same time feel dynamic and never feel broken.
‍
The final result has the content of the dropdown animate at a different speed as the background. This makes the content feel like it is on a separate, contained layer. The background's resizing is as large as it could be without overshooting the content and breaking the illusion that the items are contained inside.

Out of all components, I had the most fun animating the switch. You'll miss the animation if you blink when it is at the regular size, but it was super fun nonetheless.

The expand on hover interaction was added to provide extra space for the page content. There was a lot of care put into the hover animation. You can notice that the text doesn't simply fade in or out. It also moves left and right to add a dynamic feel to the nav bar. Even though the length of the animation is 0.3 seconds, by using 'ease out' it feels a lot snappier and more responsive to the hover.

The existing version of the dashboard provided very little flexibility and was not meeting the user's needs. The goal for redesigning the dashboard module was to create a flexible dashboard that would provide a glanceable and fully customizable experience for users to meet all of their needs.

We knew that we wanted highly customizable widgets on the dashboard based on the existing customers' feedback. The goals for the project were:
- Support as many visualization types as feasible
- Allow users to edit the widgets quickly
- Allow users to resize the widgets (card or full-width)
- Allow users to share the dashboard with others in the organization

After a thorough research of all different visualizations the users would want to have in the widgets on the dashboard I started breaking down the problem and laying it out in a mind-map as you can see below.
The mind-map provided an easy to understand framework for all stakeholders to use during our meetings.

Each widget would have a banner on top containing the widget's name, time range, filters that are applied to it, and an action button.
It soon became clear the widget could be broken down to two categories. The summary widget, and all other ones.
All other widget types had a data visualization as their core and a legend at the bottom.

The user can start editing a widget through the action button.
The main challenge for the edit modal was finding a way to manage all of the different options available for the user and make it intuitive and easy to understand.
We decided to go for a split-view modal with a preview on the right side so the user knows at all times how their choices are effecting the widget.
This would remove any surprises or mistakes, and if the user made changes that they now regret then can click the 'Dismiss Changes' button to revert to what they previously had.

There were a 4 scenarios I needed to accommodate for:
- User would like to create a widget from scratch
- User would like to create a widget from a preset helping them save time
- User would like to make a copy of an existing widgets and change a couple of things about it
- User would like to explore their options and has no intention of creating anything yet

With the primary scenarios defined I created a usability test interview which I first ran by the other designers, then a couple of developers who are not familiar with the project and lastly with a couple of customers through zoom and a shared invision prototype.

After the usability test the 'Preset' function seemed to be a bit confusing since one of the customers and one of the developers were having trouble with it. After a quick design charade exercise with the design team we decided on replacing the preset feature with an extra step during the widget creation process. By asking the user to choose a widget before they continue we would achieve a few things:
- These examples do a good job of highlighting the flexibility and the power of the widgets.
- They make the process seem less intimidating for beginners by providing templates they can start from.
- The ambiguity of what happens to the progress when a user chooses a preset after they made changes in the modal is gone.

The core parts of this project took about 6 months to complete and as the product evolves and new reports are added to it, I continue to work closely with the PMs and the stakeholders to design intuitive report and to integrate them nicely with the existing product.

I worked with the design team to update the existing design system. We tasked ourselves to start supporting dark mode in the DSM. Below are some screenshots of the updated components.