Redesigning Meghshala’s teacher-focused technology intervention to contextualize it for first time smartphone users

My Role

Design research : Evaluative Research, Thematic Analysis, Journey Mapping

User Experience(UX) Design : Ideation, Information Architecture, Wireframing, Prototyping

Front-end development: UI Design

Tools Used

Adobe XD

HTML, CSS, JavaScript

Ionic Framework

Team

1 Researcher

3 Developers

Lead Designer
(My role —Phase 1)

Front-end Developer
(My role— Phase 2)

Duration

Jul 2018 – Feb 2019
(7 months)

What does the organization Meghshala do?

CONTEXT

Meghshala is an educational non-profit based out of Bangalore, India and is focused on empowering teachers in low-income Government schools by building their pedagogical knowledge. They do this through their technology intervention which consists of an Android mobile application, tablet and projector setup, carefully curated classroom content and on-field assistance for teachers.

Meghshala wanted to increase the adoption of their technological intervention and increase scalability

THE ASK

Meghshala came to us to understand how they could increase the adoption of their technology intervention and increase scalability of their application as there seemed to be an observed increase in drop off rates.

Redesigning the existing mobile app to align with existing teaching practices in low-income government schools

THE SOLUTION

In order to meet this aim, through the insights gained from in-depth field research, we redesigned their existing mobile application to align with existing teaching practices in low-income schools and revamped the user interface to contextualize it for the target demographic—first time smartphone users.

How the redesign benefitted Meghshala and their end users

SUCCESS METRICS

So, how did I get there?

I looked into understanding the organization’s mission, content creation process and their technology solution deployment

RESEARCH

Before the commencement of on-field research, I was involved in understanding the organization’s mission, content creation process and their technology solution deployment by interacting with the founders, team members and on-site implementation partners at the Meghshala headquarters.

I also joined forces with researchers to learn from the users themselves

A team from Meghshala led by their in-house researcher had already started conducting interviews a few weeks before we joined forces with the team.

Some of the classroom dynamics that I noticed on-field

FIELD OBSERVATIONS

Students engaged in an activity

A teacher demonstrating an activity slide

A teacher making use of the projector set-up

So, what’s not working well in the existing app?

FINDINGS

How I evaluated implicit user behaviors, empathized, and identified opportunities to ease the above frustrations

EVALUATION — USER JOURNEY MAP

IDEATION & SKETCHING

What I did differently 

On analyzing insights from on-field observations, I created low-fidelity prototypes to rethink how information was structured within the old app in a manner that aligns better with existing teaching practices.

This led me to rework the information architecture of the app

INFORMATION ARCHITECTURE

Based on the new information architecture, I developed mid-fidelity wireframes and defined the user flow

WIREFRAMING

Key Screens and Challenges I Tackled

DESIGN

New login using phone number and One-time Password(OTP) to overcome email ID being a login barrier

Everyone who owns a phone will definitely have a phone number. This also reduced the burden of having to remember a password and reduced dropout rate.

Simplified Sign-up by autofilling information and including option to seek real-time help

I decided to auto-populate the rest of the school information once teacher entered the School DISCE code(used in many Indian schools to organize and classify school data across the country) as many teachers found it difficult to remember school related data.

  • Shifted focus of the home page to lessons as this is most relevant to teachers.

  • Added a Continue Teaching feature so that teachers can easily pick up where they left off

  • Simplified in-app navigation by introducing tabs layout to switch easily between Home, Chapters and Profile

Prioritized lesson discovery on the Home Page to encourage app usage

I mapped textbook colors to the corresponding subjects within the app. The existing app used random color coding and this made lesson discovery extremely difficult.

Redesigned chapter & lesson cards to reduce information overload

Edited/transformed app nomenclature to mimic textbook language to avoid confusion

I changed app nomenclature to terms used in everyday classroom settings so that teachers can easily find what they're looking for. Example – using terms such as Chapters and Lessons rather than the term 'TeachKit'.

Added the ability to share useful content to better align with teachers existing knowledge sharing practices

Teachers shared content such as images, charts and videos that they found useful via WhatsApp. In alignment with this, I implemented an option to share lessons that they found useful with their colleagues to increase engagement.

Incorporated gamification to help teachers remain motivated

Apart from the usual options to update their information and profile picture (a crowd favorite haha!), I included progress statistics and encouraging wording to serve as a motivating factor for them to utilize the app more and work towards completing pending lessons.

Something that conventional textbooks do not offer.

As several teachers in rural India are non-native English speakers, the option to consume content in a language they were comfortable with made the technology less intimidating for them.

Incorporated multilingual capabilities to aid in scalability

A few things that increased teacher and student engagement after the redesign

Students slides being used for classroom instruction

Making use of the multilingual capabilities of the app

A teacher in Raichur using activity slides on the Meghshala app to teach

Designing for end users whose tech literacy and lived experiences were starkly different from mine was an eye-opener and I learned

LEARNINGS & REFLECTIONS

  1. The importance of contextual immersion.

    Considering how the target user group was largely first time smartphone users, getting immersed in the context to understand their ways of operating automatically helped design a product that was more in alignment with their needs. For instance, a lot of the issues with icons and nomenclature being unfamiliar would have never come to light if we hadn’t conducted observations to understand their existing teaching practices.

  2. How to embrace ambiguity.

    I learnt that it’s okay not to have a ready made solution when tackling a problem. This taught me how to let end-users drive the design for more tailor made experiences. Trying to digitally mimic their existing practices can help new to technology users better understand the benefits of technology and in turn make a smoother transition.

  3. The importance of working hand-in-hand with developers.

    While it is extremely essential to let all ideas flow during the ideation phase, while zeroing down on ideas and going about their execution, it is critical to include developers in the process. This helps to keep the feasibility of the solution in check and hence help ship more functional products.

  4. Learning from mistakes. The essence of prototyping.

    It is rarely possible to get a design right on the first go and that’s okay. That’s precisely why externalizing our ideas early by building prototypes is important. This can help save tonnes of resources by helping us identify what is not working well at an early stage itself.