An events and social app
Muslimeen is an events and social app for the Muslim community, where users can discover the events they love and connect with other users like themselves along the way.
Role
UX UI Designer
Duration
10 Weeks
Tools
Figma, InVision, Adobe Photoshop, Adobe Illustrator
The Design Process
The Problem Space
User Interviews & Insights
DISCOVER
Persona
Experience Map
The Task Flow
DEFINE
Sketches
Mid Fidelity Wireframes
User Testing
Visual Identity
UI Library
DEVELOP
Hi Fidelity Design
Marketing Website
Multi-platform Design
DELIVER
DISCOVER
The Problem Space
With Islam as the fasted growing religion in the world, reports suggest that a common problem new Muslims face are feelings of isolation and neglect along with a lack of support network. Accounts also illustrate that along with these feelings of isolation and neglect some converts may struggle for long periods of time in order to find a comfortable space as an integral part of their new Muslim community (Lahmar, 2018). This lack of support can have a negative effect on new Muslims practising their faith and in building strong practices.
As the Muslim community continues to grow in number, the number of those embracing the faith is expected to grow too. But despite this, why are new Muslims finding it difficult to feel a part of the Muslim community?
User Interviews & Insights
The purpose of the research was to discover the obstacles that newly-practising Muslims may face in connecting to the Muslim community. I hoped to learn what specifically stops a newly practising Muslim from integrating, and whether this has an effect on their faith and practices.
Hopefully, this will lead to finding a solution of how we can reconnect them to their community to battle these feelings of isolation, and to strengthen their faith and practices.
Five Interviews,
Two Themes
After interviewing five Muslim converts to learn about their experiences, and grouping their answers into pain-points, behaviours and motivations through Affinity Mapping, I discovered two main themes:
Theme #1: Companionship & Community
Pain-points
“I know so many people that feel lonely, there’s no community.”
“I wasn’t around any practising Muslims.”
“Only had one muslim friend at the time”
“Social circles affect a lot, very much so. Ive seen people come from the road, become muslim, remain freinds with old friends and then relapse into their old ways.”
“I feel like a lot of reverts are lonely... they might go to the mosque and be around all these people and then go home and just feel alienated.
Motivations
& Goals
“Being around the right person matters. Nothing like brotherhood or sisterhood. You cant get this anywhere else.”
“Creating good circles allows them to love the religion more.”
“Being around the right community strengthens your faith”
“Friends have a big impact. Sometimes you can have friends if you need advice on a specific issue, you can go to them for help.”
“Taking that person out to eat, socialise. Build the Ummah (community), have dinners, go to the masjid together, grab food. Stay in consistent contact.”
Behaviours
“Seeing how Muslims operate in real life shows you things and teaches you, how they work or study, how they are with their family.”
Embraced Islam due to friends, someone they met or an encounter they had.
Theme #2: Knowledge & Learning
Pain-points
“Learning was very hard and I had no direction - I lost interest in the religion at one time because I didn’t understand. I didn’t know how or what to learn.”
“you have a zeal to learn everything - this can topple you over. If you do something all at once, you can crash.”
“for some reverts it is difficult because there’s so much you have to learn, people telling you different things”
Motivations
& Goals
“Attend islamic classes/lessons.”
“Teachers that studied under the scholars and give it to you in a digestible way.”
“They should do new-muslim classes to teach them about their religion from the basics.”
“Make sure you’re constantly learning things, learn the foundations. Dont get into twitter and refutations. Treat your parents and family well.”
“having streams of knowledge available to you are both most important.”
Behaviours
“My maths tutor’s son would teach me in the local mosque during lockdown 3 times a week - how to read arabic/the quran.”
“I try to attend Islamic lectures and classes whenever I can.”
Companionship & Community
Narrowing Down the Theme:
Insight:
New Muslims need a way to connect to other Muslims to help strengthen their faith and religious practices.
Why?
There was an emphasis on this theme throughout the conversations I had during the interviews. Companionship was important to new Muslims for learning, taking good examples, having support, feeling welcome, someone to seek advice and assistance from, etc. It combines the best of both identified themes. A new Muslim can find out what they didn’t know before from other Muslims.
How might we connect new Muslims to other Muslims in their community to strengthen their faith and religious practices?
DEFINE
Meet Ibrahim, the target user. The pain-points, motivations, behaviours and insight from our selected theme (of Companionship & Community) came together to create our persona, Ibrahim, who will represent our target users.
Persona
The Experience Map
The experience map allows us to empathise with our target user, Ibrahim. What’s his current journey like? What means are there to help him solve any problems of not being able to connect with the Muslim community? Is he even able to reach this objective as is? This map helped to see where we can place a design intervention to help Ibrahim connect with the Muslim community.
What can be done?
Users should be presented with a range of events and gatherings in one place rather than having to scroll down an endless feed to find something which may not be nearby.
Discover Events
Users should be able to connect to others like themselves, such as those attending the same event or those in their locality, to establish familiarity and a sense of belonging. That way, when they attend an event, they' will know familiar faces
Connect
Users should be able to engage with their community, by being able to have access to a range of event types and access to a wide range of other Muslims in the community.
Engage
The Task Flow
After writing a range of user stories in accordance to the persona and the experience map, they were grouped into the following epics:
Epic #1: Find and connect to other Muslim users
Epic #2: Explore and discover Islamic events
Epic #3: Encourage personal and spiritual development
Epic #4: Finding answers to questions and queries
Epic #1: Find and connect to other Muslims
Chosen Epic
As a New Muslim I want to be able to talk to other Muslims like myself so that I can socialise and make new friends.
Key User Story
Connect to someone interested in the same event.
The Task
DEVELOP
Sketches to Mid Fidelity Wireframes
After exploring several ideas and iterations, the following final screens were produced as sketches for the task flow. This helped to narrow down design ideas after getting everything out on paper. Some minor adjustments were made while working into mid-fidelity design when the structure and content became a lot more clear on screen.
Home:
Here the user is able to browse popular events, as well as view a feed of what those in their locality are talking about.
Discover:
Here the user is able to explore and filter through events they like. Cards include the useful information they would need at this stage when choosing an event, such as: event type, speaker, location, date, time and distance from current location.
Event Details:
Event details can be seen in more detail here with an added description of the event. A clear CTA can be used to mark yourself as attending an event to let other users know.
Who’s Going?
This tab, found on the events detail page, shows a list of other users who are attending the same event. You can click on one to view their profile before connecting.
Profile:
This screen shows basic profile information, as well as events a specific user is attending and has attended in the past. A gamification element has also been added where users can amass points by attending events - this gives a kind of social credibility and encouragement to continue using the app. A clear CTA is also used to connect to a user.
Chat:
The Chat screen is available with a series of pre-written prompts as conversation starters, including an ice-breaker button. The ice-breaker generates a random question to begin a conversation.
User Testing
Two rounds of user testing was completed in total, and so the prototype went through multiple phases of iterations before going into high-fidelity design. Usability tests with 5 users per round took place in order to obtain practical, real-time feedback that can be incorporated to improve the design, in order to provide a more optimal user experience. Usability issues per round were mapped in accordance to the effort required to fix along with its impact on the design’s usability. The screens below show the main iterations from the original to the final prototype (after second round of revisions)
Scenario:
Persona: Returning User (New Muslim - Ibrahim Johnson)
User is already signed in on the app and has an account.
User wants to connect to someone new before going to an event.
Goal:
To see what events are happening around him.
To connect with someone who’s also going to the same event.
Visual Identity
A mood-board was generated from keywords which were relevant to the needs and feelings of the target user. Images were then narrowed down and selected to bring together a more concise theme suitable for the brand and to extract key colours.
The red that was extracted was adjusted to become more vibrant and closer to an orange hue rather than a deeper red. This helped to combine feelings of friendliness with energy and enthusiasm, as opposed to a bold red which would have otherwise symbolised passion and love or prestige. The colour palette was kept minimal to suit the brand’s mood.
The Wordmark and Icon
The name Muslimeen is the plural of Muslim in Arabic. And so it quite literally means a group of Muslims, which is perfect for a social and events app.
The wordmark is created from Circular Std with its kerning adjusted to bring letters closer together. The tops of the letters were also tweaked to break up the stillness and portray some movement. The icon is a monogram logo of the letter ‘m’ utilising the tittle from the ‘i’ to create a figure in the middle of the circle.
App Icon
UI Library
Different elements of the UI had been compiled into a UI library and organised into atoms, molecules, organisms, templates and pages. This would make it easier to reuse components and other elements more consistently when designing the rest of the app in its entirety, and would make it easier for other designers to take over if handed off.
DELIVER
High Fidelity Design
Marketing Site
Design Impact & Future Thinking
The future of Muslimeen:
Muslimeen is hoped to have a positive influence in building a cohesive Muslim community, where an individual can go to any event and feel welcome, finding familiar faces they have been acquainted with before. Feeling like a stranger is a thing of the past, organisations and speakers once unknown are now accessible, and events are becoming busier due to their exposure on the platform.
Key learnings:
I learnt that speaking to Muslim converts was so much more than just an interview, they saw it as a chance to be heard and an opportunity to talk about their struggles as I listened, one of them even holding back tears as he relayed his experiences. Through research, I found that there is so much more to learn about people than facts and figures, or what they say vs. what they actually do, and seeing their behaviour and emotions manifest itself to really delve into their problems in order to explore possible solutions - solutions that would make their lives easier.
Next Steps:
Other than developing other pages of Muslimeen, I want to explore other stages and methods of research and design in the UX design process. I want to learn what people think about the final high-fidelity designs and explore solutions to problems I didn’t have time to solve at this stage, such as: are there any privacy issues with Muslimeen? What if I don’t want others to see which events I am attending or have attended? How can I make the profile screens more personal and exciting to reflect my personality (as a user)? How can I benefit from a business point of view with this platform? And so much more.
You made it to the end.