Coil Browser Extension

This extension enabled Web Monetization in web browsers. It checked if a website was “web monetized”, stream payments to the website and unlocked exclusive content for Coil members.
In version 2.0 we added a highly requested tipping feature. To test this feature I reworked the extension and gave it a facelift.

Contribution

UX/UI Design
Illustrations and animations
Working with engineers to implement extension

Visualizing the experience

To better visualize what the user would experience I created an animated mockup of the tipping flow.

Visualizing the experience

To better visualize what the user would experience I created an animated mockup of the tipping flow.

Reworking the navigation

To incorporate tipping, the extension needed a better navigation pattern. The status bar, which displayed redundant information, was replaced with a bottom navigation. This allowed users to navigate directly to each feature without having to click into a dropdown menu.

Reworking the navigation

UI delight

I created some animations that brought the website's illustrations into the extension. This reinforced the Coil branding and made the UI a bit more delightful.

UI delight

I created some animations that brought the website's illustrations into the extension. This reinforced the Coil branding and made the UI a bit more delightful.

Web Monetization on

Web Monetization off

Mockups and tipping flow

These are some of the final mockups, along with the tipping flow showcasing the new design

Mockups and tipping flow

These are some of the final mockups, along with the tipping flow showcasing the new design

Stream payments tab

with Web Monetization status and optional prompts to Coil membership

Tip tab

with quick tip buttons and available tip credits

Settings tab

with account info and links to manage account, discover and about

Handoff and launch

With the aid of the mockups and the animation prototype the front-end developer created an interactive prototype for user testing, which let us evaluate the tipping UI and refining the interface by ironing out minor issues.

The tipping feature was rolled out as a closed beta.

Handoff and launch

Contact — fabian@fruehle.com

Dribbble

Contact

Dribbble