Wiper

Wiper, The most customizable content blocker

UX Design / Graphic Design

 
 

Wiper is a content blocker designed to block ads for a Korean customer. It was first introduced when Apple released iOS 9. I collaborated with a developer who was going to ass a new feature, so I focused on renovating UI aesthetics and implementing the new feature. In addition, since an ad-blocking feature was new on iOS, many didn't understand ho to enable or use in general. Therefore, I wanted to use this app to educate them on the matter as well.

My Roles:

  • Create a new UI structure for the app.
  • Design how users interact the new feature.
  • Teach them how to enable adblock.
  • Rename the app and branding.
  • Create graphic assets.

The Challenges:

  • Since the ad-blocking feature was new and had to go through several steps to enable, I had to find a way to teach interactors how this function works.
  • Making sure interactors understand how to use the feature "Wizard."  

Brainstorming

Main features:

  • Block List: completely block the website access.
  • Exemption List: enable ads on the website.
  • Wizard: set a custom ad-block rule

Since the features are heavily text based and the original design had these all in one window, I chose to separate these first. the developer was also planning to implement the new feature "Wizard," which allows interactors to access the website, tap the ad area, and set a new rule to remove it. After learning how it would function, I spent some time figuring out the layouts.

 

Outcome

 
Screen Shot 2018-02-15 at 12.25.11 AM.png

1. Landing Page

My primary concern was to educate interactors how to enable an ad-blocker. To solve this problem, when they open the app for the first time, they go through these introduction pages to follow and learn how to do so.

 
 
Screen Shot 2018-02-15 at 12.30.14 AM.png
 

2. Top Navigation Bar

If interactors don't follow the instruction, the app won't function correctly, and I wanted a method to alert them its status. If the ad-block feature or background refresh is disabled, the app's top navigation will expand and show the message with a question icon. When tapped, it will explain interactors why the app isn't functioning properly and guide them to enable each setting.

 
Screen Shot 2018-02-15 at 12.44.04 AM.png

3. Wizard Feature

I didn't want interactors to access the app just to set a custom filter since the app was meant to stay in the background. Therefore, I created an extension feature for Safari so they can tap "Share" and tap "Wizard" to see this screen.

When the area is selected, they can locate the box precisely by using the arrows at the bottom. By using a highlighted color and greying out other area, interactors can focus on the ad area.