.png)
AdScan is a one-stop-shop for digital marketers to find inspiration for their digital advertising creatives. It allows users to easily browse, share, and find performance data on online ads from across the the most popular digital marketing platforms like Meta, Instagram, TikTok, Google, and more.
This project was undertaken after the launch of a minimum viable product. The scope was the complete redesign of the platform for the beta version.
I worked on the project as the UX/UI designer with the development team.
The main business objective was to improve user retention and encourage users to get a paid subscription.
The design focus was to create an appealing new user interface and improve usability by providing a fluid browsing and navigation experience.
I carried out a competitive analysis and reviewed feedback from early users of the MVP to determine what were the most important features and user needs to focus on. These were summarised in three main tasks:
1. Searching and browsing for ad creatives on the AdScan platform
2. Creating collections and organising saved ads
3. Insight on ads, advertiser performance and advertising platform trends
One of the limitations of the MVP was the lack of formal site structure. The pages were not ordered in a hierarchy, and the result was an unintuitive and difficult navigation experience. I created a sitemap to rectify this.
.png)
The focus of this project was on the dashboard section of the site that hosts all the functional aspects of the platform.
I created a user flow diagram and wireframes to outline the pathways users might take in completing a task. The four user tasks that were focused on were:
1. Searching for or browsing ad creatives
2. Saving ad creatives in a collection
3. Sharing the link to an ad creative
4. Getting insight on an ad creative's performance
These tasks are related and overlapping, so specific consideration was given to how users might move between them as they navigate the platform.The below analysis ensured that there were sufficient navigation points between pages to make moving between them and switching tasks as easy as possible.
This one-click design allowed users to move between any of the pages with a single click. The dashboard would serve as the central point for all navigation.
The prominent navigation points between ad pages and advertiser pages specifically encourages users to explore the platform further by making it easy to browse related ads and recommended advertisers.
The designs were presented to the development team at various stages of iteration to ensure they were technologically feasible.
Among the things that was deemed untenable was having both side and top navigation bars on the dashboard. This necessitated that all navigation icons to be moved to the side bar in the final iteration (demonstrated below in the difference between high-fidelity and final screen).
.png)
The platform is mostly desktop focused, but the designs were produced with a mobile-first approach to ensure a consistent and optimised responsive experience. This was particularly important for the ad page because it was hypothesised that a common entry point to AdScan would be users sharing creatives with colleagues via shared links to ad pages on mobile devices.
The new user interface used the MVP as a foundation, but there was a major visual redesign across the platform, as shown below. This included rebuilding the layout from the ground up and refining spacing, UI elements, icons, typography, colours and more.
A notable change was overlaying the ad page and advertiser pages on top of the dashboard instead of taking the user to a new page. This was done to reinforce the sense of seamless browsing and having the dashboard as the anchor point for all navigation.
AdScan hosts both vertical and horizontal ad creatives, which presented a considerable challenge for designing the visual interface. The main problem was that designing pages for horizontal videos would inevitable make vertical videos look awkward, especially on tablets and desktops, and vice versa.
It was hypothesised that the majority of the ad creatives would be vertical since only one of the advertising platforms, YouTube, used the horizontal format extensively. I therefore opted for a mostly format-agnostic crop where possible, such as on the “Related ads” section. These rectangular crops are slightly vertical to optimise for the more popular vertical ads but not to the exclusion of horizontal ads.
The ad page was an exception where there was no visual design compromise which would have served both ad formats. The solution was to design different layouts to accommodate for this difference while maintaining as much consistency between them as possible.
The below screens illustrate the finalised designs. You can also access a clickable Figma prototype of the desktop version via the below link.Clickable prototype
The designs are currently awaiting implementation from the development team. The scope of the project was a complete redesign of the platform delivered in four months with limited resources, so there are many aspect of the platform that were not developed to the fullest extent.
For example, analysing the flow of users from browsing ad creatives on the dashboard, going between the dashboard to the ad page, and navigating from one ad page to another, would in itself be an interesting design project that will hopefully be carried out at a later time.
This project did not have the resource for extensive user testing, so a particular point of interest after launch would be measuring how long users spend on the platform with the new design compared to the MVP. Furthermore, it would be interesting to investigate how this impacted the rate of people who subscribing to the paid membership.
Similarly, it would also be interesting to measure which page (ad page, advertiser page) users spend most time on. This would inform which pages users find most valuable and which should be the primary focus of future design improvements. Analysing the user pathways through different pages and how many of pages users go through in a single session, for example, would also inform how the user flow can be further improved.
Furthermore, feedback on whether users will find the vertical and horizontal ad page designs intuitive would inform whether this design decision was correct, or whether it would be better to opt for a uniform design instead.