An Overview
Refiners (also known as filters) allow users to scope down their email results to a smaller set. Our goal was to help users find what they are looking for more quickly and easily.
Here is an image of the terminology and how technology and design intersect.
Audience
Internal Microsoft users and testers.
My Role
UX/UI Designer, I designed the library, interactions, and the refiner prototypes
Deliverables
- The ability for users to refine their search results using filters.
The Challenge
How might we empower users to stay in their workflow and quickly find what they are looking for during a search?
- Plan what filters are most used to display
- Design pills and interactions following Microsoft Fluent UI patterns
- SERP display correct search results on SERP (Search Results Page)
The Solution
- Intelligence while displaying correct results from the backend on the engineering side
- Precision of the refiners pills/filters suggestions will narrow the search
- Parity to match with mobile patterns
Background
Upon discovery, we understood the market and its current users and past experiments from looking at previous testing
RESEARCH OF PAST EXPERIMENTS / PARITY
A problem was that OWA ran a static refiners experiment that failed because users were not finding results (regressing search success rate). Our goal with dynamic refiners was to improve on that experience.
In Mobile
- Parity has a dynamic refiners experience that was currently in an experiment which we were prioritizing maintaining parity with. So far we had taken learnings from their usage dashboards and were waiting on a triggered scorecard to understand more.
In Gmail
- Gmail has a large number of dynamic refiners, including things like types of files, excluding Social and Promotional emails.
Persona
Targeted User
Design Process
Exploring different design concepts
How users engage with their search tools is by familiarity — they are used to the blue new mail button being in the left-hand corner, with the sideways L shape for the mail layout — what changes is the pills in the bar directly under the ribbons. In some of these explorations, the pill design is changed, the location of the refiners and a few small features are added and removed including:
• Submit a search feedback line, with the time it took to search for a query.
• The 'ribbon' changed (actions: delete, archive, sweep...etc.) depending on a user's mouse location and if a mail item was selected.
• Pill designs to match Teams patterns.
Usability Testing
Research methods + insights gained
Outcomes
When presented to stakeholders and customers, it received praise and the lead PM said the team worked well and “finished each other’s sentences.” For the next steps, the button colors can be altered depending on the states, (a two-touch target button) and the refiners can be put into the search box. (Users want filters closer to the search box).
Prototype
GIF - Just one interaction
Impact
Refiners were approved and liked by stakeholders. There was more iteration to be done, including competitive and comparative analysis which I started. However, when I left Microsoft, it was passed on to two designers to continue to iterate and bring the refiner pills closer and into the search box at the top of the Outlook page.
Reflection
I learned a great deal working on Outlook Search. I learned about power users of Outlook and how they were familiar with typing in specific queries to find their intended query. As well as users who used multiple businesses' email software for various needs. Some users only used Outlook for work, and another brand for other needs.
It's a robust system that users are happy with some if sometimes they lose items. They were most frustrated if they lost a file or contact, while in their workflow. Helping users narrate their search with relevant refiners/filters is what my goal was with this project.
