Portfolio of Suvo Ray
Design, Art, Type and everything in between
On the 4th of October 2021, we went live world wide with a major revamp of Microsoft Teams Search. Anyone familiar with Teams, will notice that one of the principally significant alterations is that of the visual design. We went from a left-right model to a consumption model of Search that can scale as required. Therefore, one of the primary responsibilities for me was to do the visual design and define a scalable framework for Teams Search. Hence, in this article, I will discuss my take on the visual design and the associated aspect of framework.
It is on a regular scale that millions of customers interact with Search to accomplish their quotidian tasks. These interactions create millions of data points that frequently slip from the memory of the customers. And it is oftentimes that customers need to navigate to such old data, a process that can prove to be time consuming and thereby a hindrance to speedy productivity. That is why we present to you, Teams Search that helps in directing to such old data points quickly and efficiently.
With a user base of 250 million, we knew that something like a pixel change could prove to be largely detrimental to customer experience. But with the increasing need of scalability, it was upon us to take the risk to redefine Search. The Search framework we had operating before, was a left-right model. This model required customers to consume and take action on a required item at the very moment. But with the rise in the number of apps on Teams, this model failed to be scalable anymore with more search results. It was because of this that the decision to shift to a consumption model of search page was eventually realized.
We wanted customers to have effective collaboration while also giving back some time to them. It was a requisite that customers were able to locate things rapidly, and take necessary actions on them as well. With this consumption model, we also experimented with the element of Preview, wherein clicking on a chat and channel message, it first expands to show more preview of the message. The entire visual design is then based on these principles of quick consumption and navigation from search. Less time spent on the SERP page is equivalent to a greater success of this design.
After several iterations and review this is the final design that we all agreed to ship. Since there is an All page in Search where we showcase all the combination of results, all the SERP results follow a similar structure. This is imagined like the rings in a tree, where each ring might look similar but hold different meta data of information. The card structure is similar to that, where each card holds varied information from different apps but visually follows the same structure.
We wanted customers to be sure before navigating to a destination, and to enable that quickly the Preview was introduced. On a single click of the search cards, the cards expand to show more preview related to that content. In case of messages, we show reply for files and we show larger thumbnail with more content.
We utilized the cards above to design the search pages. Below are the designs for different pages of Search and its respective domains:
Filters are used to dive deep into any result and find something very specific and guide the search process. Each domain has their own filter which helps a customer to delve further into a specific result. Search All Pages does not have any filter yet. Below are the examples of the filters that are there on each domain page:
One of the key responsibilities, was to design a scalable framework and a search library which can be used by other designers and teams. Below is a preview of the few components that I have designed:
Below are the mock-ups of the improvement that we did:
I’m aware that I’m supposed to talk about numbers in general, but on a personal level that was never my goal while working on this project. Also, in Microsoft the design is never entirely finalized as we actively work and improve it in accordance with our customer needs, so as to dish out the best possible user experience. The visual enhancement was made to considerably augment a good user experience and make Teams calendar more captivating for customers. Microsoft Teams currently has a monthly estimate of 250 million active customers and a daily estimate of 145 million active customers. At Teams, we are just only getting started.
Visual design & framework: Suvo Ray
Creative director: Colin Day
UX engineer: Vitthal Roonwal
UX lead: Chad Voss, Ajay Prasad, Sandesh Halarnkar
UX designer: Gaurang Gupta
Research: Sonam Singh, Pradeep Setty
Icons: Fluent Icons
Reviewer & contributors: Mark Swift, Daisy Geng, Sumit Sinha, Prerna Pradeep, Suryakant Gokhale, Jayawant Tewari (JT), Deepak Menon, Justin George and many others
PM: Hari Sudhakar, Raja Mohan, Udai Singh, Guru Ranganathan
