Enhancing User Experience
for Business Connection
Business Connection is a public-facing website that helps technology businesses connect with CBP to present their products and services. I was tasked with revamping the user interface to improve the usability of the website.
Background: Business Connection is a link for technology businesses to present their products and services to U.S. Customs and Border Protection. When I joined the team in November 2021, the website faced challenges in usability and consistency, particularly with navigation, visual indicators and table presentation.
Constraints: Due to budget constraints and hierarchical limitations, comprehensive user interviews and usability testing sessions were not feasible. The absence of this meant potential gaps in understanding users’ needs. To bridge the gap in this constraint, the team relied on users reaching out with questions or seeking assistance via email. Overall, this type of email feedback was limiting ,since only vocal users were heard. It was also challenging to prioritize issues based solely on email feedback.
When first onboarded to the project, I addressed these constraints by identifying user issues with fresh eyes and documenting the issues I saw. Then, I compared site implementations to U.S. Web Design Standards (USWDS) to see what standards could be implemented.
The combination of these methods, though not ideal, helped create the beginning of a strong foundation for the improved design and usability of the website.
Challenge #1: Step Indicators
Problem: The original step indicator served more as decoration rather than an informative tool for the user. From the homepage to working step-by-step in the form, there were two different designs the user saw. It lacked continuity throughout the form process and leveraged colors outside of the website’s style guide.
The original design
The new design
Solution:
Redesigned the step indicator to be informative, letting users see not only the scope of the form on the homepage, but also see their progress on the form.
Established continuity in the design by adopting the same step indicator design from the homepage to span across form pages.
Standardized the color scheme to align with the website’s style guide.
Challenge #2: Tables
Problem: In the original table design, all table rows were the same color and actions/status symbols were mixed together and in different areas on the page.
Solution:
Introduced alternating row colors to enhance visibility and accessibility.
Moved all action buttons to the right into their own column, giving a clear indication via the “action” label on editable or removable items.
The original design and the new design
Challenge #3: Navigation
Problem: As more pages were added to Business Connection, the navigation became more difficult to understand. The navigation was cumbersome, all over the page, and unintuitive.
Solution:
Implemented a site map that considered restructuring of the navigation and pitched it to stakeholders for buy-in.
Refined the hierarchy by moving the user profile to its own separate plane to prevent overcrowding of primary navigation.
Positioned all sub-navigation to the right, beneath the primary navigation and implemented arrows for pages possessing sub-navigation. This enhanced the discoverability throughout the website.
Made active pages stand out for accessibility with bold type and underlined text for easy identification.
The original design
The new design
Outcome
By advocating for the user and embracing USWDS standards, the overall design overhaul I worked on, which spanned beyond these three challenges, greatly improved the usability of the Business Connection website. The strategic changes in just the step indicators, tables, and navigation not only improved the design of the site, but also boosted the overall user experience, making the website more intuitive.