Vaani

April 2019

Delivery time : 2 Months

Voice of knowledge
cover.jpg

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.   

Process copy.png

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.    

 

Triangle copy.png
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.   

Persona copy.jpg
Persona 2 copy.jpg
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. 

Journey Map.png

Design

Effortless and Elegant

Apps copy.png
Pencil Wireframes
Whimsical Wireframes
Login
Login

press to zoom
Language Selection
Language Selection

press to zoom
Topic Page
Topic Page

press to zoom
Login
Login

press to zoom
1/5
Generate OTP
Generate OTP

press to zoom
Existing sign in
Existing sign in

press to zoom
Ratings Continued
Ratings Continued

press to zoom
Generate OTP
Generate OTP

press to zoom
1/18

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

Isometric copy.jpg

Detailed Design

Introducing, Vaani

Select Language.png
Landing Page.png
Pick Intrest.png

The gallery below shows the final version of the Android app for launch

Landing page with comments  2.png
Landing page with comments 1.png
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
Now Playing.png
Now Playing.png

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.

Discover.png
Search.png
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. 

The Takeaway

Create designs that help themselves

1. Make design changes in the detailed wireframe stage.

Making the changes in the detailed wireframe stage, after consulting with the users is much more effective in terms of time and effort than making the same changes later on. 

Also, detailed wireframes proved to be a great middle point between sketching and prototypes. 

2. The internet cannot give you all the answers about your users.

Regardless of however extensive the research is, the needs of the user cannot fully be understood. Creating a sense of empathy and curiosity is the only way to actually connect with the user. To put it simply, you must really want to put yourself in their shoes to understand them completely.  

3. Keep the developer in the loop.

Creating visually stunning designs might be great, but I realised that it is important to actually validate if they can be recreated by the developer. The developers restrictions also have to be taken into account when designing.