Mobile app design

Increasing user engagement through an event-specific app feature

My role

User research
User interviews
UX writing
Prototyping
Interaction design
Visual design
Dev hand-off

The platform

iOS mobile
Android mobile

The product

Athan app

The team

1x Product manager
1x Business analyst
1x Data analyst
1x Product designer (me)
4x App developers
1x Backend-engineer
2x Quality assurance engineers

Intro

Athan app’s new feature Ramadan Book made it easy for a Muslim individual to stay productive and make the most of their time during Ramadan. I led Ramadan Book’s ideation, strategy and design from start to end.

The problem space

What is athan app?

Athan is a mobile application designed for practicing Muslims to help them stay attached with their religion - Islam.

  • Primarily, it notifies a user of prayer times based on their location
  • Additionally, it consists of widely used features like Quran (holy book) reading, up-to-date Hijri (Lunar) calendar and Qibla navigation (direction to face for prayers)
existing user’s app expectations
  • Accurate information
  • Simple and intuitive design
  • Credible knowledge resources
Ramadan: the event specific opportunity

During the month of Ramadan, Muslims observe a fast everyday from sunrise to sunset for 30 days and strive to connect more with their faith and religion. It is important not to miss a fast and dedicate some time for prayer, meditation, community contribution and charity.

For a Muslim in today’s world, being more connected with one’s faith during Ramadan and keeping a track of fasting can be challenging.

Initial problem statement

How might we help Muslims stay productive in the holy month of Ramadan?


To add constraints to the open ended design opportunity, the problem was sectioned to deliver these key drivers:

Attract

Provide unique content related to Ramadan to help users stay connected with Islamic practices.

ENGAGE

Remind users to gradually build a habit and fast everyday by maintaining a record in an interactive experience.

RETAIN

Appreciate user’s activity by rewarding them and encouraging them to do better.

Designing for Athan’s niche audience

Constraints and considerations
  • Religion is a sensitive topic with people having firm belief systems -
    Be mindful of varying juristic understandings e.g. Hanafi, Shafi
  • With a worldwide app usage, users come from a different religious mindset and background -
    Avoid conflicting and opinionated topics and keep the tone of voice soft and trustworthy
  • All app users are not tech-savvy or expert smart-phone users -
    Keep things simple and intuitive to ensure maximum clarity
  • Users speak different languages -
    Design considering multi-lingual views
Constraints
Considerations
Religion is a sensitive topic with people having firm belief systems.
Be mindful of varying juristic understandings e.g. Hanafi, Shafi.
With a worldwide app usage, users come from a different religious mindset and background.
Avoid conflicting and opinionated topics and keep the tone of voice soft and trustworthy.
All app users are not tech-savvy or expert smart-phone users.
Keep things simple and intuitive to ensure maximum clarity.
Users speak different languages.
Layouts need to be considered for multiple languages.

Empathizing with users

Before proposing any solutions, I went a step back to gather insights and data that would help me understand user’s pain points and challenge my assumptions of their journey.

I collaborated with the product team to understand our user’s purpose of spending time in the app, challenges they face and how their needs may differ in Ramadan.

Quantitative and qualitative data insights were collected from various channels:

In-app survey

In order to learn about user’s preferences, an interactive survey card was added in Athan’s scrollable home page.

The survey had a 65% completion rate. Users were asked questions based on the features that interested them the most and select potential improvements they would like to see in the future.

The research helped us get a clear picture of user’s priorities and expectations. These findings were used to prioritize app features and study behavior patterns that can be replicated.

96% find reminder notifications helpful
61% users would like to interact with Muslim community online
55% share reading content outside the app
22% struggled with GPS Qibla direction (direction to face for prayers)

User interviews

To get a perspective of our user’s challenges during Ramadan and their motivation to use the app, I, along with the Product team conducted 10 user interviews.

1-1 online sessions were scheduled with regular app users who responded to our invitation and agreed to share their insights.

Interviews: 10
Session time: 30-45 mins
Platform: Skype

Comprehending data from the research

