Eir Project Evolution with a Focus on User Experience

Design Process

With the five-phase Design Thinking framework from Stanford’s Hasso Plattner
Institute as a foundation, I refined each step of the user journey:

Revolutionizing Eir’s Onboarding Experience

Onboarding is not just an introduction; it’s a transformative user journey that establishes trust, empowerment, and engagement. For Eir, this was redefined as a high value entry point where users are warmly welcomed, informed, and supported. Each interaction, whether for financial services, account settings, or billing is designed to be intuitive and impactful, setting the stage for an empowering, user-centric experience.

Illustrations to Bridge Gaps
In underutilised areas, I incorporated targeted illustrations, creating a cohesive aesthetic and visual flow across the interface. This not only enhanced usability but also conveyed the brand’s identity in a consistent and engaging way.

Addressing Legacy System Challenges

Navigating legacy systems required meticulous planning to ensure smooth transitions, secure data handling, and uninterrupted user access. Our solution was a robust yet flexible registration flow offering users the choice of email or mobile registration, providing enhanced accessibility and user freedom.

Optimized User Flow

Developing the user flow map allowed me to identify potential friction points, such as dead ends and redundant loops, ensuring a seamless journey. Post-launch, continuous monitoring and testing allowed for ongoing optimization to keep the user experience relevant and engaging.

Notification Center: Empowering User Control

The Notification Center within Eir’s platform was designed to enhance user control with streamlined options. By introducing selective notification views (“All,” “Unread,” “Unseen”) and simplifying actions like “Mark all as read,” the Notification Center became a central point for easy navigation and timely engagement.

Simplified portability flow

To enhance the user experience during number portability, I designed a streamlined, three-step process focusing on validation, essential information input, and scheduling. Each step is intuitive, secure, and user-friendly, allowing users to transition seamlessly while addressing the demands of data security and system integrity.

Workshop: Card Sorting

To enhance the navigation experience, a workshop was conducted utilizing the Card Sorting technique. In this workshop, a set of cards representing various features of our SaaS platform was prepared. The workshop brought together cross-functional teams, including members from marketing, design, and development, to collaboratively organize these cards into logical groups or categories that made sense to them.

Participants were encouraged to arrange the cards into groups based on the logic they deemed most suitable. This process was instrumental in shaping the navigation structure of the application. Throughout the workshop, lively discussions were encouraged among the participants. They were asked to articulate the rationale behind their card groupings, and valuable insights were recorded. Subsequently, an in-depth analysis of the collected data was conducted to identify emerging patterns and trends. This analysis will serve as a foundation for informing the design of the application’s navigation.

Bottom Navigation

Based on these insights from our Card Sorting workshop, we arrived at a refined site map that includes key navigation elements: ‘Bill,’ ‘Services,’ ‘Home,’ ‘Offers,’ and ‘Help.’ These choices represent the collective wisdom of our cross-functional teams, including members from marketing, design, and development, who collaboratively organized these elements into logical groups that resonated with our user-centric approach

The workshop discussions were lively, as we deliberated over each element’s placement within the UI. Participants voiced their thoughts on the best positioning, with phrases like ‘Services should be easy to find, that’s what our customers need!’ emphasizing the user-centric perspective. ‘Bill on the menu is very important to our clients’ further validated the decision.

The debate continued with considerations about ‘Home,’ the heart of the app, and ‘Help,’ the ever-reliable guiding hand for users. ‘Offers’ presented an exciting opportunity, with our team pondering the ideal spot to showcase these promotions. ‘Think about what you’d click first; it’s Bill for me!’ captured the essence of our thoughtful deliberations.

‘Services – where do you expect to see it? Share your thoughts’ spurred valuable insights, while ‘Bill or Home? Let’s decide which comes first!’ reflected our commitment to a user-focused experience. ‘Help is essential; where’s its home in the menu?’ summed up the importance of accessible support.

At Eir, as a leading telecom and broadband provider, data security for our customers is a paramount concern. Given the ever-evolving technological landscape, I embarked on a challenge: to condense the user journey for number portability into just three essential steps. This streamlined process ensures a seamless and secure transition for our users.

As part of this effort, we’re introducing a new feature called ‘Register.’ This feature is designed to segregate users with distinct databases, addressing certain temporary limitations intelligently.

In the context of the ‘Register’ feature, we’ll present a series of mockups showcasing three crucial steps to facilitate the portability process for our users:

These mockups and steps underscore our commitment to delivering a secure, user-friendly experience while overcoming temporary challenges. They represent our dedication to providing top-notch services to our valued customers.

Building a Scalable Design System with Material UI from Tokens to Production

At Eir, I led the creation of a comprehensive design system from scratch, using Material UI as the foundational framework. My goal was not just to create a library of pretty components, but to establish a single source of truth that would bridge the gap between design and engineering, ensuring consistency, scalability, and long-term maintainability across the platform serving millions of users.

Key Outcomes & Technical Approach:

• Token-Based Architecture: I implemented a rigorous token system (design tokens) for colours, typography, spacing, and breakpoints. This meant that design decisions were not just visual specifications but lived as reusable, coded variables that could be updated globally. A great example of this system’s resilience came years later when the brand updated its primary colour palette the engineering team simply changed the token values, and the entire interface reflected the new identity without a single line of UI code being rewritten.
• Atomic Design Principles: I structured the component library following atomic design methodology, breaking down the UI into atoms (buttons, inputs), molecules (search bars, form fields), organisms (headers, footers), and templates. This created a clear hierarchy and made the system intuitive for both designers and developers to understand and extend.
• Figma-to-Code Workflow: By tightly coupling the Figma component library with the React implementation in Material UI, I established a seamless handoff process. Components in Figma were named and organized identically to their code counterparts, and I created detailed documentation for each component’s states, props, and usage guidelines. This reduced design/development friction by an estimated 40%.
• Accessibility Built-In: Accessibility was not an afterthought it was baked into every component from the start. I ensured that all components met WCAG 2.1 AA standards for colour contrast, keyboard navigation, and screen reader compatibility. The design system became the enforcement mechanism for accessibility, ensuring that any new feature built with these components would be inherently more accessible.
• Governance & Evolution: I established a lightweight governance model, including regular design system reviews and a clear contribution process for new components. This ensured the system could evolve with the product without becoming chaotic. The fact that the same design system is still actively used today (with only token-level updates) is a testament to its foundational strength.

This design system wasn’t just about visual consistency; it was a strategic investment in Eir’s product development velocity. It empowered multiple cross-functional teams to ship features faster, with higher quality, and with a unified user experience. The system’s token-based architecture also made it “future-ready” perfectly positioned to support emerging technologies like AI-driven personalization, where dynamic theming and component variations can be controlled at the token level.