small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

Published on <a href="http://ift.tt/2nwb9d7">| Prototyping: From UX to Front End &mdash; Medium</a> graceychen 
The search box — it’s the first thing many of us turn to when we can’t find information we need on a website or app. In some cases, it is the only way to navigate to specific information, such as when looking for someone on social media who is not within your network of connections.
When designing for an effective and efficient search, we can ask ourselves two questions:
<ul>
<li>What is the user’s purpose for using the search functionality?</li>
<li>Within a set of search results, would the user prefer to see any particular subset over others?</li>
</ul>
<h3>CASE STUDY: AIRFROV</h3>
The following views and wireframes of the redesigned search feature are my own. They do not necessarily reflect the views of Airfrov.
<h4>A daunting search?</h4>
Airfrov is a platform that connects travellers to people who want to buy products from overseas, which are either not available online, or would incur exorbitant delivery charges.
The platform allows users to post requests for items from any country, as well as travellers to post recommendations of items they could help purchase. With the large (and growing) number of posts, a search functionality would likely be useful.
<img alt="" src="http://ift.tt/2niC8HG">Airfrov’s search feature currently has four layers of filters
<a href="http://ift.tt/2nhnT5N">The Airfrov website has a dedicated search page</a> where users can:
<ol>
<li>Filter using Category tags</li>
<li>Apply search filters to limit keyword search within a specific set of data (requests, recommendations, users, or countries)</li>
<li>If looking under Requests or Recommendations, apply or change filters (request/recommendation, country, or category)</li>
<li>If looking under Requests, filter by Status (open, offered, accepted or completed)</li>
</ol>
Users are faced with four layers of filters at once, making Search seem unnecessarily complicated. Can Airfrov&#8217;s search feature be designed in a way that is more intuitive and effective?
<h3>1. Search has to be purposeful</h3>
<blockquote>What is the user&#8217;s purpose for using Search?</blockquote>
Let&#8217;s begin by examining the motivations of two user groups* on Airfrov — &#8221;travellers&#8221; and &#8220;potential requesters&#8221;, using the <a href="http://ift.tt/2dhnZct">Jobs To Be Done framework</a>.
* &#8220;Active requesters&#8221; have to wait for travellers to make an offer — the platform currently does not allow them to invite specific travellers to fulfil requests, hence I did not consider active requesters as a target user of the search feature.
<img alt="" src="http://ift.tt/2nClYMu"><img alt="" src="http://ift.tt/2nivf9m"><img alt="" src="http://ift.tt/2nCknGx">
In the job personas illustrated above, Mich and Lil represent “travellers”, while Zee represents “potential requester”.
From the job personas, we can identify the following purposes of Search:
<ul>
<li>Mich’s purpose is to find an Open Request in a specific Country.</li>
<li>Lil&#8217;s purpose is to find a Request or Recommendation in a specific Country.</li>
<li>Zee&#8217;s purpose is to find a Request or Recommendation.</li>
</ul>
The user flows can be visualised as zooming into different data sets (diagram below). This would help us organise and prioritise the data sets when we redesign the search feature.
<img alt="" src="http://ift.tt/2niKFu8">Zooming into data sets
<h3>2. After identifying purpose, consider user preferences</h3>
<blockquote>Within the search results, would the user prefer to see any particular type over others?</blockquote>
Filters allow users to narrow down their search and zoom in to what is most relevant, according to individual preferences. Take Mich for example: if Mich was a single guy, he might not be so keen to help purchase items in categories like &#8220;Ladies&#8217; Fashion&#8221; or &#8220;Mums and Babies&#8221;. But it would be a different story if Mich was a middle-aged woman. Category could be a useful filter for all three personas — if all items fit nicely into one category or another.
In additional to Category, other preferences that we might consider are*:
<ul>
<li>Country — Zee may not be travelling anywhere, but they might have preference for items from only certain countries.</li>
<li>Type of post — As Lil is interested in the latest products, they might want to look at Recommendations by travellers who might have first dibs on what&#8217;s available around the world.</li>
<li>Status of Requests — After looking at Open Requests, Mich might want to check out Accepted or Completed Requests for the same item, to decide how much they should offer to buy an item for.</li>
</ul>
*As this is only a design exercise, user interviews were not conducted to discover real user preferences.
<h4>FILTERS COME IN MANY FORMS</h4>
To design the filters for efficiency, it is useful to consider the types of data sets involved in the search functionality: Are they finite or infinite? Is a finite set small enough to fit onto a mobile screen, or will users be forced to scroll through a list that seems to go on forever?
<img alt="" src="http://ift.tt/2nCsvHj">Examining the data sets involved in Airfrov’s search functionality
What are some forms of filters we could consider for finite and infinite sets, and for finite sets of different sizes?
<h4>“Invisible” filters</h4>
A search box can be smart enough to have filters applied automatically to search queries, showing results only from the most relevant data set(s). An example is LinkedIn&#8217;s mobile website , which allows you to search for &#8220;people, jobs, posts, and more…&#8221; in one search box.
This removes the need for users to apply a search filter first, in order to search within a specific data set, as what is happening on the Airfrov and Couchsurfing websites.
<img alt="" src="http://ift.tt/2niKDm0">LinkedIn’s smart search box (left), vs Couchsurfing’s search filters (right)
Smart search boxes can also come with auto-complete or auto-suggest, making it especially useful for very large or infinite sets of data (such as countries or unique items), as users would not have to manually select from long lists.
<h4>“Checklist” filters</h4>
Checklist filters are what we commonly have in mind when we think of filters — a list of options that we can select from. They are useful for small to moderately-sized, finite sets with non-mutually exclusive choices.
<h4>“View” filters</h4>
Modes function like “view” filters since they allow users to toggle among different subsets of results, without having to input anything different. They commonly appear as tabs in search features on mobile apps.
<img alt="" src="http://ift.tt/2nCyStT">Search feature with tabs: (left to right) Airfrov app, Instagram app, LinkedIn app
&#8220;Mode tabs&#8221;, as I shall call them, is most suitable for filtering a set when:
<ul>
<li>Number of subsets is fewer than five</li>
<li>Subsets are mutually exclusive</li>
</ul>
So looking at the data sets again, we could possibly apply the various forms of filters as shown below:
<img alt="" src="http://ift.tt/2niJk6o">
<h3>Putting it all together</h3>
Taking into consideration business impact, we would design for Mich as the primary user of the search feature, since Lil is using the platform for their own research, and Zee is only browsing.
The following wireframes show a proposal for the Airfrov website&#8217;s search feature, designed with all three user flows in mind, with Mich&#8217;s as the priority.
<img alt="" src="http://ift.tt/2nCsvXP"><img alt="" src="http://ift.tt/2niNtYj">Left to right: Results of search query, checklist filters, and results of applying a checklist filter
What will help Mich achieve their purpose:
<ul>
<li>Tabs to toggle between Requests and Recommendations, with &#8220;Requests&#8221; as the default mode</li>
<li>A smart search box that allows them to search for an item or country directly</li>
</ul>
What will help Mich satisfy their preference:
<ul>
<li>Lightbox with checklist filters that appear only upon clicking on the Filter button (Status of Requests only appear under &#8220;Requests&#8221; mode)</li>
</ul>
<h3>Thank you for reading</h3>
Feel free to leave some thoughts on how to design for a better Search experience 🙂
<img src="http://ift.tt/2nCeid4" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2niLIdB">Designing for an effective, efficient Search: consider user purpose &amp; preference</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Designing for an effective, efficient Search: consider user purpose & preference

Designing for an effective, efficient Search: consider user purpose & preference

Top Stories