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

 

Situation

Our technology partners have the bandwidth to develop a search component and our internal research has shown that this could be a huge benefit to our customers.

Task

  • Should our team commit resources to developing a search component?
  • What are the use cases?
  • What might a search flow look like?

Action/design process

  • Discovery, sprint 1: Define the problem, review internal research, interview stakeholders, document use cases and recommendations.
  • Exploration, sprint 2: Conduct comparative and competitive analysis and wireframe some use cases.

Result

  • The team reached a consensus that incorporating a search component would be highly beneficial for both our design partners and customers.
  • We've compiled a set of recommendations for next steps, along with a series of wireframe examples that align with industry 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

Sprint 1: Discovery

10 day deliverable

In the course of this sprint, I'll be tackling the following questions.

Summarized responses are highlighted in bold.

Is this a problem for our users; or a created solution to a non existing problem What are the known use cases? What do our stakeholders think? What problems do we need to overcome? Does our team align on the objective? Yes Are we a go/no-go?

Problem statement

Our customers cannot search within any of our apps.

Internal research

I reached out to a research team here at the bank to see if they had conducted prior research on search. These are the key takeaways

  • Not all users or applications are impacted to the same degree
  • Administration, on-boarding and customer support: 57% of these users have expressed frustration when they are unable to locate specific information, products, or resources quickly
  • Frustration for 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
  • The recommendation is for each application team to conduct their own user research

What are the known use cases for search?

  • Global search
  • Administration — search for a user (post login)
  • On-boarding
  • Reports & Insights — business intelligence and data visualization
  • Help and support
  • Account lookup
  • Inline search; Search inside a data table

Stakeholder interviews — summary


Journey team design manager

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

Journey team designer

  • Pre search filtering — can we offer this functionality because I think it would be useful for app customers?

Technology leader

  • Foundations — We have put the functionality in place and are ready to do this.

Strategy/Content

  • Tagging content — Will each journey team be in charge of this?

Accessibility

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

Product

  • Customer Support: Applications offering customer support or helpdesk services can integrate search to enable users to quickly find relevant articles, FAQs, or troubleshooting guides.

Search flow

Revision of the problem statement

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

Partner recommendations

General

Content

  • Descriptive URLs that include keywords related to the page's content
  • Remove duplicate content
  • Add alt text to images to provide a text description of the image
  • Add descriptive meta information; title tags and meta descriptions to each page

Before adding search to your app, each team should

  • Conduct user research: Gain insights into how users are searching on your app and identify any issues that need to be addressed
  • Iteration and Analysis: After the study, analyze the collected data to identify patterns and trends. Look for areas of improvement, such as confusing UI elements, misleading search results, or slow performance
  • Validation and Iteration: If possible, implement the recommended changes and conduct follow-up usability testing to validate the improvements. This iterative process helps ensure that the changes have a positive impact on the user experience
  • 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?

Sprint 2: Exploration

10 day deliverable

During this sprint

Now our team is aligned on a set of recommendations I will answer the following questions

Then I will brainstorm a series of solutions for search.

Search best practice

  • Use search suggestions (autocomplete)
  • Differentiate between Typed Query Text and Suggested Term
  • The majority of people will do a simple search with one or two search terms
  • The user should be able to go directly to a chosen result or a landing page where they can filter the search or conduct a new one
  • When the user chooses to narrow the search (scope or filter) state the scope on the results page
  • Advanced (scoped) search can lead a user into trouble as they invariability use it wrong
  • If advanced search is offered set default scope to all
  • Global search — use a full search box in header

  • Include Scope in Search Suggestions
  • Consider but hide in Mobile: Category pages, Product-detail pages, Resources/articles
  • Pick an appropriate term, which will show users good results, rather than making up a query which might have no results or poor results
  • Avoid typos, because users don’t need to type out the entire query themselves

Competitive landscape

I carried out a competitive and comparative analysis to identify which search features are being commonly utilized.

I concluded

  • Advanced search (initial search with filtering options) is seldom used. This observation seems to support the notion that advanced search features often leads users into complications.
  • It's advisable to provide users with a straightforward search option that directs them to a landing page where they can further refine their search through filtering.

Inline search wireframe

Global search wireframe

Conclusion

The team reached a consensus that incorporating a search component would be highly beneficial for both our design partners and customers.

We've compiled a set of recommendations for next steps, along with a series of wireframe examples that align with industry best practices.