APRIL ON
Redesigning the status system for clarity
UX Designer, Front-End Developer
Problem solving, UI Design, Wireframing, Programming
4 months
Samira Durand (Manager of the Digital and Marketing team), Michael Babin (Lead programmer), Tristan Viens (Back-End Programmer)
Figma, VSCode
TL;DR
As a UX designer, I was tasked with leading the redesign and implementation of the status system in APRIL ON, an online platform for insurance brokers. This project aimed to improve user understanding of the process throughout the application, and reduce delays caused by confusion. I successfully redesigned and clarified the status system, enhancing user understanding and streamlining user workflows.
Before and After
Before
Unclear labels and confusion with the actions
Lack of guidance on the quote details screen
Difficulty identifying the files needing an action in the list screen
After
Better labels for statuses and actions
Clearer process to the user for better understanding
Intuitive and accessible next step
Guide users towards items that need actions
Process
About the company and the product
APRIL is an international insurance company operating as a Managing General Agent (MGA), bridging insurance companies and brokers. It serves individuals and businesses with various insurance lines like car and property insurance. In response to industry digitalization, APRIL launched its online platform, APRIL ON, in 2020. APRIL ON is a Business-to-Business (B2B) web application designed for insurance brokers and their firms to purchase insurance products on behalf of their clients. It aims to simplify insurance, reflecting the company's dedication to leveraging technology for streamlined processes.
Situation
APRIL On is the primary platform through which users purchase APRIL’s insurance products. However,
they reported encountering difficulties in understanding the status of their files and the whole underlying process,
to the point where they sometimes needed a document to help them interpret the situation.
This lack of clarity frequently leads to delays, particularly when users are uncertain about the next steps or their required actions.
About the user
The jobs of insurance brokers can be stressful. They are tasked with juggling various responsibilities, like managing client relationships, researching insurance products, and negotiating deals. Additionally, they frequently use multiple online platforms like APRIL ON from different insurance providers to buy products for clients. Therefore, these platforms must be user-friendly, efficient, and comprehensive to meet brokers' needs effectively.
User flow
The status system is present in most of the part of the app where the user works on the files they already created. We identified that most of the confusion occurs on the Quote list screen and on the Quote details screen. The latter one is central in the process, as it is the where the user will be able to do all the actions that move their file forward.
Research
During the research phase, we gathered valuable insights from various sources. Feedback from business developers provided qualitative inputs, while data on delays and drop-off rates offered quantitative insights into user behavior. These inputs led to significant outcomes. We identified issues such as unclear labels and confusion with actions, a lack of guidance on the quote details screen, and difficulty in identifying files needing attention on the list screen. These findings guided our efforts to address user experience challenges comprehensively.
Pain point #1
Unclear labels for statuses and actions
Some status labels don't match the corresponding actions. For instance, transitioning from "Not sent" to "Sent" requires actions like Edit and Confirm, rather than Send. Certain statuses like "Sent" lack clear guidance on the next steps or actions required.
Certain statuses like "Sent" lack clear guidance on the next steps or actions required.
Statuses primarily indicate past actions rather than guiding users towards the next steps in the process.
The choice of colors for statuses lacks consistency and meaningful differentiation, which may add confusion.
Action buttons lack uniformity across the application, leading to inconsistency in user interactions.
Pain point #2
Lack of guidance on quote details
General lack of guidance towards the next action:
A lack of button hierarchy makes it challenging to identify the primary action clearly
The absence of past status history or a preview of next steps fails to provide an overview of the entire process
Grouping document download and upload buttons with the recap section is not logical as they serve different functions and relate to distinct topics
The grey area wastes space and lacks aesthetic appeal
Pain point #3
Difficulty identifying the files needing attention on list screen
General lack of guidance towards the next action:
User attention isn't directed to relevant quotes, as they all appear equal, making it difficult to distinguish which quote requires specific actions or attention
Frequently used filters aren't prominently displayed
Inconsistency in filter presentation: some are within a white container while others are not, leading to confusion regarding their function and organization
Design goal
Our biggest (and most interesting) challenge lies in solving the issue at its core, and implementing solutions that reach every corner of the app, from its origin to its diverse functionalities. We need to make the whole process simple and clear for the user and make the next step obvious, intuitive and accessible.
Design goal
Our biggest (and most interesting) challenge lies in solving the issue at its core, and implementing solutions that reach every corner of the app, from its origin to its diverse functionalities. We need to make the whole process simple and clear for the user and make the next step obvious, intuitive and accessible
Solution #1
Better labels for more clarity
Status and action labels are now aligned: for instance, transitioning from "Not completed" to "Quote Pending" involves actions like "Complete my quote" followed by "Get my quote".
Introduced a temporary status, "Information Required", to prompt user action rather than leaving them in uncertainty.
The user is now required to upload the necessary documents before requesting to bind, which will make the processing of the file faster.
The user is now required to upload the necessary documents before requesting to bind, which will make the processing of the file faster.
Implemented a more meaningful color scheme: yellow for actions needed, blue for waiting, red for negative outcomes, and green for positive outcomes/done.
Action buttons redesigned as clear CTAs for enhanced user interaction.
Solution #2
Show process and next step in quote details screen
Introduction of an info box to clarify the next action and guide the user towards it.
Clear button hierarchy: The primary action button stands out with a strong and catchy design, distinguishing it from secondary actions.
Introduction of a status tracker to provide users with an overview of the process, maintain a history, and inform them about upcoming steps.
Redesigned and reorganized recap zone for improved information hierarchy, arranging information by relevance from left to right.
Dedicated zones for downloads and uploads to separate functions, enhancing clarity and organization on the page.
Solution #3
Highlight items that need attention in quote list screen
Implementation of two distinct notification types: one for quotes requiring user action and another for simple updates that do not necessitate action
Addition of a recap zone positioned at the top of the screen, offering an overview of the total number of quotes requiring attention
Integration of matching notification icons at the start of each line, effectively directing the user's attention to the relevant quotes
Adoption of a new status badge design to replace the previous pill-shaped ones, enhancing clarity and visual consistency
Final designs
Learning
Challenges and lessons
Our initial problem statement, “users don't know how to perform the next action”, lacked depth. To address this, I researched and explored to finally reach the heart of the problem. This experience taught me the importance of always verifying that we're working on the correct problem first.
Managing changes, ideas, and functionalities across multiple screens proved challenging, leading to difficulty in tracking progress. I made sure I clarified the why of each idea to the team, and validated each feature individually. I learned to keep notes on the history and reasoning behind each decision.
Reaching a balance between functionality and aesthetics was hard given the constraints of tight deadlines and the sole use of high-fidelity wireframes. Going forward, I plan to prioritize functionality by utilizing medium-fidelity wireframes whenever I can.
What I would have done differently
Define clearer success metrics: although we received a lot of positive feedback from the user, it would have been better to formally measure this feedback in a more formal way
Implement some User Testing along with the team reviews
Next steps
The implementation of the design was split in 4 parts:
1: The quote details page
2: The quote list page
3: The status tracker
4: The upload document feature (on details screen)
My responsibility included the front-end development of the first three parts, which were executed successfully. The document upload required more coordination from other department teams and is on its way to be implemented. Additionally, we are in the process of reviewing the entire user journey to ensure simplicity and efficiency for both brokers and underwriters.
