Even though excellent nuggets of knowledge are freely available on the internet, many individuals, especially the underprivileged, do not have access to it. To address the situation, DoData was envisaged — as a not-for-profit organization, whose main objective is to enable the donation of data (internet) for the needy. I worked on the User Interface Design of the mobile app for DoData during my internship at Rupeelog in the summer of 2017.

Rupeelog Financial Services 4 weeks View project

The Problem

With the penetration of technology in our lives, people today have a plethora of services at their fingertips (literally!). For 2017, the number of smartphone users in India is estimated to cross 300 million. This can give access to a huge collection of knowledge available online via smartphones. However, it was found that despite the availability of the devices and the desire to learn, many of the individuals were unable to utilize the resources for learning.

What was needed was a channel that could bridge the following hurdles —

Icon of a Wi-Fi signal displayed inside an outline of a mobile phone
Bandwidth connecting the two is costly and availability is very limited
Icon of a play button displayed inside an outline of a mobile phone
Bandwidth is available but misused to consume data only for “entertainment”

The Solution

Data Donation — The act of donating data to an individual or a family to enable them to access the world of online knowledge using their smartphones.

Here, ‘data’ refers to the data pack that will provide internet connectivity to the user to bridge the digital divide. This, however, solves only the first half of the challenge.

To ensure the appropriate usage of this data for intended purposes, there needed to be a system that could act as the interface for the curated content and allow monitoring of the data consumption to ensure judicious use of the donated data. It is part of an NGO effort aimed at making informative content consumption via mobile affordable for the masses. And that interface for the end user is what I got a chance to work on!

Understanding the user and app usage

The app is aimed at helping users consume informative content via mobile data in their native language. It would also capture and report data usage for the DoData app and other indicated apps to ensure effective use of the donated data.

Handwritten notes about the use cases - children education, vocational training, special kids, organisations for its members, the Japanese government.
Based on the concept document I translated the use cases to UI requirements

The content to be served is curated by different NGOs for their users. The users can have content from multiple sources — NGOs and third parties. They may be kids trying to learn science or grown-ups trying to pick up a new skill for work.

Before proceeding with the app, I had to work on the branding… It is really fun sketching shapes and choosing colours, not to mention deciding on a typeface!

I associated keywords with the project and began sketching out ideas that involved WiFi, the internet, people and of course the cursive ‘D’.

Photo of pencil sketches on paper showing logo ideas
Photo of pencil sketches on paper showing logo ideas
Photo of pencil sketches on paper showing logo ideas
Sketching out initial logo ideas for DoData, before moving on to digital drawings in Adobe Illustrator.

The idea was to integrate the gesture of giving with care with the symbol for the internet and the letter ‘D’. I tried to use mostly geometric shapes to ensure pixel-perfection on screens.

Digital grayscale renders of nine different variations of logo ideas

The folks at Rupeelog decided to go with the bottom right shape. It is simple and conveys the message.

The logo and one showing the construction lines

Choosing colours

I wanted colours that could express growth, prosperity and happiness along with the intellectual aspect of the app. So, I decided to experiment with green, yellow, and blue which could express the above attributes as explained by Timothy Samara in his book.

The logo with different colour variations

I finally settled with two hues of green — one with yellow and one with blue, using which I developed the colour palette for the app.

Green Primary #45ADA8
Green Secondary #59C9A5
Green Primary Dark #2F9599
Green Secondary Dark #3CB888
Green Gradient Primary

Choosing typefaces

Now that the logo symbol was finalized, I had to work on finding a suitable typeface that can together make up the logotype.

The logo with different font variations reading DoData

I settled with Bree-Serif for the logotype because of its cheerful and friendly appearance. For the app content, I chose Noto Sans because it can support a multilingual app with its wide coverage of over 30 scripts.

Typeface sample of Bree Serif
A mock-up of a mobile phone showing the DoData logo

Designing the UI for the consumer app

The backend of the service was already under development when I began the project. So, the basic app flow had already been decided by the project manager which had been conveyed to me via rough sketches. After I had analysed the wireframes, I suggested a few modifications, which were then incorporated into the final UI. I used Sketch to make the screens and created a prototype using Invision App which helped in the smooth hand-off of UI specs and assets.

Handwritten notes about the app concept.
I analysed the concept document to derive the functional specifications and content requirements.
Handwritten notes about the app information architecture.
I analysed the information architecture suggesting modifications to improve the UX.

I wanted to keep the UI as close to a standard Android app so that it is intuitive to users familiar with an Android phone. Also, to avoid leaving the users in a state of anguish, it was important to consider edge cases to handle error scenarios efficiently.

Screen mockup to create new password
If the user doesn't receive the OTP on the number entered or wishes to change it, he can do so without using the back button.
Screen mockup when incorrect password is entered
When an incorrect password is entered, the user is asked to either check the password and retry or reset the password.
Screen mockup for invalid mobile number
When the user enters an invalid mobile number, he is asked to check and enter the number again.
Screen mockup when an unrecognised mobile number is entered
When the user enters a valid (10-digit) mobile number that has not been registered as a DoData user, he can either register it or retry with a different number.

The dashboard contains the content categorized by the sources, specific to the current user. If a single account is used by an entire family, the account admin can add family members, and they can access their content by simply switching the user from the menu.

Screen mockup for switching user
Dialog box to change the active user

The card-grid layout is preferred here as it gives an overview of content categories, without the user having to scroll much. This has an advantage over accordion lists when the number of items is large.

Screen mockup of user dashboard
User dashboard with content group cards

The banner acts as placeholder for advertisements and promotional content from the Government or other sources. It can help instil preferred values (like Nationalism, Cleanliness) in the consumer.

The app can help form effective habits by incentives (in terms of data and other things) and by alerts and reminders, accessible from the notifications section.

Keeping track of data usage is just a swipe away. It can help users use their bandwidth efficiently — balancing between education and entertainment.

Screen mockup of data usage stats
Data usage statistics for the user

Designing the icons

Even though many of them are standard icons, I recreated them in Adobe Illustrator using the Material Design Grid to fit the solid visual family.

Icons deisgned for the app

…and then the developers developed. An early version of the App is available on android devices.

Get in touch to know more about my work, 1:1 mentorship, dataviz design workshops or invite me to speak at your event!