Menu

Search stories

Short News App

News Shorts is a news app that selects the latest and best news from multiple sources worldwide and summarises down into short readable chunks which will take the users around 30 seconds or less to read.


The Problem

Since beta testing the application, users who have had access to the application have enjoyed using it with consistent usage due to the time saving aspect. A common feedback that was often mentioned during the beta testing was the ability to search for stories using search terminology and keywords.

Not having the ability to search meant users would have to use categories and scroll until eventually they found a related story to which they were looking for. This caused issues for the readers as not only is this not common practice but also many searches can fit into more than one category meaning users would be confused to where they should look and if the user was only looking for a specific story not having a search could cause frustration.


Users & Audience

In order to gather feedback I conducted user interviews to spot a correlation in the feedback with the ability to not be able to search being a huge frustration to users. The findings showed that a majority of our users spent a some more than average time navigating, switching between categories, and the reason for this is looking for specific stories.

From the user interviews carried out it became evident that majority of the users using the app users could be classified as “avid researchers”, as they wanted to find out the latest and everything about a specific topic / story.

As the findings showed an apparent problem on the app this clearly needed to be addressed in order to grow the user base through continuous improvements, better feedback, and by wanted those current users to spend more time on the app, and evidentially decrease the chances of churn rates which introducing a search could be the what is needed to fulfil these.

In terms of the finding on the research having the ability to search for a story would solve the problem of the user who simply wants look at a specific topic / story. A topic could be a variety of things from specific keywords, a person, an object, a place, an event or any other general topic and so on, and having the ability to search for a topic would provide a way of browsing the app to users who wanted to read up on a specific topic.


My Role

My role in the project was end to end delivery of the design and user experience solution for both iOS and Android platform. This involved identifying problem/s, conducting research (where necessary), creating wireframes, visual design, and prototyping making sure all aspects are ready for implementation.


Constraints

Being a startup meant having constraints of wearing multiple hats in order to deliver this feature but this didn’t compromise with the research, quality of the design or user experience of the feature. As a startup when designing the end-to-end journey of the app the guidelines to have compatibility on both iOS & Android platform was incorporated to work like to like on both platforms keeping the brand’s identity consistent. In order to also keep this in line with the UI meant using native interactions and following the brand guidelines of the existing app.


Design

I had identified the problem statement clearly in order to initiate the design which was to ‘to help users find a story / topic’ based on keywords that are entered in the search. The solution to the design needed to be scalable to address different result types in the future whilst ensuring it was easy to use and even someone with who isn’t very tech savvy is able to navigate their way from searching to viewing the search results.

The design was kept in line with the app’s current brand guidelines in terms of the UI. Along with this to create comfort and delight for the user I addressed a few general elements from visual aesthetics, navigation, and error handling where required and making sure quality and experience is not affected.


Old Design

On tapping the discover navigation button on the top left corner of the screen the screen pushed up from the top which was an interaction problem that was fixed to push the screen to the left revealing the discover screen.

Completing a flow analysis of how the new feature will work and experimenting with different screen layouts and several rounds of testing I finalised the following:


New Design

Although search was being introduced as a new feature, I decided that we would not give a search field on the home screen of the app due to possible causes of visual proximity, and practicality as those casual readers may use this feature. The search feature would be used by a specific set of users who we classified as ‘avid researchers’ on a specific story / topic deciding to place it in the top of the discover page.

The search feature will work in terms of when a user does a search this will find all related stories based on keywords entered and display them in a list form with consisting of the story title and underneath that how long ago was it posted, on the left of these there will be an image that spans both columns.

Search lies on the top of the discover page. It can be accessed by clicking on the discover button located on the top left corner or swiping right from the news feed page. This provides easy access to search as it is also located in the same page as the categories.


Components


Recent searches & Auto Suggestions

On tapping on the search box the user will be presented with ‘Recent Searches’ to help user choose from their search term in the case they would like to continue searching for past search terms. Along with the ‘Recent Searches’ the user will be presented with a “Clear All” button located on the top right aligned with the Recent Searches heading in the case user wants to clear their past searches.

Alongside this when user starts typing in the search box this starts populating auto suggestions below which the user can select from (similar to most search engines). These auto suggestions are based on the keyword match of the search string and possibly other related terms to that string.


Search results

The results are presented in a list structure with all related searches appearing from most recent on the top to the oldest towards the bottom of the list. The user can read full story of a returned search by tapping on any story. They user can also swipe between the stories once one of the stories is full feed is showing and swiping up will take them through the story feeds without the need to needing to constantly go back to the search result making the user experience as simple and intuitive as possible.


Error handling

At times when searching users can face error handling where something could be causing an issue with getting back a search result, such as bad internet connection. The app will inform the user that something isn’t right by displaying a page with this message and presenting an action that they can try such as “Retry” button (shown in the example below) go a long way into creating delight as well as a sense of control.


Outcomes

Launching the search feature was a major step towards making News Shorts a more advanced app and product future suiting a diverse set of readers which amongst other users we previously described as “avid researchers”. The feedback after the launch was hugely positive with users feeding back that the feature has simply up taken the users experience by allowing them to simply do a quick search of what they needed which proved somewhat hard previously to find those articles as they would have to go through various categories in a trial and test manner.

Since the launch for the search feature there were a significant percentage of users who has increased screen time on the app which many folded after those users initiated a search which validated our hypothesis that it would lead to those “avid researcher” spending more time on the app.

For me building the search feature was a great learning experience in designing a feature in-depth and paying attention to details so that end users get a refined experience. As with any feature in a startup, News Shorts continues to learn and improve the experience of searching stories and will be adding new ways to get news you are looking for.


Related links to project:
Click here to see UI presentation
Click here to see iPhone Clay Designs (Dark)


Back to portfolio Next