rectangles 1@5x

Search UI


Meeting user needs quicker though introducing a new search UI to the core webpages on

rectangles 1@5x

The problem

Crowdcube’s platform holds a wealth of valuable knowledge for both entrepreneurs and investors. The core webpages of investing and raising are focused on surfacing as much of this as possible but they cannot display everything or answer every user’s questions.

The solution

Enable users to control the content through a new search UI. This allows individual users to find answers to their queries with ease from the core pages on Crowdcube. The UI has been built into the existing secondary navigation. To act as a secondary action if the content on the page does not immediately answer their questions or they already have a specific goal in mind.

filters - Crowdcube search UI

Search bar UI

The search bar UI stays consistent with the majority of search web patterns, to ensure the UI is familiar and users know how to interact with it. A unique challenge to Crowdcube was making the search UI relevant to each page. For example, a search made on the ‘investing’ page should return results tailored to investing to ensure they are relevant. To account for this a drop-down filter has been added to the UI, clearly setting the expectation of using the search on each page and giving the user the control to override this if needed.

Search results

Once a user has submitted a search query they are taken to a new search results screen, showing them relevant articles, faqs and content pages. The results are displayed using the same card designs used across the site to represent both articles and pages, enabling users to differentiate the content while keeping the site consistent. Users can also refine their search further through filtering at the top of the results. This section makes it clear if a filter such as ‘investing’ has already been automatically applied and gives them a clear action to take to show all results if needed.

Mobile search results

On mobile, the search results page uses a single column with shorter cards. This limits the amount of scrolling and enables more results to be seen on the smaller screen size. The filter UI has also been designed bespoke for mobile, to limit the screen space used when collapsed without sacrificing any functionality. Users can still refine their searches the same as on desktop and can clearly see if any filters have been applied.

Triangles small@5x

Talk to me!

Triangles small@5x
Privacy policy
Scroll to Top

Talk to me!

Have any questions? or projects you’d like to work with me on. Please get in touch and I’ll get back to you as soon as possible.