SEARCH ENHANCEMENT

× My role: Lead UX/UI Designer and Researcher

× Type of project: Web

× Duration: Ongoing

× Company: BOK Financial

Increase click-through rate by 50% by revamping the BOK Financial site search across eight web pages.

Project overview

Finaldesign_mockup
ProblemSolutionBlueLight2
ResearchplanBlue2
teamblue_withbackground

Final layout + components

The final design is a direct intuitive search experience with minimal steps featuring a google-like fill-page approach.

Final-design_biggertext

Competitive analysis

I studied eleven competitors that I divided among three different categories and once the analysis was done I condensed the findings through a SWOT analysis.

swotupdated3

Design iterations

Once the competitive analysis was completed, we went through 3-4 rounds of design iterations. Here are samples of two of the patterns we studied. The overlay approach which ressembles the current pattern of our search and the dynamic search bar that allowed for a more direct interaction with the search. None of these patterns made it to the usability test as they are, although pieces of them were translated into the final design options.

designoptionsWhite

Testing

We developed an extensive moderator deck to follow a semi-structured interview process that allowed us to ask further questions in response to the user replies while keeping a guideline that allow us to collect both qualitative and quantitative insights.

testingoverview2
deck

Selected designs for testing

Two options were selected for testing: Option 1 the overlay approach that maintained a similar pattern to our current search status but with improved UI and predicted search. Option 2 the direct search that allowed the user to directly access a search page from our homepage, this option also offered a recommended section and suggested terms in the form of UI chips.

Final-design-for-testing1

Results and recomendations

During the findings read-out I was able to: 1. Present my qualitative data analysis; 2. Highlight improvement opportunities on our usability test workflow; and 3. Show high-level findings and recommendations. See below a sneak peak into my process.

datamap1
results

Final round of iterations

Once the user feedback was  collected an analized, two final design options were introduced to the team. The first one utilizing modules that are already pre-existing within out websites and the other option introduced some new modules and functionality. Design 2 was selected.

finaldesignoptions

Before and after

Below you can see: 1. A before and after of the search bar; 2. A before and after of the search results page.

before1 Finalsearchpage_before
before2 Finalsearchresultspage_before

Impact and what's next

We are currently at the feasability + implementation phase. Through story jam and in collaboration with our developers we are able to identify spikes and steps moving forward to start implementation and eventually launch the new search design. The final design and components were approved! While we confirm our assumptions I am showcasing our expected impact as in progress.

neststes3
impact1
Thumbnail_zoom

SCHEDULE AN INTERVIEW! 

REACH OUT

 AND SAY HELLO 

✦ DESIGNED AND BUILT BY NATALI OVALLES 2024 ✦

View