Personalized & Integrated
Favourites + Forms | Suncentral | Sun Life Financial
ROLE
Lead UX & Sole Designer.
TIMELINE
4 Months.
USERS
Advisors, Assistants and Back Office Users.
CHALLENGE
Disconnected tools and data across multiple systems.
IMPACT
A personalized, integrated experience that adapts to every users.
TEAM
Product Manager, Engineering Team, UX Designer (me).
First, let me tell you about "Personalized & Integrated"
Integration connecting two previously separate tools into a single, cohesive interaction model. By building on the standalone "Forms" and "Favourites" (Personalized Shortcuts) experiences, it creates a more seamless way for users to access and manage their most frequently used resources in one place.
Overview
As Suncentral evolved, two successful but independent capabilities emerged: Forms and Favourites. I identified an opportunity to connect these experiences through a unified favouriting pattern, creating a single destination for users to access, organize, and manage their most important resources.
Why are we doing this?
This integration project was driven by a proactive effort to evolve Suncentral from feature-driven silos to a unified interaction model:
Unified Data Centralisation
Creating a "single source of truth" where users could access complex data-heavy forms and simple page links from one cohesive dashboard.
Eliminating Cognitive Friction
Consolidating two different ways of "favouriting" into a single, predictable interaction model.
Architectural Scalability
Establishing a universal favouriting pattern to serve as a blueprint for any future features added to the ecosystem.
Before vs After Integration
BEFORE (Separate Experiences)
AFTER (United Experience)
FORMS
Favourite forms
Not visible elsewhere
Separate storage
Separate workflow
FAVOURITES
Favourite tools, PDFs...
Forms not included
Separate storage
Separate workflow
Not connected
Two separate experiences
INTEGRATED
Connected ecosystem
FAVOURITES HUB
Favourite tools, PDFs, pages, links.
Favourite forms
Custom folders
Single source of truth
Shared patterns across experiences
Conected workflow
One integrated, personalized ecosystem
Impact: A unified experience that brings together favourite forms and most used tools, PDFs and links in one place, helping users work faster with a personalized and consistent experience.
Key challenges
Back-end Architecture
Solving the technical complexity of connecting two independent systems to ensure favourited forms would accurately populate the Favourites dashboard in real time.
Design System Limitations
Overcoming a plain, static component library that lacked the dynamic capabilities required for real-time interaction and complex status updates.
Universal Pattern Innovation
Innovating a universal favouriting pattern that maintains global brand standards while serving as a blueprint for the entire ecosystem
Our goals
Systemic Cohesion: Connect standalone functionalities into a single, connected flow that aligns with real user behaviour.
Streamline Workflows: Reduce user friction by eliminating the need to externally track submissions or navigate multiple functional silos.
Technical Modernisation: Partner with engineering to build dynamic components that support real-time data integration and cross-system visibility.
Cross-Platform Standardisation: Establish a foundational blueprint for integration intended for adoption across other Sun Life platforms to ensure enterprise-wide consistency.
Taking a deep dive
To drive this transformation, I aligned with stakeholders to understand the opportunity to connect two existing experiences into one unified journey. I reviewed both experiences to understand how they functioned independently and where alignment could improve continuity between them.
I conducted an analysis of how both experiences could complement each other when brought together, focusing on how users could move between the two in a more natural way. This process ensured that both experiences retained their individual value while beginning to work as one integrated system.
The Strategy: Systemic Stewardship
I moved beyond feature-level design to focus on the strategic overlap between experiences. This involved exploring different ways of connecting both flows into a single, cohesive structure while maintaining total clarity and consistency for the user.
By mapping these roles across both front-end and back-end bases, I ensured that the connection between systems felt natural rather than forced.
Design Process
To solve design system limitations, I collaborated with the UI developer to build dynamic components using React. This partnership allowed us to move beyond the static library to support real-time behaviours and cross-system visibility.
I focused on a system-thinking approach to ensure visual and functional consistency. Rather than creating entirely new components, I leveraged the Add to Favourites modal and interaction patterns established in the Favourites experience. I selected an ellipsis overflow menu for the Forms table, providing a clear entry point that avoided visual clutter while supporting future extensibility.
Roadblocks & Challenges
Designing this integration required thinking beyond individual features and focusing on how different parts of the system interact.
Integration Design
Designing for cohesive systems required a deep understanding of user intent across multiple touchpoints.
Collaborative Solution
I addressed design system constraints by working directly with the UI developer to build custom React-based solutions that supported the unified experience.
Let’s design
The delivered end-to-end workflow provides a single, connected flow for data input and content management. Key design implementations included:
-
Forms Table | Actions via Overflow Menu: An ellipsis menu was introduced as the final column to provide a clear entry point for favorites while leaving space for future actions such as share, print, and download.
-
Reusing Patterns from Favourites: Existing interaction patterns from the Favourites experience were reused to save development effort and maintain consistency, making the integration easier for users to learn and use.
-
Favourites Dashboard | Folder View: Forms added from the table are organized into user-selected folders, allowing for structured grouping and access.
-
Confirmation & Immediate Feedback: I applied consistent feedback patterns to inform users that an action was successful and the form was now available on their dashboard.
By working with the UI developer to build dynamic React components, I bridged the gap between our static design system and the real-time needs of a connected ecosystem.
Click images to enlarge and view additional details.
The Impact & Key Takeaways
This work successfully shifted the platform from isolated actions to a connected system that supports end-to-end workflows. What I’m most proud of is how this work:
Bridged Disconnected Flows
Eliminated the need for users to remember or externally track important submissions by integrating them into their dashboard.
Modernized Technical Standards
Successfully bridged gaps in the design library by building custom React components that support dynamic integration.
Strengthened System Cohesion
Reduced reliance on manual tracking by allowing team members to save and organize form-related content immediately.
Drove Strategic Adoption
Developed an integration model so effective that other Sun Life teams expressed immediate interest in implementing this solution across their own platforms.