UX Redesign for SAFe Framework Readability
UX Redesign for SAFe Framework Readability
Embedded Files
The Homepage Redesign: Strategic Gateway
The Homepage Redesign: Strategic Gateway
The homepage was failing as a strategic gateway due to severe information density and a lack of visual hierarchy. This problem created immediate cognitive fatigue and prevented users from efficiently navigating the site's most critical content. The goal of this redesign was to completely overhaul the Information Architecture (IA) and visual framework. The comparison below demonstrates how we imposed a clear, strategic structure to replace the chaos, transforming the page into an effective, scannable entry point that guides users to the high-value content they are seeking.
The homepage was failing as a strategic gateway due to severe information density and a lack of visual hierarchy. This problem created immediate cognitive fatigue and prevented users from efficiently navigating the site's most critical content. The goal of this redesign was to completely overhaul the Information Architecture (IA) and visual framework. The comparison below demonstrates how we imposed a clear, strategic structure to replace the chaos, transforming the page into an effective, scannable entry point that guides users to the high-value content they are seeking.
Previous homepage
Previous homepage
The previous homepage was overloaded with content but lacked any discernible visual or informational hierarchy. This extreme density, coupled with the absence of clear directional cues, created a bottleneck in the user journey. It forced users to visually parse every element without clear prioritization, leading to high abandonment and low user efficacy in locating core content. This lack of strategic organization was the root cause of our site's discoverability deficits.
The previous homepage was overloaded with content but lacked any discernible visual or informational hierarchy. This extreme density, coupled with the absence of clear directional cues, created a bottleneck in the user journey. It forced users to visually parse every element without clear prioritization, leading to high abandonment and low user efficacy in locating core content. This lack of strategic organization was the root cause of our site's discoverability deficits.
Current redesigned homepage
Current redesigned homepage
The redesign successfully imposed a clear Information Architecture (IA) and scannable hierarchy, moving us away from overly prescriptive guidance. We achieved this by intentionally structuring the content around common business problems, ensuring every section acts as a flexible starting point tailored to the user's specific journey. The new visual structure actively removes the rigidity of the previous system, transforming the page into a highly adaptable, strategic gateway that empowers users to customize the Framework to their own organizational needs, all while drastically lowering the cognitive load.
The redesign successfully imposed a clear Information Architecture (IA) and scannable hierarchy, moving us away from overly prescriptive guidance. We achieved this by intentionally structuring the content around common business problems, ensuring every section acts as a flexible starting point tailored to the user's specific journey. The new visual structure actively removes the rigidity of the previous system, transforming the page into a highly adaptable, strategic gateway that empowers users to customize the Framework to their own organizational needs, all while drastically lowering the cognitive load.
The Article Page: Content Usability & Readability
The Article Page: Content Usability & Readability
The core goal of the UX redesign was to transform a state of extreme information overload and high cognitive load into one of clarity and purpose. By systematically addressing structural and editorial friction, my strategic visual approach directly supported the content team's simplification efforts. The before-and-after comparison clearly demonstrates how we replaced an unmanageable content delivery system with a scannable, intentional information architecture optimized for readability (Grade 22 > Grade 10) and user efficacy.
The core goal of the UX redesign was to transform a state of extreme information overload and high cognitive load into one of clarity and purpose. By systematically addressing structural and editorial friction, my strategic visual approach directly supported the content team's simplification efforts. The before-and-after comparison clearly demonstrates how we replaced an unmanageable content delivery system with a scannable, intentional information architecture optimized for readability (Grade 22 > Grade 10) and user efficacy.
Previous article layout
Previous article layout
The Readability Crisis: Extreme Friction and Design Debt. The page actively frustrated users with a disastrous initial presentation: a large, useless header image and quote pushed critical content down the page. The image itself created perpetual design debt as it required expensive, manual updates with every new IP release (See Big Picture case study). Furthermore, content was nearly impossible to consume due to excessively long line lengths, embedded but unmarked definitions, and a swarm of distracting, high-volume links (upwards of 50 per article) that added no intentional value and required constant maintenance.
The Readability Crisis: Extreme Friction and Design Debt. The page actively frustrated users with a disastrous initial presentation: a large, useless header image and quote pushed critical content down the page. The image itself created perpetual design debt as it required expensive, manual updates with every new IP release (See Big Picture case study). Furthermore, content was nearly impossible to consume due to excessively long line lengths, embedded but unmarked definitions, and a swarm of distracting, high-volume links (upwards of 50 per article) that added no intentional value and required constant maintenance.
Redesigned article layout
Redesigned article layout
Solution: Architecting Clarity and Reducing Cognitive Load. The redesign transformed the user experience by prioritizing focused content consumption. We started by adding a sidebar to reduce the main content line length to recommended standards. This action freed up space for several critical UX improvements:
Solution: Architecting Clarity and Reducing Cognitive Load. The redesign transformed the user experience by prioritizing focused content consumption. We started by adding a sidebar to reduce the main content line length to recommended standards. This action freed up space for several critical UX improvements:
Summary Block: A strategic Summary Block was introduced at the top to give users an immediate decision point: is this the right article?
Summary Block: A strategic Summary Block was introduced at the top to give users an immediate decision point: is this the right article?
In-Article Navigation: A dynamic "In this article" table of contents with anchor links was added to the sidebar, allowing users to efficiently jump to the most relevant sections.
In-Article Navigation: A dynamic "In this article" table of contents with anchor links was added to the sidebar, allowing users to efficiently jump to the most relevant sections.
Key Takeaways: A Key Takeaways component provides immediate, high-value bullet points for easy synthesis and stakeholder reporting.
Key Takeaways: A Key Takeaways component provides immediate, high-value bullet points for easy synthesis and stakeholder reporting.
Simultaneously, we removed the mass of irrelevant links, integrating only intentional, supportive links. This visual decluttering, paired with the team's successful effort to drop content from Grade 22 to Grade 10, ensured maximum clarity, scannability, and accessibility. In addition, where possible, we added links to applicable learning assets to connect this part of the business with our marketing site and increase conversions to the training calendar.
Simultaneously, we removed the mass of irrelevant links, integrating only intentional, supportive links. This visual decluttering, paired with the team's successful effort to drop content from Grade 22 to Grade 10, ensured maximum clarity, scannability, and accessibility. In addition, where possible, we added links to applicable learning assets to connect this part of the business with our marketing site and increase conversions to the training calendar.
Figma Process: Systematic Prototyping and Design System Thinking
Foundational Information Architecture (IA) Audit: My initial step was a rigorous Content Audit to map the entire content ecosystem. This process was essential for understanding the sheer volume of assets and defining the structural problems. I categorized every page to clearly identify: Core IP vs. Secondary Content, pages requiring new Landing Pages, and redundant pages needing retirement.
Foundational Information Architecture (IA) Audit: My initial step was a rigorous Content Audit to map the entire content ecosystem. This process was essential for understanding the sheer volume of assets and defining the structural problems. I categorized every page to clearly identify: Core IP vs. Secondary Content, pages requiring new Landing Pages, and redundant pages needing retirement.
Translating IA into Functional Prototypes: With the content hierarchy defined by the audit, I moved directly into high-fidelity prototyping. Using Figma components and states, I developed the complete user journey on the homepage.
Translating IA into Functional Prototypes: With the content hierarchy defined by the audit, I moved directly into high-fidelity prototyping. Using Figma components and states, I developed the complete user journey on the homepage.
Prototype of User Flows
This functional prototype served as the final validation tool for stakeholders and was the single source of truth for developers, ensuring accurate handoff based on the new IA.
Components and States
Systematic UI Development and Handoff: I developed a comprehensive library of interaction states and final UI elements. This approach, leveraging Figma Variants, ensures a consistent and accessible user experience across the entire site. More critically, it provided the development team with clear, complete specifications for every interaction, minimizing technical confusion and accelerating the build phase.
Systematic UI Development and Handoff: I developed a comprehensive library of interaction states and final UI elements. This approach, leveraging Figma Variants, ensures a consistent and accessible user experience across the entire site. More critically, it provided the development team with clear, complete specifications for every interaction, minimizing technical confusion and accelerating the build phase.
Page updated
Google Sites
Report abuse