Waters Tab Component

My Role

UX Design

Project Overview

While performing a UX review on an Applications page, I noticed an issue with the Tab component. If there was more than one tab in the component, the styling of the tab header was displaying correctly. However, when there was only one tab, the styling was not display right. My goal was to work with the dev team to fix this bug.

Process

I replicated the issue in the Stage environment, created a mockup of what the Tab component header should look like if there’s only one item, and worked with the dev team to implement the bug fix.


Before - Incorrect Styling

Single tab component displaying incorrectly

After - Incorrect Styling

Single tab component displaying correctly