The product
AdScan is a one-stop-shop for performance marketers to find inspiration for their ad creatives. It allows users to easily find, collect and share creatives and get insights on ads and advertisers from across the web.
The project
This project was undertaken after the launch of a minimum viable product. The scope of the project was to build on the MVP and provide a complete redesign of the platform for the beta version of the product.
The problem
The main focus was improving time on site by providing a seamless way for users to navigate between pages and creating a visually pleasing interface that encourages them to explore the platform further.
My role
I worked with the development team as the sole UX/UI designer on the project.
Defining the problem
Discussing the project with the company founders, the main business objective that arose was encouraging users to spend more time on the platform to get them to become premium membership subscribers.
A particular focus user behaviour was browsing through multiple ad creatives and going on a "fact-finding" mission to find inspiration from successful advertising creatives. The founders likened this to Pinterest for ad creatives but with data.
The core design objective then became making the platform easier and more pleasant to navigate so that users will be encouraged to browse more creatives and dive into performance insights.
Building on the MVP
The MVP had the basic functionality of allowing users to save ads while browsing online through a Chrome extension and see performance data for ads. The priority features for the beta that were outlined based on competitive analysis and feedback from early users of the MVP were:
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
These three features were also the foundation of user tasks that would be the focus of later design stages.
Revamping the site structure
One of the limitations of the MVP was the lack of formal site organisation. It had most of the necessary pages to give users the information they need (a preliminary version of the dashboard, ad page, and advertiser page), but they were organised in a way that wasn't easy to follow and navigating between them was laborious. For example, the users could not navigate from the ad page to the advertiser page without leaving the dashboard and going to the homepage. This resulted in an unintuitive and unnecessarily difficult navigation experience.
The first step was then to create a sitemap to formalise the platform structure.
Sitemap
The focus of this project was on the dashboard section of the site, which would host all the functional aspects of the platform.
Creating a seamless navigation experience
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 highly interlinked, 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 pages and switching tasks as fluid as possible.
User flow of completing tasks on the platform
Wireframes illustrating navigation between pages. Green ticks signify where clicking will complete a task
Following this design, users could move between any of the pages with just one click. In terms of completing tasks, they could go from looking at ad insights to saving the ad in their collection to seeing a recommended ad and repeating the process with one click each. The dashboard would serve as the central point for all navigation.
The prominent navigation points between ad pages and advertiser pages specifically also encourages users to explore the platform further by making it easy to browse related ads and recommended advertisers.
Iterations and development team feedback
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).
Design iterations from low-fidelity to finalised visual interface
Making the design responsive
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.
Visual design
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.
Old and new dashboard
Old and new ad page
Old and new advertiser page
The problem with horizontal and vertical videos
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.
Final screens
Learnings and next steps
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 could not be 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, and furthermore, 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.
Thanks for reading!