Tab for a Cause Redesign

UX Analysis, UI-redesign, IA

Analysis of the existing UI:

I did a UX analysis for 'Tab for a Cause', a browser extension I use everyday. I noticed few areas of improvements.

Tab for a Cause image

  • The search widget is not noticeable. I never used it until I did this UX analysis. My rationale is that it's because most users are used to with having a bigger search bar and it is usually much more noticeable. In addition, users cannot customize the search provider, which is very cruical.
  • Information on how much 'Tabbers' have raised is currently placed towards the right bottom corner. It is somewhat visually unpleasing. From my point of view, users only look at this number with 'System 1' ('the intuitive automatic part of our brain'; reference: Thinking Fast and Slow), and does not really actively process the information. It's a good information to know, but it could be placed somewhere else to make the screen less busy.
  • The bottom bar has lot of textual information, which can be further simplified
  • The advertisements could be placed more strategically in order to grab more attention without being annoying.
  • Lastly, it can have more impact by highlighting charity to inspire direct donation in addition to donating 'hearts'.

Proposed design:

Please note that the following images only intended to be 'mock-ups' rather than showing complete 'visual design'

Tab for a Cause image

Home Screen Design 1:

Bottom Bar:

Much more simplified version of the current home screen. The bottom bar has been significantly simplified, but it still offers almost all the features of the existing bottom-bar: level (bottom-left, the triangle's fill color height could be used to visualize the points required to reach the next level), invite friends, and donate hearts (on the right).

Tab for a Cause image

Center items:

Design of the center items are somewhat inspired by Google Chrome's default home page. It will show recently visited websites in the first four boxes as thumbnails. The advertisements are strategically placed in the next two thumbnails, which is sure to grab more user attention (more fundraising!) being less annoying.

Tab for a Cause image


The search bar is placed on center with more dedicated space. This will inspire users to use it more often than the existing design.In addition, users must be given the choice to customize the providers but also, a highlight should be given to 'Ecosia' (which I equally admire for its great impact on forestation)

Tab for a Cause image

Sliding menu:

The redesigned sliding menu includes 'tabbed' notifications, groups, and options. Rather than having three buttons on the main screen, these options can be easily grouped inside one sliding menu as embedded 'tabs'

Tab for a Cause image

To-do list:

One of the feature I suggest adding in this tab is a simple 'To do' list. There are several popular browser extensions just for that which implies that this feature will be useful.

Tab for a Cause image

Home Screen Design 2:

Showcasing Charities/Causes:

'Tab for a Cause' can easily have more impact by inspiring users to learn about charities and make direct donations for different causes (This could be done through partnership with charities, or even better, charities might be interested in sponsorship). However, this should be kept minimal to avoid distraction/annoyance.

Tab for a Cause image

Home Screen Design 3:

Sliding Views:

In addition to allowing widgets in the home screen (it can the screen very busy and noisy), Tab for a Cause can have sliding screens where users can add more widgets.

Tab for a Cause image

Tab for a Cause image