Vaani
April 2019
Delivery time : 2 Months
Voice of knowledge
My role
-
Market research
-
User flows
-
Wireframing
-
UI/UX Design
Worked with a team of 2, including:
- An app developer
- Marketing executive
The Challenge
Catering to first time smartphone users
Primarily targeting the over 287 million illiterate users in India, Vaani is an audio first news application. India being a diverse, multilingual and largely verbal society, there is currently a lack of engaging and informative audio content available.
The rate of first time smart phone users in India is increasing exponentially. The literacy levels however, are rising, but at a much slower pace. Speech being the lowest common denominator of all things media, it is the prime mode of information transfer.
Designing for a community that has little to no experience with common user interactions such as dragging and swiping, was challenging. The standard principles of user interaction and experience had to be altered slightly, while still maintaining the same level of depth and engagement.
Confidential information has been omitted.
The Approach
For people, by people
The core of this application was to encourage people to engage in content and also create it. In a flooded market of applications that promote voice first media, we had to do something different to stand out.
Placing the users at the center, I designed a meaningful goal and worked towards creating it as best I could.
Eliminating existing frustrations
With the existing applications on the market, I noticed a lot of things that might be frustrating for first time users.
A comparative analysis was done to understand these existing applications.
Generating a connection
One thing that was very evident from the comparative analysis was the fact that people love sharing content. Popular sharing methods included whatsapp, facebook and SMS sharing. They seem to like content that is also curated especially to them. I also realized that first time smartphone users also appreciated applications that curate content into localised categories.
Creating a connection with the user was essential to retaining them and increasing interaction. I set out plans to design an interface that would cater to their preferences and therefore build a connection with them.
Social Change
Catering to a community that is primarily illiterate, it is important for the application to be an enabler for positive change. I were really interested in exploring the effects of suggested content and that being a catalyst to promote more exploration within the content pool of the application.
I aimed to generate a consistent spread of knowledge, while still maintaining the 'fun' element of learning and sharing.
Discovery
Simple is hard
The discovery phase was a through effort. Careful considerations of the users and their needs helped us decide on an overall theme for the application. By creating personas, I were able to get a deeper insight into the different types of users.
User interviews of the target audience was also taken. Some of the key findings are listed below.
Insights
1. There is a lack of audio only news applications
2. India is still largely a verbal society. Regional content is not on the web because they cannot be typed out
3. Long articles are hard and time consuming to read
4. Non English speakers will not engage deeply (ask or answer questions, comment, etc) by writing text - voice is
the likely medium for engagement.
Experience Principles
1. Content first: Having the content take center stage, so that the user does not need to go through a lot of hoops to access it.
2. Personalised feed: Incorporating the use of machine learning systems to curate content based on the users interests.
3. Quick and easy sharing: Encouraging the users to share their content, and also engage in comments and other interactions with other users to help build a community.
4. Hassle free interface: Designing an interface that is self explanatory to use. Avoiding the use of complicated gestures and interactions, and keeping it as simple as possible.
Visualising the user experience
Mapping out the user experience using an emotion chart was an essential step in understanding where they might find the application difficult to use. We also wanted to design a product that would leave the user feeling fulfilled rather than frustrated.
From data gathered from the comparative analysis and the users, here is the chart that I created. This chart was used to understand the emotions of the user, and their frustrations. Based on the current downfalls of similar apps, a strong goal was set.
Design
Effortless and Elegant
Pencil Wireframes
Whimsical Wireframes
These were very rudimentary wireframes. I chose to use Pencil because it is open source software and offers a wide range of shapes and UI elements right out of the box.
These wireframes were used to convey a basic idea of the research that was conducted. We didn't spend a lot of time on it because it was a rough mockup.
Once we got the very basic UI down, I moved onto using whimsical to create more detailed wireframes.
The whimsical wireframes provided a much more detailed explanation about the UI of the application.
I was able to show them how it might look before I went onto prototyping it on Adobe XD.
I also explored a couple of different layouts for the application in this process. I played around with layouts and user flows when designing in whimsical.
These final wireframes were used as a guide while prototyping the application in the later stages.
Click on the images for a detailed overview
Click on the images for a detailed overview
Detailed Design
Introducing, Vaani
The gallery below shows the final version of the Android app for launch
Landing Page
The landing page was designed to give as media rich as possible. Eliminating the need for textual interfaces, the art work for the respective audio streams are shown. This page also serves as a hub for the curated content that the application generates.
I placed a strong emphasis on encouraging community engagement by incorporating the idea of the 'share first' attitude that a lot of the applications as part of the comparative analysis show.
The card based layout was chosen because of the fact that it is easy to understand, especially for first time users. It provides a good segregation between each topic and also splits up the content evenly.
Now Playing
Quick and easy sharing options. Whatsapp icon used because that's what the target audience associates with sharing.
Curated and recommended content to help the users engage with similar content without having to navigate around the application.
Media first content playback interface. Designed to be big because it indicates the primary purpose of the application.
Search and Discover
The search and discover features of the application were critical aspects. This is where the user is primarily going to explore and be exposed to new content.
I still kept the card design consistent, but introduced elements such as instant following of a topic right from the discover page. This was in an attempt to reduce the amount of navigation and make the user feel comfortable exploring new content.
I also suggested a 'trending search' card powered by local searches to further reduce the users frustrations in finding new content.