UX, UI, WEB

Pension Digital Transformation

Redesigning an existing pension management client to a web-based solution in a collaborative tight-knit team. I leverage my Engineering experience designing data visualizations to craft accessible navigation, tables, and processes.

DESIGN PROCESS

• Discover - User Research, User Interviews


• Iterate - Sketching, Wireframing

• Design - Prototyping, Design Systems


• Communicate - Stakeholder Alignment

Time for an Update

CONTEXT

The client is a branch of the Canadian Government within the pension subsidiary. Currently, an ERP system is used to manage and track member information, view and edit financial records, and provide payment solutions. In addition, employees also have access to edit individual and group benefits while being able to provide communication messages to pensioners. These services provided ensure a smooth experience for various work force groups that funnel into the pension plans.

While the digital sector continues to grow, the subsidiary received additional funding to redesign their internal ERP system, into a web-based solution. The pension team's aim is to deliver exceptional insights, and elevate member and employer experience while being able to support evolving needs.

Looking at Perfect Properties app on phone

Jobs To Be Done Research

RESEARCH

Due to the volatile nature of public sector limitations, fundings and timelines could change based on policies that align with provincial/federal directions. To account for this insight, a jobs-to-be-done framework was utilized to access valuable knowledge from employees versed in existing tools. The approach involved conducting user interviews, with the intention to learn how the tool was used, what did the tool do well and what could be improved? This process was repeated for multiple “super-users”, and the information was consolidated to begin formulating feasible solutions.

User persona 1
User persona 2

Ideation

VALUE PROPOSITION

We synthesized the information gathered from interviewing super-users, and brainstormed ideas that would fit the bill of user needs. Ideas were iterated and discussed with various stakeholders including the Business Analysts and the Developers to ensure we were all aligned. A plan of action was drafted, and the main components to keep in mind while designing were:


  • Transitioning from desktop ERP to web-based solution for desktop
  • Reduce levels of change management by keeping the new design familiar
  • Increase ease of use and accessibility for users
KNOWLEDGE IS POWER
Screen showing comparison
Screen showing tablet view of property details
GET IN TOUCH
Screens showing how to contact and schedule viewing
Design system image
POST DESIGN
UX, UI, WEB

Pension Digital Transformation

Redesigning an existing pension management client to a web-based solution in a collaborative tight-knit team. I leverage my Engineering experience designing data visualizations to craft accessible navigation, tables, and processes.

DESIGN PROCESS

• Discover - User Research, User Interviews


• Iterate - Sketching, Wireframing

• Design - Prototyping, Design Systems


• Communicate - Stakeholder Alignment

Time for an Update

CONTEXT

The client is a branch of the Canadian Government within the pension subsidiary. Currently, an ERP system is used to manage and track member information, view and edit financial records, and provide payment solutions. In addition, employees also have access to edit individual and group benefits while being able to provide communication messages to pensioners. These services provided ensure a smooth experience for various work force groups that funnel into the pension plans.

While the digital sector continues to grow, the subsidiary received additional funding to redesign their internal ERP system, into a web-based solution. The pension team's aim is to deliver exceptional insights, and elevate member and employer experience while being able to support evolving needs.

Gym equipment next to Moment 5 on a phone

Jobs To Be Done Research

SURVEY DATA

Due to the volatile nature of public sector limitations, fundings and timelines could change based on policies that align with provincial/federal directions. To account for this insight, a jobs-to-be-done framework was utilized to access valuable knowledge from employees versed in existing tools. The approach involved conducting user interviews, with the intention to learn how the tool was used, what did the tool do well and what could be improved? This process was repeated for multiple “super-users”, and the information was consolidated to begin formulating feasible solutions.

Putting it Together

ITERATIVE DESIGN

I used Card Sorting with my test users to determine the appropriate navigation to best go through the main tasks. I was able to create mid-fidelity sketches which then went through usability testing. Doing so revealed a few medium-high severity concerns that were crucial to address before moving on.

Information architecture graph
Sticky notes from usability testing

Road to Success

VISUAL CHOICES

