Revamping the Transition Hub

July 29, 2025

Vika Scripps

The Transition Hub is a vital platform designed to support young individuals with disabilities as they transition into adulthood. When the client initially approached Brand New Box, they had already attempted to build this platform with another vendor. However, the project was left incomplete, and the existing website lacked the necessary clarity, accessibility, and modern design. Our task was to refine and complete the platform, making it more intuitive and user-friendly while preserving the valuable research the client had already conducted.

Assessing the Existing Platform

Before diving into development, our team carefully analyzed the existing website and research findings provided by the client. We identified several key issues that needed to be addressed to create a more effective and accessible platform.

Key Issues Identified and Solutions Implemented

Overcomplicated Navigation

• The website contained two navigation panels: a top navigation bar and a side navigation bar, with overlapping menu items.
• This redundancy created confusion and made navigation unnecessarily complex.
• Solution: We streamlined the structure by eliminating the side navigation and consolidating all essential links within a single top navigation bar, making the user experience more straightforward and cohesive.

Scattered Accessibility Features

• Accessibility functions were dispersed throughout the site:
  • A text-to-speech feature was only available on select pages.
  • A high-contrast mode toggle was located within the side navigation panel.
  • A language selector was placed in the top navigation panel.
• Having these essential accessibility tools scattered across different locations made it difficult for users to find and use them efficiently.
• Solution: We consolidated all accessibility features into a persistent, second-tier accessibility menu that remains visible across all pages, ensuring that these crucial tools are always easy to locate and use.

Unclear Content Structure

• The site had both an "About" page and a "What is Transition?" page, both seemingly intended to explain the platform. The distinction between these two pages was unclear, making it difficult for users (and even the client) to determine where specific information should go.
• The Homepage lacked introductory content that would help users understand the platform’s purpose and how to use it.
• Solution: We made the Homepage more descriptive, clearly outlining the platform’s purpose and what users can expect to find. The "About" page was retained for more in-depth details, while the redundant "What is Transition?" page was removed to eliminate confusion.

Improving Resource and Partner Organization Visibility

• The website’s primary goal is to provide users with resources (websites and documents) related to transitioning from childhood to adulthood and information about partner organizations that offer assistance.
• In the old structure, "Resources" was part of the top navigation, but "Organizations" was hidden in the side navigation, making it harder to find and seemingly less important.
• Solution: We reorganized the navigation by making "Resources" and "Partner Organizations" separate and distinct items in the top navigation panel, ensuring that both categories are equally prominent and easily accessible to users.

Homepage Redesign: Enhancing Clarity and Usability

Refocusing the Homepage for First-Time Users

• The original homepage prominently featured a search bar for resources in the hero section. However, for first-time users unfamiliar with the platform’s offerings, this feature was not immediately useful or intuitive.
• The homepage displayed a list of resources without any introductory context, making it unclear what the platform provided.
• Partner organizations were not mentioned, overlooking a key component of the platform.
• Several homepage links directed users to "About" or "What is Transition Hub" pages instead of providing substantive information upfront.
• A "Recently Viewed Resources" section was included, which was irrelevant to new users.

Solution:

• Removed the search bar from the hero section and replaced it with a concise introductory text that explains the purpose of the platform.
• Added a "What is Transition?" section to help users understand how the platform can support them.
• Created a "What You'll Find Here" section with a clear two-column layout, outlining the available resources and partner organizations.
• Introduced a "Not Sure Where to Start?" section, prompting users to answer "What is on your mind right now?" using tag-based categories. This approach familiarizes users with available resources and facilitates an easier transition into searching and filtering content.

Enhancing Resource and Organization Pages

Restructuring the Resource Detail Page

• The original resource page had an inconsistent structure:
• The header and description were placed at the top, but the overview was located below.
• The link to the resource was buried in a "Learn More" section, requiring users to scroll down to access it.
• Topic hashtags were positioned above the overview but lacked context.
• Resource details and sharing tools were placed at the very bottom.
• A "Recently Viewed" section appeared at the bottom, making it less relevant to new users.

Solution:

• Implemented a two-column layout for improved usability.
• The left column now houses the resource overview, description, and essential details (location, category, publication date, and last update).
• The right column consolidates action buttons , including a prominent "Go to Resource" button , sharing options (Copy Link, Get QR Code) , and topic tags for clarity.
• This layout enhances readability , allowing users to quickly locate information and actions in a consistent and intuitive manner.
• Added a Resource Categories page where users can explore categories and descriptions, providing clarity before navigating the full resource list and filters.

Improving the Organization Detail Page

• The original organization page had layout inefficiencies:
• The organization logo occupied an entire column, leaving excessive empty space.
• Contact details were placed below the description, requiring unnecessary scrolling.

Solution:

• Adopted a two-column layout similar to the Resource page.
• The left column contains the organization description.
• The right column now houses the organization logo, "Go to Website" button, and contact details for easy access.
• Introduced a "What This Organization Can Help With" section, providing a bullet-point summary of key services to guide users more effectively.

Visual Enhancements for a More Engaging Experience

Establishing a Cohesive and Approachable Visual Identity

• The previous website lacked visual appeal and did not create the inviting and professional aesthetic our client envisioned.
• The platform’s logo featured bright and welcoming blue and orange tones, accompanied by additional complementary shades.

Solution:

• Extracted colors from the logo to develop a cohesive and engaging color palette that enhances brand identity.
• Incorporated circular shapes from the logo into page decorations to introduce an element of playfulness and visual interest.
• Balanced the design with neutral colors to provide contrast and create a clean, organized interface.
• Introduced subtle grid patterns in backgrounds to add depth without overwhelming the user experience.
• Applied a text highlight effect to Homepage headers, improving readability and drawing attention to key information.
• Implemented hard shadows on buttons , reinforcing a dynamic and approachable design style.

The Result

Through thoughtful restructuring and design enhancements, the new Transition Hub platform is now more intuitive, user-friendly, and visually engaging. By eliminating redundancy, simplifying navigation, centralizing accessibility tools, and improving aesthetics, we created a more effective and welcoming space for users navigating the transition to adulthood.

Key Outcomes:

• A single, streamlined navigation bar for a more intuitive browsing experience.
• A more informative Homepage , reducing unnecessary pages and simplifying content structure.
• A dedicated accessibility settings menu , ensuring essential tools are always easy to find and use.
• Clear and distinct sections for Resources and Partner Organizations , improving visibility and accessibility of key information.
• Restructured Resource and Organization detail pages with an intuitive two-column layout for better scannability and usability.
• A refined and engaging visual design , reinforcing a professional yet inviting brand identity.
• A dedicated Resource Categories page , helping users browse available resources before entering the full library.

By focusing on clarity, usability, and visual design, Brand New Box helped bring the Transition Hub to life, transforming it into a valuable resource that genuinely serves its users.