Holistic Homepage

How We Solved Multiple Problems With One Strategic Solution

Role

Led UX Team of 5 Designers

Context

Complex multi-platform supporting 20K immigration officers

Experience

UI, Analytics, UX Strategy

Why do we need a new homepage?

Improve the current user experience. When immigration officers first log into this case management system, the default page takes a long time to load and they see a very cluttered view of their case load.
Help users find resources. Officers can’t find critical tools and information because these resources are scattered.

Homepage Impacts

Increased visibility of time-sensitive notifications that helped immigration officers process cases 60% faster.
200% increase in visits to critical resources.
86% faster load times when first logging into the system.

Here's the whole story…

Getting Buy-in

One major challenge for this project was getting buy-in from the business and developers. Business priorities were constantly shifting and initial designer and developer relationships were strenuous. Our approach:

Always support proposal and design decisions with data in a digestible way.
Brainstorm together to foster a shared sense of ownership.
Provide feedback to developers at appropriate times. (UI decisions after functionality has been established)

Defining requirements through research

Initial discovery research consisted of conducting a root cause analysis and gaining a better understanding of user workflows and behaviors to define requirements.

🧐Root Cause Analysis

We wanted to make sure we were addressing the root cause of the issue. We uncovered that the old landing page was too cluttered because it ultimately tried to accommodate too many different user needs.

🧐User Behavior Research

Using Matomo Analytics, we found the 5 most visited pages and most used actions. These frequently used items were added to the homepage for convenient access.
We interviewed user groups to understand their typical workflows.
- “I had a learning disability and I feel like (this case management system) has brought it back. My eyes are tired by the end of the day” - User

Why do we need a new homepage?

Improve the current user experience. When immigration officers first log into this case management system, the default page takes a long time to load and they see a very cluttered view of their case load.
Help users find resources. Officers can’t find critical tools and information because these resources are scattered.

Homepage Impacts

Increased visibility of time-sensitive notifications that helped immigration officers process cases 60% faster.
200% increase in visits to critical resources.
86% faster load times when first logging into the system.

Here's the whole story…

Getting Buy-in

Always support proposal and design decisions with data in a digestible way.
Brainstorm together to foster a shared sense of ownership.
Provide feedback to developers at appropriate times. (UI decisions after functionality has been established)

Defining requirements through research

Initial discovery research consisted of conducting a root cause analysis and gaining a better understanding of user workflows and behaviors to define requirements.

🧐Root Cause Analysis

🧐User Behavior Research

Using Matomo Analytics, we found the 5 most visited pages and most used actions. These frequently used items were added to the homepage for convenient access.
We interviewed user groups to understand their typical workflows.
- “I had a learning disability and I feel like (this case management system) has brought it back. My eyes are tired by the end of the day” - User

Ideation

We studied examples of other government landing pages and incorporated the following:

frequently-used links in a large button format
tile layout that grouped similar resources together
empty, loading, and error states to account for edge cases

Feedback Implementation

Use auto-generated information. To minimize the level of effort to produce content, we decided to focus on features that could be auto-generated.
Use existing design system. Wherever possible, we tried to utilize existing React Beacon components to minimize the LOE for developers.

📋Creating a Strategic Plan for a Phased Approach

Based on feasibility and client timelines, we created a phased approach for the homepage. We wanted to first launch a MVP option, assess it’s performance while it was live, and then make adjustments as needed.

Design Evaluation

In order to make sure our solution was performing as intended, I analyzed performance metrics and compared data before and after the homepage was launched. Reporting and communicating these findings to the team and product owners were equally as important as collecting the data.

Key Findings Based on Analytics

The new homepage provided a seamless integration of system alerts, notifications, and external resources.
Since the homepage, visits to other resources have nearly doubled.

Feedback Implementation

Use auto-generated information. To minimize the level of effort to produce content, we decided to focus on features that could be auto-generated.
Use existing design system. Wherever possible, we tried to utilize existing React Beacon components to minimize the LOE for developers.

📋Creating a Strategic Plan for a Phased Approach

Design Evaluation

Key Findings Based on Analytics

The new homepage provided a seamless integration of system alerts, notifications, and external resources.
Since the homepage, visits to other resources have nearly doubled.

Follow-up User Survey

After getting research buy-in from the client, I created a survey to answer the following:

Are users satisfied with the homepage? If not, why?
What do users need that isn’t currently on the homepage?
Are there elements on the most used Caseload page that could be brought to the homepage to alleviate load times on the Caseload page?

From my experiences of creating and gathering feedback from surveys, I learned the following best practices:

For optimal participation, I kept the surveys short (5-7 questions) and sent out reminders once a week.
For long answer questions, I included “guiding questions” to prompt users to promote additional insights.
To promote participation, I learned to always share the importance of the survey and how I would use the user feedback. I also included how long the survey would take so participants would have an idea.
For easier feedback calculations, I tried to include as many multiple choice questions as possible.

Key Takeaways

💡Early developer collaboration is important for more efficient workflows.

This was the customer's first project where the UX design team and the developer team worked closely together from the very beginning. We learned to adapt to each other's expectations, workflow, and preferred methods of communication.

💡Persuasive presentations should be concise and use lots of graphics.

When defending a design approach, it’s important to keep the approach concise. Use graphics and plain language so the audience doesn’t zone out.

Follow-up User Survey

After getting research buy-in from the client, I created a survey to answer the following:

Are users satisfied with the homepage? If not, why?
What do users need that isn’t currently on the homepage?
Are there elements on the most used Caseload page that could be brought to the homepage to alleviate load times on the Caseload page?

From my experiences of creating and gathering feedback from surveys, I learned the following best practices:

For optimal participation, I kept the surveys short (5-7 questions) and sent out reminders once a week.
For long answer questions, I included “guiding questions” to prompt users to promote additional insights.
To promote participation, I learned to always share the importance of the survey and how I would use the user feedback. I also included how long the survey would take so participants would have an idea.
For easier feedback calculations, I tried to include as many multiple choice questions as possible.