What is Jal Jeevan Mission (JJM)?

Jal Jeevan Mission is a central government initiative to provide Functional Household Tap Connection (FHTC) to every rural household with regular and adequate water quantity by 2024. The government restructured and subsumed the ongoing National Rural Drinking Water Programme (NRDWP) into Jal Jeevan Mission (JJM) and announced it in 2019–2020.

To Know more about Jal Jeevan Mission Visit: https://jaljeevanmission.gov.in

Why was Jal Jeevan Mission (JJM) started?

In 2009, NRDWP was launched to provide all the households access to safe & adequate drinking water within premises to the extent possible. But due to “poor execution” and “weak contract management” of NRDWP, less than half that target was achieved with an increase of only 8% at 40 lpcd (liters per capita per day or water available per person) and 5.5% based on 55 lpcd, despite spending Rs 81,168 crore.

Team and My Role

There were 12 members, but I worked closely with 5 team members, including the Product Lead from Tata Group, a TAS Qualified IIM Graduate and my 3 Product Design co-interns.

It was a three-month-long internship, and I worked on different parts of the project-

  1. Designed screens for the Trial version and the Revamped version of the JJM Implementation App.
  2. Designed Web Dashboard of ejalshakti.gov.in.
  3. Designed avatars and Onboarding Illustrations for JJM App.

Note: This documentation is mainly focused on sharing insights on the design process followed and the learnings while designing the JJM App screens.

Constraints and challenges involved in the project-

  1. TATA did not have a dedicated design team or an expert to guide us through our design decisions. The interns were ultimately responsible for the whole app.
  2. The first product demonstration to the key stakeholders was a week after I onboarded as an intern, so most of the trial version screens were designed in 5 days because of the time constraints.
  3. We were already given a brief specifying the visual appeal and feel of the app.
  4. When we (Design Interns) joined, the User Research was almost completed and well documented by the team in a PowerPoint deck.

Goals and Objective

Before getting into the research, there were few goals and objective laid forward-

For the general public/citizens

  • Create awareness about JJM
  • Educate citizens to develop an understanding of Water & Sanitation
  • Empower citizens & promote transparency

For JJM execution stakeholders (State/District officials & engineers, PRIs, NGOs, ISAs)

  • Educate local officials about JJM guidelines & best practices
  • Enable collaboration across levels among multiple parties
  • Improve the “ease of working” with better & faster planning

Understanding User Research

When we (Design Interns) joined, the User Research was almost completed and well documented by the team in a PowerPoint deck. Understanding it thoroughly was the only way to get the precious insights and keep us on track regarding business goals. While the team was finalizing the features, I studied and understood the whole process and the targeted users and discovered exactly what these users need; otherwise, it would have resulted in an unfocused goal, dehumanizing future users’ profiles.

The process involved in providing piped water supply to a village-

In JJM, when a scheme is launched for a village or a block, it includes three main Phases with various stakeholders (Junior Engineer, Village Paani Samiti, Central Officials, etc.) involved and handling it-

  1. Planning
  2. Implementation
  3. Operation & Maintenance

People involved in the process-

The PowerPoint deck had some Role-Based Personas, each consisting of their nature of work, behavioral aspect, tech quotient, etc. involved at various levels.

Before the in-depth analysis of each persona, I listed a few questions as a roadmap to guide the further process-

What purpose does each persona serve?

What are the business objectives required of this persona?

How personas interact with each other?

What problems are faced by this persona?

Given below is the analysis of different personas-

Now that I had a better understanding of the users’ requirements and the context in which users may use a system, I moved on to designing the screens.

Designing Interface for the Product Demo and
Alpha Testing

The first product demo was conducted with stakeholders and senior government officials to understand how the app was truly solving the pain points and need. They wanted to see and feel how the design will turn out and visualize the core features and capabilities.

The PowerPoint deck that I had communicated some clear interface requirements and brief for the trial version. Some of them were-

  • Using a bright color scheme, preferably signifying water.
  • Using a larger typeface that will be legible enough for the low-tech and non-English speaking users.
  • Using comparatively larger font sizes that will be easy to read and understand considering our targeted users.

Now that I had a clear idea of how the app should look, I sketched out all the possible layouts and finally came out with the one that worked the best.

Some quick rough sketches

HIGH-FIDELITY SCREENS

After some quick sketches, I directly went ahead to design High fidelity screens because of the tight schedule.

Now that we’ve looked at the final screens let’s look at how I tried designing the screens based on the given briefs.

VISUAL LANGUAGE

Layout

Column grid

I have used a 4 column grid with 74 px wide columns, 16px wide gutters, and 16px side margins on each side.

With 4 column grid layout, content can easily adapt to larger screen width.

4 Column Grid

Spacial System

Although my preferred method is a 4px linear scale but considering the requirement of a spacious UI with large font styles, I went with an 8pt linear scale for elements, with a 4px half step for spacing icons or small text blocks. Also, I have used a 4px baseline grid for my typography, which means the line-heights of the font is divisible by 4.

