Navigation Overhaul
USABILITY RESEARCH ・ UI/UX DESIGN・ PRODUCT MANAGEMENT
About Lokal
01
Lokal is building the internet for the next billion regional language users in India. Lokal's Android app is a one-stop platform for hyperlocal news, jobs, matrimonials, classifieds, buy and sell, and community-based solutions. The app interface and regional content is available in 8 vernacular languages - Telugu, Tamil, Malayalam, Kannada, Marathi, Gujarati, Bengali and Punjabi.
Info
00
Organization
Role
Product Design Lead
Product Manager
Next Billion Users (NBU) is a term coined by Google in 2017, for the segment of users coming online for the first time across the world. These are people in tier 2 and tier 3 regions of developing nations. Having recently gained access to the internet due to the advent of cheap data plans and rural penetration of smartphones, they find themselves lost in an online space created exclusively for English-speaking, city-dwelling users. Even the vernacular language content they have access to is not relevant to their immediate surroundings but is based entirely in an urban context. In his recent piece One Hundred Indias and the Lure of Lokal, Mithun Madhusudhan explains how apps like Lokal are paving the way for making the internet accessible to this vast segment of remote users.
Timeline
Dec 2021 - May 2022
Skills
UX Research
Prototyping
UI/UX Design
Usability Testing
Iconography
UX Writing
Agile Product Development
Roadmapping
Problem
02
Why did we need a new way to navigate the app?
While majority of Lokal users used the app for local news, Jobs was a close second use case, followed by Matrimony, and then others. However, retention of newly acquired users from the Jobs, Matrimony and others cohort is far lower than that of News users. One key reason being that it is very difficult for a new user to find jobs, matrimony and other sections on the app.
Some backstory: When the first MVP of Lokal app was built in 2018, it was created keeping in mind only one use case - local news. Eventually, local jobs were introduced, followed shortly by matrimonials. As we kept adding new use cases, the information architecture of the app became a patchwork of products, while the core navigation structure remained that of a news app.
As the business intended to scale exponentially from non-news use cases in the coming year, it became imperative for us to redesign the app's information architecture. The business strategy required us to change our brand image from 'news app' to 'one-stop solution for all hyperlocal needs'.
Old Navigation
Stages of Redesign
03
Click on one to know more.
Research
04
Primary Research
Research Questions & Methods
-
Why do users use Lokal?
-
Where else do they consume local information?
-
How well do they know about Lokal Services?
-
Do users who don't know about Services on Lokal app have any interest in using such services?
Pilot interview to improve the quality of questions to be asked in survey​
​Survey with 700+ users from 5 languages
​Follow up calls with 10 survey respondents
-
Which interactions or components are users most comfortable with?
-
How do they currently navigate to the less accessible sections?
Data analysis of user flows using Mixpanel
In-person moderated usability studies with 20 users in Tamil language.
Primary Research Insights
01
Lack of awareness about non-news local services on the app
​
Less than 50 out of the 700 users surveyed knew about at least one Lokal Service
02
Interest in non-news local services​
-
35% of users who didn't know about services on Lokal app said they were either already using other channels to avail these services or would be interested in jobs/ matrimony listings to share with people they know
-
Local news, local jobs and local prices of produce/ fuel/ precious metals are the most sought-after use cases
-
Local newspaper, Friends & family, Whatsapp/Telegram groups are the major sources of information for users who don't avail these services on Lokal app
03
Major usability issues making it difficult to discover non-news local services
​
-
Content categorizations in the app (eg. Jobs, Matrimony, Buy & Sell grouped under Local Services, or vegetable prices, gold rates under Local info) do not match users' mental models
-
Microcopies (Page titles, CTAs, category names) are often misleading or lengthy
-
Some users tried using the submission categories - that appear when the + icon (upload button) is tapped - to navigate to services like Jobs, Buy & Sell etc
-
Most users completely ignored the Bento grids at the top of the Lokal Services tab - users might be relating the shiny gradients to ads seen on other platforms
-
After navigating to a nested page, users are confused for a while as to where they have arrived - until they scroll down and read the posts
04
Other observations about usability preferences
​
-
Users are more comfortable with a simple vertical scroll than navigating to multiple sections
-
When asked to look for a specific type of content, most users tried to look for a Search option
User Personas
USER FLOW
USER FLOW
USER FLOW
USER FLOW
Competitor Analysis
01
Nudging user to discover more categories (Koo)
Once user lands on the homepage (first category), a red dot beacon appears on the second category - to draw the user’s attention to the next feed they should explore. This beacon moves to the next category once user goes to the one that is highlighted. It keeps moving till user has visited all categories
03
FTUE animations on core action buttons (Vokal, Koo)
Vokal animates the mic button to encourage users to ask a question. Koo animates the Koo button as well as a button in a repeated mid-feed nudge that says “Follow top 50 Koo creators now”, encouraging the core social media behaviours of creating and following
02
Personalized navigation based on interests selected by user (Sharechat)
​
The first two categories in the Home tab are Following and Popular. After Popular feed, a list of categories are added to the navigation based on the interests user selects. For discovery of the remaining categories, sharechat relies heavily on the Explore tab, and their teams have specific KPIs for engagement on that tab
04
Dual horizontal navigation bars - top and bottom (Vokal, Koo, Sharechat, Dailyhunt, Pratilipi)
Most NBU content apps seem to be following the same navigation patterns of a primary bottom navigation and a secondary top navigation. Need to better understand why they all follow this.
Design
05
Brief
Redesign the app to help users discover all available content categories and services, allowing them to navigate to their desired pages with low effort and high conviction.
Design Sprint
Keeping in mind this design brief and the insights from primary and secondary research, I led a 5-day design sprint in collaboration with our senior product designer. The idea was to start generating ideas with wild abandon, and gradually build up to feasible solutions. In the first 3 days of the sprint, we wire-framed several possible navigation styles, iteratively improving our explorations over the course of 4 feedback sessions with the product team. Gathering learnings from these sessions, we spent the next two days creating two high fidelity prototypes for user acceptability testing.
Exploratory Wireframes
01
The No Navigation Navigation
A hyper-personalised single feed navigation a la popular social media apps like Facebook or Instagram. No tabs, no categories, just endless scrolling. Sounded like usability heaven, but such an IA could only be implemented after gaining considerable conviction in our personalization algorithms through rigorous experimentation. Given that our existing feeds had barely any personalization, this exploration was quickly parked as a far-fetched future possibility.
COLD START FEED
PERSONALIZED FEED
03
New Tabs
​
A wild idea, this exploration suggested providing a glimpse of all categories on the Home page, and creating a 'new tab' each time a user explored a new category. The tab would remain open until the user chose to close it, like in a browser. This was shot down because of the inevitable confusion that would arise when a user left too many tabs open, and also simply because the team had zero conviction that users would be able to form clear mental models about the idea of content categories as browser tabs.
HOMEPAGE - MENU
CATEGORY TAB
05
Summarise, Sample, Scroll
​
Offering prime real estate to a search bar and a personalized menu of categories catering to the users' interests, this iteration proposed a home feed that summarises all relevant content in the homefeed. As the user scrolls, they would come across samples of content inviting them to discover other categories. This was also the first iteration to propose moving the Profile and Notification page entry points from the top nav bar to the bottom nav bar to ease users' cognitive load.
02
For You, Near You & Everything Else
This one took a combined approach of a personalized everything-feed along with a geographically filtered feed that combined local information (like commodity prices) with local news. The idea of an 'Explore' or 'Search' page was introduced in this wireframe, proposing a page whose sole purpose would be to present all the categories of content and services to the user in one place - a page meant to be used only for navigation and discoverability.
HOME TAB
EXPLORE TAB
04
Voice It!
​
A single feed search-based navigation that relied primarily on voice search, inspired by the app Vokal as well as Google's digital confidence tools which encourage the use of voice-first interfaces for next billion users segment. This idea was discarded because while it made navigation easier, it did not really solve for discoverability. But the idea of a strong voice search engine was ear-marked for use in further iterations.
HOME
EXPLORE
06
Quick Access
​
This iteration built on the idea of a personalized menu at the top of the home page where users could quickly access categories relevant to their interests. Prioritising the single-feed content consumption that majority of our users currently indulge in, this option suggested making the quick access many collapsible so that all the focus is on the content rather than the navigation. It also limited the Search bar to the Explore page as in earlier iterations.
COLLAPSED MENU
EXPANDED MENU
Hi-fidelity Prototypes
Prototype 1
Prototype 2
User Acceptability Testing
The two prototypes were tested against each other as well as the existing interface to test the following hypotheses:
-
Ungrouping the features should increase discoverability
- Discoverability of news category reduces if local services are prioritised
-
Users will use search bar more if the option exists
-
Test 2 types of quick access menu
-
Test bottom navigation effectiveness with and without labels
​
Users were first asked to explore each interface while thinking out loud about their actions. Then, they were asked to navigate to specific types of content. In addition to behavioural observations and qualitative questions, we also measured the time taken to complete a task and asked the users to rate how easy they found the task to be.
Insights
01
Unlabelled bottom navigation did not fly
Participants seemed to be completely unfamiliar with the abstract icons used in bottom navigation. Comprehension of bottom navigation was significantly improved in the second prototype.
02
Users were significantly more comfortable with the quick access menu in grid format
​
Majority of the users gave up when asked to discover categories that were hidden behind the horizontal scroll, but were easily able to discover categories in the grid
03
Search bar did not help users as much as we had hoped
​
Using a search bar is not very intuitive for our users. They understand that a "search" tab can be used to find things, but they would rather go to that tab and scroll through a list than use the search bar
04
Ungrouped categories are better than incomprehensible groupings
​
It more sense to ungroup everything and let users find the categories in a list, because they are very apprehensive about opening a section whose name they don't understand (eg. Jobs, Matrimony etc being grouped under 'Lokal Services'). Users displayed very little tendency to explore.
05
06
Users are lost upon navigating to a category page​
After navigating to any particular page, users seemed a bit lost as to where they were. They had to scroll and read the content of the first few posts in order to understand which page it is. So we added a more prominent header on top of each service showing the same visual cue as the navigation menus to make it clear to users which page they were on. The header collapses into a single line header upon scrolling.
Vernacular language translations of any new microcopy must go through user testing to ensure comprehension.
​
There are some words we would have used in an English interface without a second thought, but it has to be a more iterative and testing-based effort when trying to find a vernacular language equivalent that users will easily understand. Eg. the word 'Matrimony' doesn't have a literal translation in Indic languages, and upon testing, we realized that the direct transliteration of the word was very confusing for users. So after much ideation and testing, we went for more culturally-familiar terminologies for each language. In Telugu, for example, we named the Matrimony section 'Vivah Vedika' which can be literally translated in English as 'Wedding Altar'.
New Navigation Design
Product Implementation
06
Since the new navigation would require drastic changes in the code base, it was important to chart out a phase-wise implementation plan. The objective was to test out the central hypotheses of the redesign in the first phase, and upon its success proceed to implement subsequent phases.
Phase 1
-
Auto-collapsing quick access menu on homepage (without expand/ collapse CTA)
-
Search as the first category in the existing Headlines tab (without Search bar)
-
Quick access nudge on article page
-
Header UI changes on categorypages (jobs, matrimony etc)
Phase 2
-
Remove top navigation
-
Redesign bottom navigation
-
Move category pages (trending, national etc) to a nested view
Phase 3
-
Mid-feed nudges on news feeds and article page
-
Article card UI changes (for decluttering, hygiene)
-
Submission categories UI changes (for consistency of visual language)
Phase 4
App-wide content search experience
See below the Product Requirement Document of Phase 1 of this implementation.