The design, development, and publication of tooltip and popover components within the ARC Design System, enabling teams across BT and EE to deliver more consistent, accessible, and efficient digital experiences.
The design, development, and publication of tooltip and popover components within the ARC Design System, enabling teams across BT and EE to deliver more consistent, accessible, and efficient digital experiences.
Timeline: 3 months
Timeline: 3 months
Category: Design system
Category: Design system
Project type: In-house (Full-time)
Project type: In-house (Full-time)
Techstack / Tools: Figma / Token Studio / Jira
Techstack / Tools: Figma / Token Studio / Jira
Year: 2024
Year: 2024
Timeline: 3 months
Category: Design system
Project type: In-house (Full-time)
Techstack / Tools: Figma / Token Studio / Jira
Year: 2024
01. THE OBJECTIVES
Establish standardised tooltip and popover components across BT to ensure consistency.
Ensure components are accessible and consistent across all use cases.
Design components that support both BT and EE branding, including light and dark themes.
Define clear guidance for when tooltips and popovers should be used.
Enable components to adapt dynamically to different screen sizes and viewport boundaries through positioning logic.
Ensure components meet the needs and expectations for product designers.
Ensure accessibility and technical feasibility across both tooltip and popover components.
02. THE OUTCOMES
Built separate scalable tooltip and popover components in Figma using variants and nested components to support different states and placements.
Validated interaction decisions through internal feedback sessions with product designers.
Refined edge cases and interaction logic based on design and development input.
Finalised clear rules, do’s and don’ts, and usage guidelines for implementation.
Produced documentation ready for developer handoff.
01. THE OBJECTIVES
Establish standardised tooltip and popover components across BT to ensure consistency.
Ensure components are accessible and consistent across all use cases.
Design components that support both BT and EE branding, including light and dark themes.
Define clear guidance for when tooltips and popovers should be used.
Enable components to adapt dynamically to different screen sizes and viewport boundaries through positioning logic.
Ensure components meet the needs and expectations for product designers.
Ensure accessibility and technical feasibility across both tooltip and popover components.
02. THE OUTCOMES
Developed an improved information architecture to support clearer navigation.
Translated insights into wireframes to define structure and layout direction.
Developed a refreshed brand identity and designed a new logo.
Created high-fidelity designs and prototypes to validate solutions.
Created a style sheet defining typography, colour and spacing.
Developed responsive layouts and breakpoints to support mobile, tablet, and desktop.
Built the website in Framer, turning designs into a responsive, functional site.
01. THE OBJECTIVES
02. THE OUTCOMES