Case Study: UX discovery

Conduct a UX discovery to evaluate the need for a search component

About Pioneer Design System

The Pioneer Design System is a react framework that serves 90+ applications within Wells Fargo, Commercial Bank
We are a team of three designers and are supported by product, producer, engineering, accessibility and content teams
We work (Agile) in two week sprints with daily check-ins and weekly design reviews

Quick Summary

Situation

Our development partners have the bandwidth to build a search component, and our internal research suggests it could offer substantial value to our customers

Task

Should our team commit resources to developing a search component, considering its potential impact and benefits?

Action

Discovery, Sprint 1: Define the problem, review internal research, interview stakeholders, and document use cases and recommendations
Exploration, Sprint 2: Conduct comparative and competitive analysis, and create wireframes for key use cases

Result

Our team agreed that adding a search feature would be highly beneficial for both our design partners and customers
We’ve put together a set of recommendations for the next steps, along with wireframe examples that follow best practices

Client

Wells Fargo, San Francisco CA

My role

Senior Product Designer

Team

Pioneer Design System. Used by 90+ applications within the commercial bank.

Tools

Figma

Date

2023

About a UX Discovery

Discovery covers the Discover and Define stage of the double-diamond model. In the Discover stage, lines of inquiry diverge as a team explores the problem space. In the Define stage, the team aligns on an evidence-based problem statement and on a vision for the future.

Nielsen Norman Group: Discovery Definition

NN Group

Sprint 1: Discover & Define

10 day deliverable

During this sprint, I aim to address the following questions

Is the absence of a search component a genuine issue for our users, or are we addressing a problem that may not exist?
With over 90 applications within the commercial bank, what are the known use cases?
What do our stakeholders think?
What problems do we need to overcome?
Is our team aligned on the objective?

Problem statement

Our customers do not have the ability to search within any of our apps.

Internal UX research

I reached out to our UX research team to check for any prior research. Here are their key takeaways.

Not all applications (or users) are impacted to the same degree

Administration, on-boarding, dashboard & reporting and customer support have probably the greatest need
Task-oriented users: Users who visit the site with a specific task in mind have expressed disappointment when they can't efficiently complete their task without a search function

Limited accessibility: Users who rely on keyboard navigation or screen readers have found it time consuming to explore a application thoroughly without a search function
Comparison to competitors: Users have compared our applications to our competitors that offer search functionality, noting that those websites provide a more convenient experience
Perceived lack of quality: Some users have associated the absence of a search feature with a lack of effort or investment in improving the user experience
Negative perception: Lack of search functionality might be seen as outdated or less user-friendly, potentially contributing to an overall negative perception of the bank

With over 90 applications within the commercial bank, what are the known use cases?

I spoke with our Pioneer team's product owner to identify key use cases and determine which apps would benefit most from a search feature. After reviewing each app, here are my findings.

Global search has been one of the most requested new features
Administration — search for a user (post login)
Reports & Insights (Dashboards) — business intelligence and data visualization
Onboarding — during the process of integrating a new customer, there should be a quick way for them to find the information they need
Help and technical support
Inline search — search inside a data table or a user flow

What do our stakeholders think?

I interviewed our Pioneer team partners, including developers, content strategists, accessibility experts, app team designers and product owners from outside our immediate team. Below is a summary, but for complete details, please refer to the diagram.

App team design manager

Offer the user two distinct pathways for search.
- Go directly to a result
- Go to a landing page, then filter and sort or create a new search

App team designers

Pre-search filtering (scoped search) — Is this something we can offer? I believe it would be really useful, since our customers are power users

Development/technology leader

We’ve been aware of the need for search functionality, but it’s only now that we have the capability to move forward with development

Strategy/Content

Metadata — Will each journey (app) team be responsible for tagging content, removing duplicates, and ensuring proper schema markup?

Accessibility

Screen readers — we need to make sure we continue to support screen readers and tag content appropriately

App product owners

We suggest a simple off the shelf solution

stakeholder interview — all comments

Search flow

As a result of my discussions with partners, I determined that we need two search flows: one for navigating directly to a result and another for a landing page with multiple results.

Revision of the problem statement

Our customers need to quickly and confidently search for content in order to…

Be more productive
Reduce friction
Increase engagement
Decrease support calls
Onboard faster

Partner recommendations

General

Minimum viable product (MVP): Start with a light implementation (administration/search for a user), then add increased functionality over time (global search)
Global search: Suggest we implement a Google pattern because our customers are already familiar with that functionality
Ability for the user to go to a direct search result or landing page
Search should be able to access data from older databases

Content — Metadata

