Christian Brennan

Give us a ring

The simple life is for me out here in Brunswick, Maryland. Give me a shout sometime and let's talk shop.

Reach out


tomfoolery


  • Instragram img
  • Instragram img
  • Instragram img
  • Instragram img
  • Instragram img
  • Instragram img

Universal Search

For some time our clients at Personify have been asking about universal search capabilities, but it was one of our larger ones that provided the motivation for us to move in this direction. The initial implementation will query results based off of exhibitors, products or sessions data that our clients have imported into the A2Z Events system.
  • Client:

    Personify is the market-leading Constituent Management & Engagement (CME) platform. They also have a robust events platform, 365 community and a membership management software for emerging nonprofits.

  • User Personas:

    Ellen: (36) is strong, proud co-owner of a craft brewery in Portland, OR.

    Sam: (24) is a marketing coordinator for a non-profit organization with a focus on mental health.

  • Tools:

    Mac OS X, Sketch, inVision, Zeplin, Visual Studio Code, HTML5, Bootstrap, CSS3

Problem Statement:

Event attendees with limited time on their hands may struggle to quickly find access to exhibitor leads and a basic schedule on show websites. Sometimes show organizers will unintentionally bury links such as an exhibitor list, profiles, sessions and speakers deep into the navigation, creating a unreliable user experience.


Demographics:
Fly-Fishing Signup Form
Fly-Fishing Signup Form
My Responsibilities:

User Research | UX Design | UI Design | Frontend Development

I collected all user research, developed personas and stories, created wireframes, prototypes for A/B testing, built out the static HTML/CSS for the UI. Finally, I worked closely with our R&D team of engineers to ship a solution that was light-weight, accessible and useful for our constituents.

Users and Key Players:

Personify A2Z Events cloud-based software is purchased by a trade show manager. It is then deployed by a TSA (Technical Solution Architect). A dedicated (PM) Project Manager will deliver all Global Admin and public site url's for show managers and teams to login and begin their training in the system.

To be shipped production, the finalized version needs to be configurable, as in (toggle on or off) and it needed to be able to be implemented on any client site, including custom builds from my Design team.

  • Attendees - The end users actually browsing the event site.
  • Show Managers - The implementation needed to work for all clients across the board.
  • Project Managers - Being able to easily configure Universal Search on or off and train clients on how to do it as well.
  • Design Team - The solution needed to be accessible and customizable for some of our higher-tier client relationships.
  • Sales Team - Sales needed to be able to speak on how robust, effective and simple it was to configure in Global Admin.

Research and Inspiration

I researched who was doing search right, wrong and in-between.

Once we identified our personas, goals and had a solid outline we fleshed out the user's journey and created a story to showcase what that would look like.

Inspiration came from various places listed below. A simple Pinterest or codepen search will find you a million different UI's for universal search. Some slick and animated and some minimal and avant garde. We ultimately ended up going with Nielsen Norman Group's recommendations of "visibility and simplicity."

  • Azure Cognitive Search link
  • algolia search link
  • UX for search 101 link
  • Best UX practices for search inputs link
  • Designing Search Suggestions link
  • Search: Visible and Simple link

Ideation

Doing the bull-dance, feeling the flow.

​Together with our director of product, 2 engineers from our R&D team and a small group of project managers that heavily use the entire system on a daily basis, we met twice on Zoom calls to walk through the user stories and research I had developed.

​Using a paired down version of Design Thinking, we were able to define our problem statement, ideate using sketching and the brainstorming technique to determine exactly what we wanted to focus on the most. The 2 options decided on playing with were:

  • A basic implementation that would only search exhibitor data. This would have been the easiest route.
  • The advanced (v1) version we ultimately ended up going with would query the database for exhibitors, products and session results.

Next steps were translating the really low-fi sketches to actual wireframes using the Sketch and inVision workflow for internal review. From there we moved on fleshing out a fully designed prototype that we would share with internal stakeholders, a small, confidential set of clients and our product team.


Additional Highlights

Overview:

​Everything from how the H1 query title, the larger landing page search input, the results queries, filter pills and content hierarchy was condidered. See below some of the thoughts that went into all of it.

Not only did the color scheme have to fit with our internal, established brand and design system, but it had to be universal enough to plug in to our base or highly-customized client event sites.

So there were certainly folks that wanted to go with a more modern, even animated approach to the input UI. Specifically some of our clients. It's easy to get distracted with shiny objects, but standards and industry best practices won the day.

Search results needed to not only be accurate, but they needed to be legible. And easy for users to fine tune results. Everything that was implemented was based off a human-centered approach that took the thinking out of the UX.

Scroll down to view the recordings

Wireframing

Prototyping + Production