Harnessing the Power of Search Results Through UI/UX

A few months back, I pitched a new search-page idea to the marketing department for Cegal's homepage that I believed would greatly help users find what they are looking for and, therefore, also improve website traffic.  I learned heaps about making websites user-friendly and accessible, focusing on easy navigation, mobile-friendliness, and simple filter options to keep users happy and engaged. This post summarizes this learning into 4 points. 

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!  💚