Users should be able to search across all content types
We must define the search categories
Optimize content for keywords
Ensure content is properly structured using standard HTML tags to mark up headings, paragraphs, lists, and other content elements
Descriptive URLs that include keywords related to the page's content
Remove duplicate content
Add descriptive meta information; title tags and meta descriptions to each page

Once search functionality is added to your app, each team should:

Ensure content is properly tagged and organized for easy indexing
Test search performance and relevance regularly
Monitor and resolve any duplicate or inaccurate results
Continuously update metadata and schema to maintain search quality
Conduct user research: Gain insights into how users are searching on your app and identify any issues that need to be addressed
Continuous Monitoring: Regularly monitor and gather user feedback even after implementing improvements. This ongoing process helps maintain the quality of the search functionality and address any emerging issues

Open questions

Will each team will maintain their own database?
Will the scope of search be limited to specific pages, sections of the site, or will it include all content?
Integration with existing systems: Should app teams be able to access data from other databases?
Will there be a impact on website speed or the need for additional server resources?

In conclusion, here are answers to the questions posed at the start of this sprint

Is the absence of a search feature a genuine issue for our users, or are we addressing a problem that may not exist?

The lack of a search component does affect the usability of our apps, however not all apps or users are affected to the same degree

With over 90 applications within the commercial bank, what are the known use cases?

Global search, administration, on-boarding, reports & insights, help and support, account lookup, inline search (search within a data table or flow)

What do our stakeholders think?

Full approval to move forward with reservations from our content partners

What problems do we need to overcome?

Do we have sufficient resources for to streamline our metadata?

Is our team aligned on the objective?

We are aligned, and I will create sketches of some examples during the second sprint.

Sprint 2: Develop

10 day deliverable

Deliveries for this sprint

Now that our team is aligned on the recommendations for developing a search component, I will take the following actions in this sprint:

What are search best practices?
How have our competitors solved this problem?
And, I will wireframe two common flows frequently used at the bank

Search best practice

Use autocomplete (keyword suggestions)
Differentiate between a typed query and the suggested (autocompleted) term
The user should have the option to either go directly to a search result or navigate to a landing page where they can filter and sort the results
When the user chooses to narrow the search (scope or filter) state the scope on the results page
Scoped search while valuable, can cause issues if users forget to reset the filter to "ALL" for subsequent searches
Global search — utilize a full search box positioned in the header to allow users to search across all content
Show a diverse set of results by including a scope in search suggestions
Correct for typos — automatically detect and suggest corrections for misspelled words in a user's search query

Search definitions

The competitive landscape

I conducted a competitive analysis to identify which search features are commonly used. I focused on other financial products and SaaS (Software as a Service) applications.

Scoped search (limiting a search to a specific type of content) is rarely used. This observation suggests that scoped search often leads to complications for users
Provide users with a straightforward search option that directs them to a landing page where they can further refine their search through filtering

Search features, Competitive landscape

Wireframe exploration — search for account number in a user flow

Wireframe exploration — gobal search

Conclusion

Based on my UX discovery, the Pioneer team has agreed that developing a search component would provide significant value for both our design partners and customers.

However, the main challenge to success lies in ensuring that the metadata is properly tagged.

2025 update

I continue to stay informed on search best practices and keep up with any new developments in the field.

Additional best practices for autocomplete

Show suggestions on focus to make users notice, for example related to recent searches, trending searches
Limit suggestions to about ten
Show scoped keyword suggestions — ratings, products, support, etc
Show the number of matches for each scope

Autocomplete is much more than keyword suggestions

Reassures users they are on the right path
Corrects for mispellings
Categorizes or scopes the results
Use type-ahead suggestions for appending

Landing page and filtering

Focus on the quality of the top three results for top 100 queries
When filters appear in the sidebar they cause layout shifts so users have to refocus everytime they use a filter

Decouple filtering from the results

Cluster the results by placing results within tab categories
Display user filter choices at top of the page

User behavior

Users dont explore results sequentially — pinball pattern, f-pattern, z-pattern
They form an impression of "all results" based on the top 10 suggestions
Results near the top have 10-20% chance of a click and a 40-80% chance of being seen
Top search result gets around 30% of clicks
Top 3 search results get around 60% of all clicks
Scoped results get results faster, but users overlook it or get lost
Visited search results should be marked appropriately
Users often navigate autocomplete results with a keyboard
Users rarely select exactly one filter

Source: Vitaly Friedman

Examples

British Museum — Go directly to a result or all results

Example of poor metadata

Shows results within Scope/categories

Shows the number of results within Scope/categories

LLoyds autocomplete and scoped

landing page — results clustered under tabs — tile 6 up or view all

landing page with filters applied

Avoid infinite scrool — accessability issues and users get lost

Show suggestions on focus

Show suggestions on focus

navigational query

navigational query

Scoped search

Scoped search

Scoped search

Scoped search