adiós

adiós

Say Farewell to All Ads!

art direction, brand identity design, product design, ux design and marketing array

this great product is the result of working together with talented ux strategist and designer, nimrod mozes. 

say farewell to all ads

Blocking ads is part of the technical set of features that Apple rolled out as part of a proxy/VPN system profile that any user with iOS 7+ can install. This gives any app/service the option to monitor any incoming or outgoing communications that the user consume or share. This opens up a great ability to disrupt that communication, add or subtract attributes and eventually control what comes in and what goes out. The team at adiós had the chance to explore that technology by inventing an advertisement blocking app (this means we cloud block ads on mobile web browsers and inside native apps).

vpn profile installation flow and quota bar introduction

Enable screen designed
Enable screen technical information
VPN Installation phase 2
VPN Installation phase 3
Bandwidth - Gauge intro
Home screen - first time

Silent utility experience

Interfering with the communications of the whole device and making a decision to block a piece of content on each website or app could make some UIs break or dysfunction. At first thought, we understood the importance of making adiós a turnkey experience that just works in the background and does its job as silently as possible. We aimed to an experience that the user won’t even know that there was supposed to be an advertisement where he usually consumed content. In opposition, we had to deliver an indicator that showed the immediate impact of the service that was to make the user understand that we just made his mobile experience a bit better. If ads were getting blocked, we had to take care of the placeholders and make sure the content expands over them, and it didn’t look like there was a loading problem or a UI defect, so more than blocking a certain ad, we had to make sure it didn’t harm the UI/content.

before and after using adiós

Before using adios
While using adios

UI - But does it float?

As part of the MVP approach of the first version, we decided to make the UI as almost nonexistent and to make sure we would have a breeze when rolling out the app into more types of devices and bigger/smaller resolutions. As part of the decision to create as much UI as we could with code, we used a platform that enabled us to translate vector graphics to Objective-C/Swift code for the iOS developer, this affected a lot the weight and load time of the app. That process taught me a lot about how to work ideally with developers on UI components and animations in a way that promises that the outcome will look as it was designed.

home screen and stats screen

Home screen with quota
Stats screen

connected state and pro subscription screen

Home screen - connected with social
Go pro subscription screen

menu and support

Menu

Menu and support animation

stats screen

Stats screen animation

Stats screen - connected with social

Know your bandwidth

As a business requirement we had to think about some model that would have enabled us to create revenue with time. Because the management wasn’t sure what would be the best model to achieve that, I worked on a bandwidth based model with ‘PRO’ subscription and contextual actions that gave the user more ‘air’ if he was out of bandwidth.

Engaging users contextually

We tried to see how we can enhance and bring even more delightfulness to the user experience through suggesting various actions the user could take in order to fuel his bandwidth meter. By asking the user to connect with Facebook, like adiòs on various social platforms and sharing adiòs we gave the user the opportunity to be part of the app’s viral engine, and gain more free usage on top of that.

contextual actions system

Upgrade actions

contextual actions and pro state

Quota warning
Post action message
Action screen
Post action
Go Pro Subscription screen
Pro user UI

Indication through animation

I animated the symbol recognized with the app’s brand to communicate that the application works properly and blocks ads in the background. If any VPN problem occurred, the shape would notify the user through color and animation that he needs to re-install the VPN profile.

Onboarding as a marketing tool

I aimed to explain what the service does with just a simple animation. It turned out that we did need to incorporate a minimal textual explanation to emphasize the great impact adiós has on the mobile consuming experience. In terms of usability, we conducted ‘guerrilla’ field tests with varied personas to ensure the message went through and the basic value of the app was clear to the end user with just a quick animation.

As part of my efforts to make sure the marketing array would look promising and would help to sell the app, although we didn’t have any budget for pyrotechnics, or any marketing at all, I used the onboarding animation as the video that presents the app in the AppStore.

Appstore screens

Brand Assets

I compiled a brand asset sheet that would outline for the developers, the design rules of the brand identity and the app in order to ensure there wouldn’t be any misinterpretations of values or attributes while implementing the application’s design.

Brand Assets
Brand Assets

Collaboration wins the game

Because we were a small team of highly dedicated and talented professionals, our stakeholder decided to let us work in a collaborative working environment, led by the design team. This offered us the opportunity to explore different working methods and processes to achieve simplistic and delightful design and silent and intuitive user experience.

Thanks for viewing

This is a unique website which will require a more modern browser to work!

Please upgrade today!