End-of-flow Experiences
Lack of standardization in hierarchy and redirection information at the end of user flows.
Design System
Jan 2025
About Project
During the evaluation of end-of-flow experiences across different products, we identified a lack of consistency in hierarchy, messaging, and navigational elements.
16 user journeys were analyzed across banking and acquiring products and 5 components redesigined to establish clear patterns for hierarchy, navigation and return. Plus a default layout to establish consistency between products.
Findings
01
Lack of standardization in actions to return
Return actions and their components did not follow consistent patterns, breaking the sense of continuity and predictability across the product.
02
Information hierarchy broken.
Text sizes, weights, and colors did not follow a defined visual hierarchy.
03
Incorrect use of promotional banners.
Promotional or campaign banners were placed in contexts that didn’t support their purpose, sometimes overshadowing key navigation or success messages.
04
Inconsistent in the positioning of various components.
Different screens and flows displayed similar components in varying positions, which created visual noise.
Impact
01
Navigation quality is compromised.
02
Continuity and return experience within the product are negatively affected.
03
Low performance of campaign cards and promotional information.
04
Inconsistent in the positioning of various components.
Proposed solution
Based on Nielsen’s heuristics 3 (User control and freedom) and 4 (Consistency and standards), the solution focused on creating predictable, clear, and standardized behaviors for the end-of-flow experience.
#1 - Top Bar
Top bar now includes a close icon that allows users to end the flow and return to the screen where the process began, reinforcing a sense of control and orientation. Additionally, the name of the current flow is displayed, helping users easily identify which process they are completing.
#2 - Content Area
Definition of a Content Area, which includes a dedicated space for displaying key values, such as transaction amounts, investment details, or other critical product data if needed.
#3 - Promotional Banner
Were repositioned and redesigned to follow consistent placement rules and visual weight across products for the promotional banners.
#4 - Rating
Rating section was introduced as an optional component to collect CES or CSAT feedback always at the end of the flow. Its structure and language were standardized to make feedback gathering simple and non-intrusive.
#5 - Return
The return area was designed to provide a clear final step for users. The last action is now consistently “Go to Home,” ensuring an easy way to go back to home. Additionally, space was reserved for up to two contextual product actions, such as redoing the flow or adding a new related action if needed.
Know more