I conducted A/B testing iterations to determine what was more appropriate, then applied visual design and Gestalt principles to create organized screens. An important step before kicking it high-fidelity was to collaborate with other experienced designers to see if anything was missed. The design was shifted from an overextended process with far too many quantitative data - to a shortened design that tracks progress.

Progress from low to high fidelity

Take a Break

HITTING RESET

A key feature of Moment 5 is based on the evidence provided by users - who do not spend more than 10 minutes in a day to take care of their well-being. The design chosen provides versatile options separated by Move or Rest exercises, to increase engagement. To back up a user's selection, steps are listed followed by 5 minute guided instructions.

Screen to show assortment of exercises
Screen of workout 1
Screen of workout 2

Take Control

CHECKING IN

Tracking progress is one of the most effective ways to determine how far away a goal is. Users thought using mood tracking would benefit this the most, so a reflection step was added post exercise. The results taken would be shown visually in the home screen, with options to further slice and dice goal-related information.

Screen of graph
Screen of calendar
Screen of reflection questionnaire

Outcomes and Takeaways

POST DESIGN
83%
of users were generally satisfied and considered using Moment 5 for their daily well-being
Highlights included working with participants during usability testing to determine the best possible solution. It was exciting to see users pointed out severity errors that I haven't thought of, which showed me the importance of user feedback.
10
months spent part-time to build this project from end-to-end
I had fun working on a project focusing on wellness, as it allowed me to dive into a user's personal goals. This made me reflect on the tools I use, and how they were designed. Future considerations would involve responsive design, and enhancing accessibility.
UX, UI, WEB

Pension Digital Transformation

Redesigning an existing pension management client to a web-based solution in a collaborative tight-knit team. I leverage my Engineering experience designing data visualizations to craft accessible navigation, tables, and processes.

DESIGN PROCESS
🤔 WHAT I LEARNED

• Discover - User Research, User Interviews


• Iterate - Sketching, Wireframing

• Design - Prototyping, Design Systems


• Communicate - Stakeholder Alignment

  • Working with an existing blueprint while embracing the brand
  • Pause after reaching goals, a redesign can be continuous
  • Reverse engineering how a webpage was built and determining design systems in place

Time for an Update

CONTEXT

The client is a branch of the Canadian Government within the pension subsidiary. Currently, an ERP system is used to manage and track member information, view and edit financial records, and provide payment solutions. In addition, employees also have access to edit individual and group benefits while being able to provide communication messages to pensioners. These services provided ensure a smooth experience for various work force groups that funnel into the pension plans.

While the digital sector continues to grow, the subsidiary received additional funding to redesign their internal ERP system, into a web-based solution. The pension team's aim is to deliver exceptional insights, and elevate member and employer experience while being able to support evolving needs.

Jobs To Be Done Research

CUSTOMER EXPERIENCE

Due to the volatile nature of public sector limitations, fundings and timelines could change based on policies that align with provincial/federal directions. To account for this insight, a jobs-to-be-done framework was utilized to access valuable knowledge from employees versed in existing tools. The approach involved conducting user interviews, with the intention to learn how the tool was used, what did the tool do well and what could be improved? This process was repeated for multiple “super-users”, and the information was consolidated to begin formulating feasible solutions.

Screen of redesigned top
Screen of redesigned middle
Screen of redesigned customize menu

Outcomes and Takeaways

POST DESIGN
21%
reduction in desktop size by adding a column and optimizing space
With the expansion of an extra column, users can see more options at a glance without being overwhelmed with the consistent layout.
Less
time spent browsing, more time back to your family and friends
This was a passion project fuelled by my constant appetite for pizza. It was a fun challenge to redesign without drastically changing an existing product. Future considerations would include sort/filter options and a modern design based on trends.
UX, UI, WEB

Pension Digital Transformation

Redesigning an existing pension management client to a web-based solution in a collaborative tight-knit team. I leverage my Engineering experience designing data visualizations to craft accessible navigation, tables, and processes.

DESIGN PROCESS
🤔 WHAT I LEARNED

• Discover - User Research, User Interviews


• Iterate - Sketching, Wireframing

