Customer Portal

This case study explores the strategic objectives, implementation process, key features in a user-first customer portal.

Summary

This case study relooks at the consumer-facing portal of the advisory business. The aim is to empower the customers to be able to efficiently manage their own insurance policies, effectively make claims, and keep track of all their information all in one place.

I oversaw and collaborated on this project for about 6 months, before handing it over after an MVP release.


Tools

Figma

Team Structure

UX Designers, Product Owners, UX Writers

Tools

Figma, Jira

Problem Statement

The existing portal provides very static information and faces a significant challenge in giving customers a holistic understanding of their insurance coverage.

As a result, customers are poorly informed about how they can improve their insurance coverage on their own, leading to an increase in service inquiries and missed opportunities for cross-selling. Therefore, we need to deliver a unified and intuitive platform that empowers customers with full and complete visibility into their insurance portfolios and enables them to optimize their coverage with on-demand support.

Solutioning Process

To solution for the launch of the MVP of this portal, we audited the current Information Architecture (IA). This involved a thorough review of the current content organization, user flows, and navigation structures to identify pain points and areas for improvement.

Steps we took:

1. Conducting a Heuristic Evaluation: We performed a heuristic evaluation to uncover usability issues and inconsistencies within the existing system. This helped us understand how users interacted with the platform and where they faced difficulties.

2. User Research and Personas: We used existing CX studies to gather some personas and insights. This was to ensure our design solutions were user-centric and addressed real needs.

3. Defining User Journeys: We mapped out user journeys to highlight critical touchpoints and identifying potential pain points in their experience. This helped us visualize the user's path through the system and informed our redesign strategy.

4. Creating high-fi screens from existing templates defined by our established Design System: With a clear understanding of the issues and user needs, we began to restructure and develop screens through some of the templates that we had defined from our Design Systems through other launched projects.

Customer Journey Mapping and IA recalibration

Based on existing business requirements and user stories, we set out to define, on a high level the customer journey maps for each planned release and feature.

We then came up with a high-level IA that we envisioned for the portal revamp, taking into consideration:

  • User Needs: Ensuring easy access to frequently used features for all user types.

  • Business Goals: Aligning the structure with key business objectives such as increased engagement and retention.

  • Scalability: Designing an architecture that could accommodate future features and content without significant rework.

Real Designs

Comprehensive Overview of Coverage: We aimed to provide consumers with a holistic view of each coverage area, allowing them to quickly identify any gaps at a glance and see how their current coverage fits in.

Detailed Policy Information: Additionally, we included a separate tab that provides a complete list of the client's existing coverage, offering an in-depth view of their current policies.

Each coverage type will have its own dedicated listing to showcase all relevant policies associated with it.

Using the Dashboard as a Focal Point for Organizing the Portal

The initial version of the portal lacked a comprehensive dashboard, resulting in scattered information across various sections. Recognizing the importance of a centralized dashboard, we created one with a holistic overview in mind. This dashboard was crucial for the project's success as it offered several key benefits:

  • Quick visualisation: Simplifies complex policy information into easy-to-understand visuals.

  • Real-time updates: Provides up-to-date information at a glance.

  • Identification of Patterns: Helps users detect goals and opportunity gaps.

After numerous iterations, the design began to take shape, evolving into a cohesive and user-friendly dashboard that effectively centralized the portal’s information and functionalities.

Mobile Responsive

Our designs had to accommodate mobile devices, considering that a majority of our customers are accustomed to accessing information through their mobile devices, thanks to our existing native app.

Between responsive and adaptive design, we opted for a more customized view on mobile to enhance the user experience.

As per UXcel,

Responsive design is generally considered more efficient and cost-effective, utilizing a single codebase and offering easy maintenance. Conversely, adaptive design may provide superior performance and user experience by tailoring layouts and interactions to specific device and screen sizes. The choice between the two approaches depends on the project's specific goals and the primary devices it will be accessed on.

Learnings and Achievements

With our foundation set, we could easily continue to plan for delivery with the requirements we had. Of course, this journey wasn’t without hurdles. There were many lessons learnt through working on this project.

Learnings

  • Managing Business Stakeholder Requirements: Balancing business stakeholder requirements with a user-first mindset taught us the importance of finding a harmonious balance between business goals and user needs.

  • Understanding Interaction in Design: Recognizing the significance of interaction design enhanced our ability to create intuitive and engaging user experiences. I realised the impact small interactions could make on helping to make the design engaging and reflective of its function.

  • Utilizing Design Systems: Leveraging a design system proved instrumental in maintaining consistency across the design, streamlining our workflow, and ensuring a cohesive user experience. This project also helped us to tighten up the requirements of our internal Design System. We also had to work to deliver this Design System with the engineering team to help develop their own coding storybook.

  • Prioritizing Information: Learning how to prioritize information based on its importance and hierarchy enabled us to create designs that effectively guided users to the most relevant content.

  • Enhancing User Efficiency: Focusing on reducing friction and making tasks easier for users enhanced overall user efficiency and satisfaction.

  • Adapting Design Processes: Each project presented unique challenges, prompting us to adapt our design processes and methodologies to find optimal solutions.

  • Confidence in Problem Solving: Gaining confidence in approaching problems with logical reasoning empowered us to tackle challenges with clarity and efficacy.

Challenges

  • Iterative Design Process: The need for numerous iterations for each screen to arrive at the best solution required meticulous attention to detail and patience.

  • Technical Limitations: Dealing with technical constraints or limitations within the platform's infrastructure could have posed challenges in implementing certain design features or functionalities.

  • Cross-Functional Collaboration: Ensuring effective communication and collaboration between different teams, such as design, development, and marketing, to align on priorities and expectations could have presented hurdles.

  • Timeline Pressures: Meeting tight deadlines and managing project timelines amidst evolving requirements and scope changes might have added pressure to the team.

  • Accessibility Compliance: Ensuring the design meets accessibility standards and guidelines, such as WCAG (Web Content Accessibility Guidelines), to accommodate users with disabilities, could have posed challenges in design implementation.