Lifestyle Enhanced™
AYAT APP • 2021
Case summary
Ayat (A Muslim prayer monitoring app) is a start-up company in Glenroy, VIC. They want me to join the internal team to define and expand the product. The goal is to have a place to monitor the five daily prayers, ask questions, and host live talks for young Muslims.
The product manager facilitated a Zoom meeting, including myself, UX Researcher, and a developer to brief us on the roadmap. During the product definition, I was involved in hours of meetings with stakeholders, team players, and end-users. We discussed prospects at a high level, the product's context of existence, and how to satisfy user and business needs.
Below is our work in progress!
PROBLEM STATEMENT
Establish a place that empowers people to monitor the five daily prayers, ask questions, and host live talks.
CHALLENGE (UX)
How do you enhance the lifestyle of almost 2 billion Muslims worldwide? Influencing this many lives, difficult? Absolutely! and also requires an approach centered around people. How do you design experiences for people—real people—with interests, morals, and values at the center? A place where they can learn, educate and communicate while having a great experience?
Project Highlights
CLIENT
Ayat App (Internal)
TEAM
Product Manager, Product Designer (Me), UX Researcher, and a Full Stack Engineer.
RESPONSIBILITIES
Stakeholder Interview
User Research
Competitive Analysis
Value Proposition
User Persona
Moodboard
Sketch & Wireframe
Style Guideline
Interaction Design
Design System
Interface Design (Outcome)
Motion Design
Usability Testing
Stakeholder Interview
I was involved in conducting the interview during the early stages of design thinking. We contextualized user and business problems and asked as many questions as possible. Below are some of the findings about the end-user and business.
About
Previously known as Bismillah, Ayat is the next up-and-coming start-up in real-time prayer monitoring, questions and answers (Q&A), and hosting of live talks. Founded in 2019, the idea of providing real-time solutions for Muslims globally has been the vision of Ayat. Whether it's accurate prayer times, Q&A, or hosting live talks, Ayat's vision is to enhance lifestyle.
Background
The idea of starting Ayat sparked when Samir and Bilal Malik decided to merge their product (Bismillah) with the Islamic YouTube channel (Ayat). At the time, Ayat had about 15k subscribers majority of whom were Muslims. The goal of the merger is to increase the customer base, access a larger market, and increase revenue. So, the two parties negotiated and agreed on the terms; the rest is becoming history.
Vision
We see a world diverse in providing places, virtual or otherwise, that are aligned with the people's values and interests. The world is filled with people of different lifestyles and interests. And so, the existence of places that uphold the people's values and interests must be fundamental in our search for freedom as a society.
Value
Impact
There are two (2) phases concerning impact, prelaunch, and post-launch. But first, let’s take a look at what success means in the prelaunch phase.
A prototype of the core features—Onboarding, Home, MyMasjid, Ask n Alim, and Jaami—must be exhibited to raise a portion of the capital investment.
Additionally, target users must have a 100% conversion regarding prototype usability and satisfaction tests.
User Research
We conducted research to gain useful insight in MyMasjid, Ask n Alim and Jaami.
Demographics
We outlined our demographic of 10 target users, split evenly between males and females from the US and Australia, aged 18-29.
Then asked key questions about the core product features, synthesized the data into an affinity map, and isolated useful insights.
Below are some of the selected insights,
User details
User Needs
Location-based prayer times
Hosting of live talks with friends and followers
Seek answers to personal questions.
User Goals
Pray on time.
Ask tailored questions to specialists.
Facilitate Communication
Frustrations
Alert Issues “Sometimes it plays and most times it does not.” - USER ON MYMASJID
Late answers “Questions take too long to get answered” - USER ON ASK N ALIM
Too many notifications “Default notifications should be lessened” - USER ON JAAMI
COmpetitive Analysis
Who?
Muslim Pro
Go Pray
Quran.com
What?
Muslim Pro is also a prayer monitoring app featuring a Quran, calendar, and qibla finder.
Go Pray is another competitor that incorporated features unique to itself. For example, a user can create custom prayer times, and mosques.
Quran.com is a web and mobile application with the entire Quran. Most of their features are standard in the market of Quran apps. However, their Quran recitation player has a feature that allows users choose a specific reciter.
Value Proposition
PRODUCT
User
AYAT © 2022
User Persona
PERSONAL DETAILS
Name: Joshua Ishmael
Age: 19
Education: College (Freshman)
Products: YouTube, Spotify, Twitch & Discord
Platform: Google Pixel 6 Pro
INTERESTS
“I love going to the mosque for prayers and to socialize with other people, but the pandemic limited my outings”
“I play video games with my friends but most of my online time is spent on Twitch watching videos and chatting on Discord”
NEEDS & GOALS
Accurate prayer times based on location.
Ask tailored questions to specialists.
Facilitate centralized communication (Live talks) with creators, study buddies, or friends.
NEW HOME, NEW MEMORIES
Moodboard
TYPEFACE
What I was looking for in a typeface first and foremost, was legibility. The typeface has to be readable with dynamic scaling. After research, we opted for Modern Era, a semi-geometric sans-serif typeface developed by Omsetype. It’s slight imperfect anatomy makes it the best candidate for a friendly and yet approachable typeface.
COLORS
A vibrant complementary palette was chosen to fit the intended persona. Whether it’s for strategic or psychological reasons to fulfill marketing or user demands; I had to do my research to strike both needs.
UI & LAYOUT
In today’s never ending trends, I studied products like YouTube, Discord, Twitch to find what makes them so central in our lives today.
Sketches & Wireframes
ONBOARDING
HOME
MYMASJID
ASK N ALIM
JAAMI (VIDEO)
JAAMI (AUDIO)
Style Guide
Color
TYPOGRAPHY
ELEVATION
Interaction Design
HIGH-LEVEL
After collaboration with the UX Researcher and having access to the research materials. I developed a high-level understanding of the user’s interaction with the product. Below is an interaction I designed for MyMasjid (A feature on the Ayat app).
Ayat © 2022
Design System
Below is my process and some of the components from the extensive asset library I’ve contributed to building and maintaining. All connected for micro-interactions and prototyping!
PROCESS
Components LIBRARY
Building and maintaining a components library is an ongoing process that never ends (All thoughtful designers know this).
OUtcome
👆🏽 Motion Design
outcome
Carousel
Tab
Input Field
Overlay
Search Field
Indicator
Carousel #2
Prototype (FIGMA)
Pre-Production
✔️ Usability Testing
OBBOARDING
There are multiple onboarding experiences, and the purpose of this test is to identify user impressions. So, I designed a framework focused primarily on user preference, satisfaction, and ease of use. I then collaborated with the team researcher and facilitate a remote testing with target end-users.
Below are the reports…
DEMOGRAPHIC
Total Participants (6)
Avg. age, 19
Sex, Male (4) Female (2)
Country, Australia & United States
TASKS
Which onboarding experience would you use?
Would you prefer a single onboarding experience?
How difficult was it finding login while on the create account screen, vice versa?
How were you able to tell you're on the create account/login screen?
REPORT
Task #1 Which onboarding experience would you use?
4/6
PHONE
1/6
1/6
GMAIL/FACEBOOK/Apple
Task #2 Would you prefer a single oboarding experience?
4 out of 6 Users prefer multiple signup/login options.
“In a lot of apps nowadays I use my phone number or my Gmail account because it’s fast and I hate typing…”
5 out of 6 Users found it easy.
Task #3 How difficult was it finding login while on the create account screen?
Task #4 How were you able to tell you're on the create account/login screen?
