Mubarak ☪️

Mobile Application Case Study
Overview
Ramadan is a beautiful and integral part of the Islamic faith, yet it is often perceived as a chore and a draining task by many. In truth, it is a time for spirituality, family, community, and growth.

In these recent pandemic years, it has been increasingly difficult for Muslims to spend the holy month of Ramadan with their loved ones or to see their fellow community at the local mosque. We believe there is a missing connecting factor in our digital day and age that would help to keep these communities together even in times like these.

The goal of this application is to create a space for Muslims that reflects the warmth and togetherness of Ramadan while making it simpler and more enjoyable to practice the teachings and daily customs prescribed in Islam.

Role
UX Designer
User Research, Visual design,
Prototyping & Testing

Tools
Miro, Figma, Procreate, Photoshop, Zoom,
Google Drive

October 2021
*Please access this project on a desktop or tablet for a better viewing experience. Please also note that all testing was conducted virtually through zoom due to pandemic restrictions. Parts of the material shown were made in collaboration with creators Jacob Vazquez, Kyle Cheng, and Naziya Patel.
Background

Problem: There are lots of applications on the market catered to Muslims, but they are over-cluttered with features and lack user friendly design. They present a wide handbook of tools but miss the opportunity to cultivate a thoughtful and meaningful user experience.
‍
Solution: Create an application for Muslims that is not only easy to use, but also feels rewarding to use and captures the spirit of Ramadan. Users will be able to take advantage of this platform during Ramadan and the rest of the year to connect with their faith, community, and their loved ones on top of having all the day-to-day essentials they need such as prayer times and prayer compass (qibla).
Research Phase: Discovery and Definition
To the right is a proto-persona, a representation of a target user for Mubarak. Looking at the assumptions of different stakeholders helps to round out these target users and connect the design with real people.
Collecting Insights
We began by each conducting a user interview to gain a better understanding of Ramadan and what it means to individuals.

Here is a glimpse of some of the many questions we posed:
‍
1. What is the most challenging part of Ramadan? What is the easiest/most enjoyable?
2. What comes to mind when you think of Ramadan… What does Ramadan mean to you?
3. If you celebrate Ramadan, do you celebrate it with friends/family?
4. Do you find that your needs differ during the month of Ramadan? If so please explain how.
5. How has the pandemic changed the month of Ramadan for you and your family?
6. If there was one thing you wish other people could know or understand about Ramadan, what would that one thing be?
We also conducted a survey that collected 120 responses to make sure we were getting a good idea of how this app would be best for target users.
The Affinity Diagram to the right shows the common points collected from our four user interviews:

Competitor Analysis

User Persona

Ideation
Brainstorming can help generate new ideas and which features to select.

I like/I wish/What if is a brainstorming tool that finds ideas through the lens of the present, near future, and distant future.
Feature Prioritization is a graph-like tool that helps identify the most important problems to solve first. This tool helps highlight which features optimize for feasibility, desirability, and viability.

The dots represent the number of votes from the I like/I wish/What if ideation above.

‍

Storyboards are a great tool for visually predicting and exploring a user’s experience with a product; here we can see that Zara and her brother are missing their family amid the pandemic, and I wanted to illustrate that the look and feel of a product -- the experience -- can connect people with what's important to them. In this case, the design of the application Zara is introduced to reminds her of a core childhood memory she shared with her grandmother and her brother many Ramadans ago.

User Scenario
To the right is a user scenario, a tool used in UX to show how users might act in a certain environment. These scenarios help us understand users’ motivations, needs, barriers and also how they would use a product to aid us in creating a better product solution.

User Flow

Wireframe Sketches
I focused on versions of the home page, the community page, and the qibla feature.
Here are some other wireframe sketches produced by another team member; this set highlights the donations workflow in addition to a rendition of the homepage (center sketch).

‍
LowFi Wireframes
Here is a basic low fidelity prototype that we built out to cover the workflows for the community page, fast log, home page, donation page, and qibla feature.
LowFi User Testing
Five user tests were conducted over Zoom and the following tasks were asked of the interviewees:

1. Locate the local prayer times
2. Donate a meal of your choice
3. Update your daily tracker (fast log)
4. Access the compass feature (qibla)
5. Access the community page and try to manage your contact settings

Testing successes:
•  All users were able to access the    donation feature and task
•  Majority of users had a positive    reaction about the daily tracker/fast    log feature, saying they would like to    use it
‍
Testing feedback:
•  A couple users experienced difficulty    accessing the prayer times (did not    know where they were nested on the    home page)
• Users also experienced difficulty    locating the manage contacts side    menu off the community page
‍
Style Guide

HiFi Wireframes

HiFi User Testing
Another five user tests were conducted over Zoom but this time we applied the same questions as before to the high fidelity prototype:

1. Locate the local prayer times
2. Donate a meal of your choice
3. Update your daily tracker (fast log)
4. Access the compass feature (qibla)
5. Access the community page and try to manage your contact settings

Some of the feedback we received during testing can be seen to the right:

‍‍

iOS Widget Samples

I'd love to build out more widget options and test them to make iterations. For now I've focused on a Dua (prayer) widget, a widget for tracking fasting/prayers/reading the Quran, a welcome widget, and a prayer timetable widget.

Moving Forward

More projects