Inshorts is a news app that selects the latest and best news from multiple national and international sources and summarises them to present in a short and crisp 60 words or less format, personalised for you, in both, English or Hindi.
Making Stories Searchable
@ Inshorts, Lead UX Designer | 2016
The Problem
Since the app’s first release, our user base had grown rapidly — from majority of casual readers to a significant mix of casual + users who engaged with the app for longer and in more ‘depth’. Search became a consistently requested feature in the Playstore (& Appstore) reviews — the ability to search through older stories (or ‘shorts’ as they are referred in the app).
The team had purposefully avoided adding search in previous versions of the app because of the low amount of published stories per day. It did not justify the amount of effort it would take to make a decent search function. But as we started ramping up content production, the need for search became justified and necessary.
As we researched more we realised that the types of search results would keep changing and new types could be added later. So we needed a scalable solution which could accommodate different search types like videos, photo galleries, interviews, etc.
Users & Audience
We read a whole lot of app store reviews and conducted user interviews via email to discover some patterns in our user base. We found a chunk of our users spend much more time navigating, changing categories, and returning more frequently than the average user.
From the user interviews we found that these users could be classified as “research oriented” and “highly inquisitive”. Just reading the news was not enough for them. They wanted to know everything there was to know about a current event.
We wanted such users to spend more time on the app, have even more screen views per session and reduce their churn rate. And search could serve to be an excellent solution to engage them.
Following these basics, we decided that we would need to build two basic features — search for stories and search for topics.
A story could be a single ‘short’, video story, photo gallery, twitter story, etc. Searching for a story would solve the problem of the user who simply wants to find a story. A topic could be a person, place, event or any other general topic. Searching for a topic would provide new ways of browsing on our app to users who wanted to read up on a very specific topic only.
My Role
My role in the project was end to end delivery of the design solution (for both Android and iOS). From identifying the problems, creating wireframes, visual design, prototyping and transfer to technology team for implementation.
I took help from our data team to identify users who would be likely to use search, their behaviour while browsing the app etc. For e.g. we found that the rate of switching categories was higher of some users than that of other users.
I also regularly met with the technology team to understand the basics of the algorithms they would use to populate and sort the search results. The success of the search feature depended on how relevant the results were. And so it was important to let the developers empathise with the user’s perspective and take factors like recency vs relevance into account while making the rules to sort the results.
Constraints
Being a startup we had the usual constraints of time and development effort. But we did not compromise with the design or user experience of the feature. Also, we chose to be platform loyal but keep our brand identity similar on both platforms (iOS & Android). This meant to use native interactions but use visuals from our brand guidelines of the existing app.
Another constraint was to keep some of the existing elements of the app intact and familiar in use while introducing search. This meant to rearrange and change the position of elements to include search while maintaining their intuitiveness.
Design Process
We identified the problem statement clearly to start the design: to help users find a story and; to help users find a topic and read all the stories tagged with that topic. The design solution also needed to be scalable to address different result types in the future.
And along with all this to create comfort and delight for the user. For that we addressed a few basics: visual feedback, properly placed loaders and empty states/error states where ever required.
Old Design (wireframes)
On tapping the hamburger menu the screen came up from bottom. (which was an interaction problem that we fixed)
After experimenting with the layouts and design we finalised on the following —
New Designs (iOS) –
Positioning
Although search was being introduced as a new feature, we decided that we would not give a search field / button on the home screen of the app. Search would be used by a specific set of users who we classified as research oriented. So we decided to place it prominently in the “side” menu. To help the user know where search is we modified the hamburger icon to include a search icon.
We decided to replace the existing design of the side menu (categories / topics and settings) with a new design where search is prominent but the older elements are also given due importance.
Search lies to the left of the main feed view. It can be accessed by swiping right from the main feed. This provides easy access to search, settings and categories.
Components
Recent Searches
Tapping on the search box leads the user to the search flow. The first screen of the search flow is Recent Searches to help the user quickly choose his search term from his history. There is a “Clear All” button to help the user erase search terms from this history if he/she so wishes to.
Auto Suggestions
Typing in the search box starts populating the auto suggestions below. These auto suggestions are based on the keyword match of the search string and other related terms to that string.
Search Results
The results are presented in a tabbed structure, with Shorts and Topics being the two tabs. The user can swipe between the tabs making it easy to reach to the other tab. There is also the possibility of adding more tabs in the future for better segregation of different result types.
Error Handling
Always informing the user of what’s wrong and presenting an action that they can take right there (“Retry” button in the above example) go a long way into creating delight as well as a sense of control.
Aftermath
Launching search was a major step towards making Inshorts a mature app which suited a varied user base such as ours. We learnt a lot about the times when users search, and the patterns with-respect-to current happenings. We also received a slew of positive user reviews that were happy from the feature.
As with any feature in a growing app, Inshorts continues to learn and improve the experience of searching stories and would add faster/simpler/easier ways to get what you are looking for.
Thanks for reading.