Using the information from quantitative and qualitative research, I narrowed down Athan’s two main user personas specific to the upcoming month of Ramadan.

Re-defined problem statement

During Ramadan, how might we empower a Muslim to fast daily and do good deeds?


After going through extensive research we were able to create a focused problem statement that aligned with the user’s needs. This helped us plan for an impactful and goal driven MVP for Ramadan’s app update.

Design ideation

Being thorough about the problem opportunity at hand, we conducted an interactive workshop to brainstorm ideas for Ramadan’s update.

The Athan team was split into 2 groups to contribute in the ideation phase. Every team had to come up with ideas and defend them.

Using the ‘How Might We’ and ‘Can We’ to spark discussions around the identified problems, we shared potential ideas that would be most beneficial for Ramadan’s user personas.

concept building

Further wireframes were created to elaborate on ideas and build feature concepts.

Moodboarding

To get a different perspective, I looked at productivity apps to understand what users expect from a habit building / lifestyle / meditation app. I also did a competitive research of apps that were similar to Athan and how we can provide a unique experience.

Defining the structure

After a few rounds of wireframing concepts, we created a high-level user flow that will be used to define the scope of the overall journey.

Prototyping, iterating and testing

A number of design options were prepared to test the experience with real users. The low fidelity prototypes were built to test the productivity and goal setting experience.

1-1 user tests were conducted with new and previously interviewed Athan users.

Users were asked if they were familiar with fasting and Islamic practices in Ramadan.

After the introduction, prototypes were shared with the user one by one and they were asked to interact and think out loud. If they were confused or stuck, I would ask what they would do in this situation without giving any direct answers.

This helped me understand loopholes in the design and flow.

Iterative prototypes: 3
Interviews: 5
Session time: 30-45 mins
Platform: Skype

Iteration 1

Same checklist for everyday. Cards re-directing to other features in the app.

Feedback:

Same goals for everyday did not intrigue users to mark them repeatedly.
They wanted to see how they performed over the days which was not possible with this design.
Iteration 2

Same checklist for everyday. Different supplications (duas) for every 10 days of the month.

Feedback:

Most users liked the supplication (dua) and dates of the 10 day divisions.
Some users did not like a daily log for Taraveeh prayer (extra night prayer offered during Ramadan).
Iteration 3

Fasting as a separate big goal to be achieved. Another big goal is completing unique tasks everyday.

Feedback:

Users prefer having unique tasks for each day.
Users wish to keep a record of their progress even after Ramadan ends so they can continue completing their goals.
Users did not like being restricted to logging a task only for the current or past dates. They wanted to mark goals from future dates as well.
Users asked for tasks that were easier than the ones listed so that kids can also participate.
feature set defined based on the collective feedback

Visual design explorations

Now that the feature set was defined, it was time to go wild with visual design explorations for the Ramadan feature. I created drawings for new icons and badges that were in line with the existing visual language of Athan app.

The icons and badges were intended to grasp interest and create anticipation to complete tasks and earn badges that will reflect in the user's profile.

Design delivery

After the prototype testing and design explorations, I moved on to creating high-fidelity prototypes and handed-off design for development.

I worked with the product and development team document feature requirements and prioritize/divide the feature into stories and sprints.

This is how it finally looked like:

Checklist for good deeds

All good deeds in this checklist are suggested tasks that can be marked regardless of following a day-order.

Additional flow

Cards on home screen and badges in profile screen that lead to/from the Ramadan’s feature.

Impact

To define the success of the new feature and measure goals achieved, the product team had defined metrics to be tracked. Here are the results after 3 months of feature launch:

During Ramadan

20% increase

In-app engagement (time in app)

5% increase

Daily active users

After Ramadan

12% increase

Consistent in-app engagement

Users would come back to the Ramadan feature's page to complete their fasting and good-deed goals. After Ramadan, we were able to retain users and considerably improve the overall app engagement.

Credits

Thanks to Sana for conducting the majority of the user interviews and Ali for his guidance and support.

VIEW ALL CASE STUDIES