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-
- Designed screens for the Trial version and the Revamped version of the JJM Implementation App.
- Designed Web Dashboard of ejalshakti.gov.in.
- 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-
- 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.
- 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.
- We were already given a brief specifying the visual appeal and feel of the app.
- 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-
- 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
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.
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.
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.
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.
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.
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.
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.
I followed a grid and a Keyline shape, inspired by Material Design Guidelines, for consistent but flexible icons.
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.
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!