AdHawk Case Study Hero Image

AdHawk

Designing applications for simplifying SMB digital advertising

The Project

Role
Principal Designer
Tasks
  1. Mobile Application
  2. Web Application
  3. Brand Guidelines
Timeline
2017 - 2019
Engagement
Full-Time

The Company

Overview

Founded by two former Google Ads ("Google AdWords" at the time) employees in 2015, AdHawk is an adtech startup aimed at simplifying digital advertising. Specializing in Google and Facebook Ads, they create software solutions to help small and medium-sized businesses optimize ad campaigns.

Size

100+ Employees

Industry

Advertising, SaaS

Type

B2B

Mobile Application

The first task was re-designing the AdHawk iOS App. The previous app had most of the functionality desired by users, but fell short in several areas. It was visually rather flat, with an inconsistent visual hierarchy. Elements of the app were too small for touch screen interactions, resulting users having to go back or cancel out of options they didn't want to select. Additionally, it lacked a true sense of the AdHawk branding. Finally, the components created for the app were not very modular, which made designing and implementing additional features especially challenging.

AdHawk iOS Empty State Screen
Previous AdHawk iOS UI

I began the re-design where the users begin their experience - the signup/login screen. The goal was to have these screens be as welcoming and informative as possible, while also setting the tone for the AdHawk brand with which users would interact during their time in the app. We ensured that contrast ratios were accessible and that touch targets were large enough to prevent accidental taps. I contextualized the login progress by turning the "Log In" button to "Logging In", along with a loading animation to inform users.

AdHawk iOS Empty State Screen AdHawk iOS Empty State Screen
AdHawk iOS Empty State Screen AdHawk iOS Empty State Screen

Onboarding

After users sign up and/or log in for the first time, they need to complete additional steps to get the most out of their experience. As such, the initial view provides a visual empty state that informs them they should connect their ad accounts. I guided users' decisions by offering only two items in the tab bar during initial setup. This way, they can see settings, along with the home screen, but cannot take additional actions as the app only functions when at least one ad account has been connected.

AdHawk iOS Empty State Screen AdHawk iOS Empty State Screen

Features

The core goal of the AdHawk iOS app is to empower users to easily manage their ad accounts, easily viewing insights into how they can improve their ad campaigns. By re-designing the components themselves to be modular, I was able to accomplish this goal in a way that is scalable. The re-designed application features a component library that can be added to in future versions, without comprising AdHawk's mission statement: "Simplifying digital advertising".

AdHawk iOS Empty State Screen AdHawk iOS Empty State Screen
AdHawk iOS Empty State Screen AdHawk iOS Empty State Screen
AdHawk iOS Empty State Screen AdHawk iOS Empty State Screen
AdHawk iOS Empty State Screen AdHawk iOS Empty State Screen
AdHawk iOS Empty State Screen AdHawk iOS Empty State Screen

Settings

An often neglected section of application design, the settings/preferences area is an important one to cover, as it can be a last resort for users seeking to adjust specific app elements. If a user is getting into this section of the application, it can be presumed that they wish to customize the app experience in some regard, and so it's critical to lay out the sub-categories in an intuitive way.

AdHawk iOS Empty State Screen AdHawk iOS Empty State Screen
AdHawk iOS Empty State Screen AdHawk iOS Empty State Screen
AdHawk iOS Empty State Screen AdHawk iOS Empty State Screen

Launch & Reception

After working with the iOS developers through numerous rounds of design reviews and app testing, the redesigned app launched in the Apple App Store. While AdHawk's user base is not huge, the reception has certainly been positive. Since the re-designed app was launched, it maintained a 4.7 Star rating from users.

In the years since I redesigned the application, AdHawk has pivoted, and the app is no longer available in the app store.

4.7 out of 5 Rating in App Store
4.7 out of 5 Rating in App Store
App Store Marketing Images
App Store Marketing Images

Further Exploration

Following the launch of the redesign, I continued exploring refining the UI/UX in preparation for other future versions of the app. While ultimately not implemented, with the pivot of the company into FlooringStores, it was still an interesting exploration into how an information-dense interface can be presented simply.

Further iOS UI Exploration Further iOS UI Exploration
AdHealth Concept
AdHealth Concept

Web Application

Introduction

Following the redesign of the iOS mobile application, I was tasked with improving the web application. There were several areas of the web application, but the first project I'd have was around creating a new feature - Campaign Creation.

Previously, AdHawk's web application worked like this: users would have a Google Ads and/or Facebook Ads account, where they would set up and run campaigns, and then track these campaigns with AdHawk - where they'd receive tips to help them optimize these campaigns. The idea, now, was to bring this campaign creation segment of Google Ads (with Facebook Ads support being added, if the feature was sucessful) into the AdHawk application, so that users wouldn't have to leave the application to complete tasks associated with these ad campaigns.

Campaign Creation Overview Tables
Campaign Creation Overview Tables
Campaign Creation - General Details
Campaign Creation - General Details
Campaign Creation - Ad Targeting
Campaign Creation - Ad Targeting
Campaign Creation - Ad Groups
Campaign Creation - Ad Groups

Process

As you can imagine, there are a number of options when creating an ad campaign in Google Ads. AdHawk's value proposition, however, is to "simplify digital advertising". So, when creating a campaign in AdHawk, it needed to be simple, pain-free, and quick. This meant auto-selecting certain options for users behind the scenes, and only surfacing information that would directly change the outcome of their ad campaign. By displaying tips on the right side of the UI, I made sure that a user typically didn't have to leave these pages to find more information, keeping the experience focused and informative.

Campaign Creation - Ad Groups (Remarketing Selections)
Campaign Creation - Ad Groups (Remarketing Selections)
Campaign Creation - Ad Details (No Images Uploaded)
Campaign Creation - Ad Details (No Images Uploaded)
Campaign Creation - Ad Details (Image Upload Modal)
Campaign Creation - Ad Details (Image Upload Modal)
Campaign Creation - Ad Details (Images Uploaded)
Campaign Creation - Ad Details (Images Uploaded)
Campaign Creation - Ads (Image Preview)
Campaign Creation - Ads (Image Preview)
Campaign Creation - Post Completion Goals Survey
Campaign Creation - Post Completion Goals Survey

Conclusion

While the feature itself was well-built and received by our internal account managers very well, users didn't utilize the feature as much as the team had hoped. This was an example of a decent idea, but one that was not properly de-scoped. I spent months with the developers working out the various sub-sections and pages of the Campaign Creation feature, only to then have technical debt take away attention from the experience, and get shifted to other projects.

While the feature was not ultimately as successful as myself and the team had hoped, it was a valuable lesson in keeping feature size small, testing often, and ensuring that what you're working on is what the customers actually want - not just what we think they'll want.

Brand Guidelines

When I joined AdHawk in September 2017, the branding was fairly simple. The logo and wordmark weren't always used consistently, and there was a bit of brand debt that had built up in the roughly two years since the company's inception. As such, I set out to create brand guidelines to make sure that all uses of the brand elements would be consisten across materials - whether in applications, marketing, and/or print materials.

AdHawk Brand Guidelines Title Slide
AdHawk Brand Guidelines - Colors
AdHawk Brand Guidelines - Social Media Colors
AdHawk Brand Guidelines - Gradients
AdHawk Brand Guidelines - Typography
AdHawk Brand Guidelines - Logo
AdHawk Brand Guidelines - Logo Placement

Like what I did for AdHawk?

Get in touch and let's
discuss working together.