• Design - Prototyping, Design Systems


• Communicate - Stakeholder Alignment

  • How to collaborate with other Senior Designers, and utilize the design systems built
  • Managing time while working with limited public sector resources
  • Utilizing jobs-to-be-done as the main method of research

Time for an Update

CONTEXT

The client is a branch of the Canadian Government within the pension subsidiary. Currently, an ERP system is used to manage and track member information, view and edit financial records, and provide payment solutions. In addition, employees also have access to edit individual and group benefits while being able to provide communication messages to pensioners. These services provided ensure a smooth experience for various work force groups that funnel into the pension plans.

While the digital sector continues to grow, the subsidiary received additional funding to redesign their internal ERP system, into a web-based solution. The pension team's aim is to deliver exceptional insights, and elevate member and employer experience while being able to support evolving needs.

Jobs To Be Done

USER RESEARCH

Due to the volatile nature of public sector limitations, fundings and timelines could change based on policies that align with provincial/federal directions. To account for this insight, a jobs-to-be-done framework was utilized to access valuable knowledge from employees versed in existing tools. The approach involved conducting user interviews, with the intention to learn how the tool was used, what did the tool do well and what could be improved? This process was repeated for multiple “super-users”, and the information was consolidated to begin formulating feasible solutions.

Team working in office

Key Focus

IDEATION

We synthesized the information gathered from interviewing super-users, and brainstormed ideas that would fit the bill of user needs. Ideas were iterated and discussed with various stakeholders including the Business Analysts and Developers to ensure we were all aligned. A plan of action was drafted, and the main components to keep in mind while designing were:


  • Transitioning from desktop ERP to web-based solution for desktop
  • Reduce levels of change management by keeping the new design familiar
  • Increase ease of use and accessibility for users
Balsamiq mockup of Tax Credits

Transformed Experience

CURRENT STATE

The project was part of a broader digital transformation initiative, to modernize the experience and better equip internal teams. With that in mind, my task was to create simple and intuitive wireframes that would transform existing pages and incorporate a new design for wizards. Current friction stemmed from difficulty navigating through layered tabs, populating and viewing fields, and unstandardized design that were built for pure functionality.

Old pension client

Taxes

IMPROVED
NAVIGATION

Implemented fixed headers and left aligned navigation bar for consistency. Maintained the separate tax tabs (Tax Credits/Tax Slips) while emphasizing hierarchy. I leveraged my experience as an Engineer working in data, to craft an accessible way to view data in tables.

New Tax Credit
Provincial Tax Modal
NR4 Modal

Group Benefits

BETTER 
ORGANIZATION

The original client had 3 tabs to split content similar to Tax Credits/Tax Slips, however a business decision was made to to view all content in one page. A show/hide drawer was implemented for users to easily glance at necessary information without having to navigate elsewhere.

Group Benefits Expanded
Group Benefits Collapsed

Wizards

EFFECTIVE
SPACING

Previous Wizard processes were inconsistent in terms of screen sizing, spacing, and overall layout. The focus for new designs were to maintain a cohesive and effective process, and not confuse users. We utilized the abundant spacing of a web-based solution to create a new standard.

New Member Wizard

Project Results

POST DESIGN
95%
user satisfaction
Internal system users were very satisfied with the new designs, and were slightly more engaged with tasks.
Less
navigational errors
A qualitative survey was sent out to determine if users could navigate through the web-based solution better than the old client
4
Perfect Properties

Perfect Properties is a web app designed to help users make informed purchases on real estate, to achieve financial security. This means lower risk and increased peace of mind for one of the biggest decisions ever.

UX, UI, WEB
2
Moment 5

Moment 5 is a mobile wellness app that focuses on promoting physical and mental wellbeing with flexible 5-minute exercises. People are often busy and backlogged with responsibilities, sometimes a spark is all that is needed to get through the day.

UX, UI, MOBILE
3
Pizza Garden

Pizza Garden is a popular franchise that specializes in pizza cooked in a stone oven located in the Vancouver area. The redesign focuses on the primary menu page.

UI, WEB, BRANDING