For this UI, I felt that the 8px increments were the right balance of being visually distant while having a reasonable number of variables.
By following an 8pt spatial system, the rhythm becomes predictable and visually pleasing, making the experience polished and predictable for our users.

Elevation

I have used colors to create distinctions, i.e., using white cards on a light gray and blue surface to create elevation and depth and separate them from the background. It let users focus better on these elevated cards compared to a flat information layout.

Apart from the color, the white cards also have a subtle shadow treatment, giving a better appearance of lifting the content.

Color

The color theme was inspired by the deep and rich colors of water and the village.

  • App’s primary color is Blue
  • The secondary colors are orange and green

I used the Material palette generator to generate this color palette and produce colors with their light and dark variants. To ensure that all text is legible and meets accessibility standards, I used the Material color tool and determined if specific foreground colors used on text pass accessibility standards on background colors.

I have adopted a color theme with one primary color, i.e., blue, as I was asked to use bright colors and something resembling water, so using blue was an undeniable choice.

The other two additional colors, orange, a very vibrant color, and Green, a cool color with a strong association with nature, allow the app to clearly present readable, distinct infographics. Their variants are often used to highlight vital stats or data. They are used sparingly to ensure it has a high impact on the places that it appears and can easily attract user’s attention.

Typography

Due to the time constraint considering the no. of screens (29 screens in 5 days), I had to compromise a bit on my research for this.

Selecting the right fonts has always been a perplexing process for me. After researching for a while, I chose Open Sans for its extreme versatility and clarity. Like Roboto, Open Sans is considered a “humanist font,” as developed using oval shapes and stroke variations that give it a more human feel and makes it incredibly readable in small sizes and also works great when printed in giant letters.

It is also a ubiquitous font, used by everyone from Google to WordPress, making it more familiar to the users.

Iconography

I followed a grid and a Keyline shape, inspired by Material Design Guidelines, for consistent but flexible icons.

Icons used in the UI

After this, various internal acceptance testing was conducted with major stakeholders represented by government officials. The sequence of iterations was made to this version based on their feedback.

The division into two Apps-

After several testing, stakeholders felt that this version was overloaded with features and looked messy and complex for the users. They struggled to catch up on the app and were confused while navigating even though they were more familiar with technology than the targeted users. They felt that some features worked well, while others did not even come in use.

It was collectively decided that it is better to eliminate some features as they made it look haphazard and crowded and instead keep the app simple with minimal tabs on the home screen.

As decided, the information architecture of the JJM App was split into two different apps to cater to the needs of specific target users-

  • JJM Implementation App
  • Citizen Engagement App

I worked on the JJM Implementation App for the next 2 months of my internship period.

The revamped version designed after the feedback-

Three design interns, including me, designed the Revamped version. I specifically worked on the screens of all the forms, illustrations for the onboarding screens, and avatars resembling various stakeholders.

Some of the screens designed for the refined version

What are the next steps for the project?

This version will now be sent over for Usability Testing with the targeted users to ensure that the app adds some value and meets the final users’ expectations. This may not be the app’s final design, as it can be further refined to improve the user experience and functionality.

My experience of working in a big team-

For the first time, I worked with a team with people from different areas/departments: a bunch of engineers, a Product Lead, Product Managers, designers.

Our team had a set of ceremonies that included everyone:

  • A daily meeting or stand up, a quick catch up to check on progress.
  • A weekly meeting with more detail that composed of other activities, such as retrospection or planning for the next week.
  • Retrospectives- What the team needs to continue doing, what can be improved, and ideas to do so. Open and honest feedback to help everyone get better and boost productivity.

As it was a remote internship, these virtual meetings helped us create powerful bonds and be constantly aligned with our product’s goals and vision.

One of the significant learning was being comfortable asking for and receiving feedback. Receiving constructive feedback is a natural part of the Design Process, and that helped me improve as a designer by pointing out the small details that I had missed.

Also, It’s evident that when you have more people in your team, you’re involved in more discussions, which gave me a sense of belonging and made me feel that I contributed to something bigger than myself.

And that’s a wrap. Thank you for reading!

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

“ My Design Journey…”

How to Conduct User Interviews (examples and sample questions)

Celebrating The Refresh App Challenge 2021 Winners!

Art App Wireframe Mockup

What in the heck is a Design Frame, and How do I Use it?

Inside the Mind of a Garden Design — shallow sloping garden

How to make and print logo t-shirts for business (or pleasure)

The 5-Step Lighting Design Guide

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yaly

Yaly

More from Medium

MAKING DECENTRALIZED FUNDRAISING ACCESSIBLE TO ALL.

5 Things to Do in Rio de Janeiro During Carnival 2022

Nonrenewable energy will destroy our planet before we even see it coming.

Medea: Euripides’ feminist anti-hero