As a public-facing application, this project required adhering to WCAG (Web Content Accessibility Guidelines) and best practices in the pursuit of improving upon the previous search page. I relied on the great foundation laid by the Cegal Design System, as well as my experience with UI (User Interface) and UX (User Experience).
To read the full article, check it out on LinkedIn, or continue for the summary below.
1. Visual Hierarchy and Grouping
Establishing a consistent visual hierarchy and formatting is fundamental for accessibility, enhancing user readability and comprehension by using uniform fonts, colors, and spacing.
2. Mobile Responsiveness
Given the significant portion of web traffic coming from mobile devices, implementing an adaptive layout that adjusts to various screen sizes is crucial for a seamless user experience on smartphones and tablets.
3. Other Accessibility Considerations
Accessibility considerations are prioritized from the start, including the use of appropriate HTML tags, ensuring content is navigable by screen readers, designing for users with limited vision, and maintaining a layout that accommodates text enlargement for visibility.
4. Interactive Filters
Interactive filters are critical for enhancing user engagement by providing control over search results. The project focused on sorting, category, and time filters to tailor the search experience according to user needs.
Bonus: Technology used
The application was made using React and TypeScript. No backend was needed as the search functionality is hooked up to the HubSpot Search API. The page also handles four languages using the i18next package controlled by a query parameter. For CI/CD, a GitHub workflow is run on merge with the main branch, which deploys a static web app to Azure. Last but not least, the application has been hooked up to Sentry, an awesome service for performance and error monitoring.
I'm very proud of how the new search page turned out; check it out, and I also hope this post has helped highlight the most important aspects of website design and will help you in your next endevour.
Happy designing! 💚