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:

  • Empathise: Deeply understood user needs and pain points.

  • Define: Clearly articulated challenges to address.

  • Ideate: Conceptualized solutions to optimize user flow.

  • Prototype: Built models to visualize ideas.

  • Test: Iteratively tested and refined interactions.

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.

EIR telecommunications onboarding user interface design showing mobile app screens with improved user experience flow and intuitive navigation

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.

EIR mobile app interface design featuring custom illustrations that enhance brand identity and create visual cohesion across the user experience

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.

Addressing Legacy System Challenges

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.

Optimized User Flow

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.

Notification Center

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

Bottom Navigation

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.

Bottom Navigation

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:

  • 1. Validate Number: In this initial step, users will validate their mobile numbers, ensuring that they are eligible for the portability process. This step is designed to verify the user's current phone number's status.

  • 2. Input Account Info: The second step involves users providing essential account information. This input is crucial for a smooth transition and ensures that their new account will be seamlessly integrated with our services

  • 3. Schedule Move: The final step empowers users to schedule the actual number move. This step allows users to pick a suitable date and time for the transition, providing them with the flexibility and convenience they deserve.

Onboarding example

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.

Unlocking User-Centric Brilliance: A Design System Journey with Material UI

In the ever-evolving landscape of UX design, we embarked on a transformative journey to create a Design System that would not only streamline our design processes but also elevate our user experience to new heights. Our destination? An interface that resonates with finesse, a harmonious marriage of beauty and functionality.

With a commitment to user-centric design, we recognized the paramount importance of a stellar Design System. It's the North Star guiding our design endeavors, ensuring consistency, efficiency, and, most importantly, a design that truly speaks to our users.

Our journey is fueled by Material UI, a versatile and dynamic UI framework, harmoniously bridging the worlds of Figma and React on the front-end. This dynamic synergy offers the best of both worlds: the pixel-perfect precision of Figma's design tools and the fluid responsiveness of React's front-end capabilities. This union translates into seamless transitions from design to implementation, allowing us to craft a user interface that oozes fidelity and agility.

The power of Material UI lies in its adaptability and scalability. It empowers us to infuse our designs with the life and vibrancy our users deserve. The reusable components and design patterns within Material UI ensure that our interface is not just beautiful but also highly functional and responsive.

In this case study snippet, we unravel the profound impact of our Design System journey, offering a glimpse into the mechanics that power our interface's elegance and efficiency. Our commitment to user-centric brilliance is at the heart of every pixel, every component, and every interaction.

Onboarding example

Join us as we journey through the world of Design Systems, where creativity meets structure, and where user-centricity reigns supreme. Our voyage is a testament to our unwavering dedication to creating an exceptional user experience, one pixel at a time.

Reach Out

How Can I Help?

© Welinton Fernandes – UX Designer. All rights reserved.
📱 +353 89 985 6728 | 🌍 Crafted with purpose and creativity by Welinton Fernandes