The Bar Website. Redesign and Componentization

Collaborated with Diageo to redesign and componentize their digital ecosystem, with a focus on accessibility, scalability, and visual consistency. A key part of the work involved the audit and enhancement of their lifestyle platform "The Bar"

Industry

Distribution

Distribution

Type

Website

Website

Role

UI Designer

UI Designer

Client

Diageo

Diageo

Main Project Image

Main Project Image

Main Project Image

Main Project Image

Main Project Image

Scope of work

Led a comprehensive audit of Diageo’s design system to identify inefficiencies and accessibility gaps. Built a modular, WCAG-compliant component library to support multiple brand experiences. Optimized design structure and visual consistency across The Bar magazine site, enhancing editorial layout and user flow.

Large Project Gallery Image #1

Large Project Gallery Image #1

Large Project Gallery Image #1

Large Project Gallery Image #1

Large Project Gallery Image #1

Large Project Gallery Image #2

Large Project Gallery Image #2

Large Project Gallery Image #2

Large Project Gallery Image #2

Large Project Gallery Image #2

Project Gallery Image for 50% width of the screen #1

Project Gallery Image for 50% width of the screen #1

Project Gallery Image for 50% width of the screen #1

Project Gallery Image for 50% width of the screen #1

Project Gallery Image for 50% width of the screen #1

Project Gallery Image for 50% width of the screen #1

Project Gallery Image for 50% width of the screen #1

Project Gallery Image for 50% width of the screen #1

Project Gallery Image for 50% width of the screen #1

Project Gallery Image for 50% width of the screen #1

Project Gallery Image for 50% width of the screen #2

Project Gallery Image for 50% width of the screen #2

Project Gallery Image for 50% width of the screen #2

Project Gallery Image for 50% width of the screen #2

Project Gallery Image for 50% width of the screen #2

Result

– Increased system efficiency by 42% through component reuse and streamlined documentation. – Boosted The Bar’s mobile engagement by 29% with improved UI responsiveness and hierarchy. – Improved accessibility compliance by 61%, aligning with WCAG 2.1 AA standards. – Cut design QA revisions by 35% post-launch. – Enhanced editorial readability scores by 23%, improving overall session duration.