Case Study: Damai App
The case study unveils the design process for Damai, the mobile app helping users to manage their qadha prayer. Check UI and UX design solutions, app screens, user scenarios, and interactions.
Overview
Damai is a new way to monitor qadha prayer especially for Muslim users. With Damai, users can see prayer times, manage their prayer and fasting qadha, view weather information, and look onto their prayer insight. This project is actually initiated by one of my best friend, **Amir Farhan.** He is Android Developer and also the one who will develop this app entirely.
The Problem
As a Muslim, there’s a time we may miss our prayers due to some reasons, and its our job to ‘qadha’ what we have missed.
‘Qadha’, is refers as to fulfilling or completing those duties that one may have missed due to some reason or other.
The Goal
Developing an app for muslim people to keep monitor and manage their qadha duties not only for prayers, but also for fasting.
Tools
- Figma
- Notion
- Macbook Pro 2015
Process
My process will be different for each projects depending on many factors such as the project goals, business needs, complexity of the problem, time and etc. Here I’ll describe my process for designing this app.
1. Discovery
Understanding the core of the product
Before doing any ideation I started to gather the requirements and list out all possible core features of the product.
Core product features
- Prayer Time by user location
- Managing daily prayer
- View, add, and edit qadha list
- Weather information
- Push notification when prayer time, and to remind the user to qadha their prayer
Analyzing similar app
Analyzing the existing similar app design and puts together in moodboard for future reference. I’ve also downloads some of the apps to know what are the pain points and strength of the apps.
Features Prioritization
Prioritization of the features ensure that we can focus to deliver the most important features first. From the features, I have list out all possible screens that i have to design and categorized them to Must have, Good to have, and Not required
2. Ideation
Sketching and Wireframes
We had a list of screens to cover all features so I started to sketching the designs to detail out the flows to discuss and share with developer to get feedback.
I know its not the best sketches ever, but with this I can see the rough idea of the app already.
After discuss with developer, I get started with the wireframes. I created this set of low-fidelity wireframes of all of the key screens needed
Design Review
We do design review often during this ideation phase as I’m the type who want to get the feedback fast. With built-in comment feature combined with the pencil tool, doing the design review directly in Figma is a lot easier. I categories each screens whether it is APPROVED , need to REDESIGN , or have to TRASH the screens before moving to mid-fidelity wireframes.
Mid-Fidelity Wireframes
By now I have already gathered enough information to get started with the mid-fidelity wireframes. Creating mid-fidelity wireframes will also have a few design reviews and iterations as well. This is the final mid-fidelity wireframes that i have created.
3. Visual Design
After working the changes into the wireframes, it was time to proceed with the visual design. At first, I create a light theme design but after discuss with developer, we have agreed to use dark theme for Damai app.
Design System
Damai is not a big project, and not much ui screens too. So, the design system that i created is only covers the style guide, components, and icons. The design system act as single source of truth and it is important especially for a non-designer to easily look on to the design components and assets. By establishing the design system, the developer hand-off process would be much easier as well.
Style Guide
This is a style guide for Damai mobile application. This style guide only contains colors and typography.
Components
Components consist of UI elements such as cards, item list, form inputs, charts, and buttons with each of them has different states for different scenarios.
Icons
I’m mostly using Google’s Material Icons in Damai for basic usage. For a more specific usage, like showing different prayers, i created our own custom icons.
Damai Logo
With inspiration from Arabic alphabets, I created Damai logo. The process is start with sketching, turn the sketch into vector, and finalize the logo design.
Final Logo
By adding some effects(combination of Inner Shadows and Drop Shadows), i make the logo to be more stands out
This is how the logo is animated in splash screen
Final Design
After a few more iterations, I designed the final screens with Figma. I conducted prototype validation during the process to determine the best user experiences of the app.
My aim was a clean, modern look that helps users fulfill their goals quickly. Also helps a new user especially a non-tech user to pickup the interface easily.
Developer Hand-off
The next step would be to hand-off the final prototype screens and other assets to developer. Figma has a very powerful developer hand-off tool built-in, so we don’t need to use third party tools like Zeplin to do the developer hand-off.
Inviting developer to Files and Prototype
In Figma, we can invite collaborators to a Prototype, or to the File itself. Inviting developer as a Viewer is enough because we don’t want them to mess up our design works 😝
Viewer can:
✅ Select layers from the Layers Panel or Canvas
✅ View properties of selected Layers in the Code panel
✅ Copy text content from Text objects
✅ Measure distances between object in the Canvas
✅ Add or reply to Comments in Files and Prototypes
✅ View Prototypes in Presentation View
✅ Access Components via the Go to Main Component link
Keeping files organized
As developers get access to design files, which are filled with dozens of in-progress frames, iterations, components, and more, it’s good practice to communicate which parts of the files are ready for implementation and which are still being worked on.
Here’s my way of organizing pages in Figma
Code panel
The Code panel allows Viewer to see how to express objects in code. This will help developer to see the selected objects properties in following formats:
1️⃣ CSS (CSS only, no HTML)
2️⃣ iOS (Swift)
3️⃣ Android (XML)
Whenever viewer is in Code panel, they can easily measure the distances between object in the Canvas. The red lines with the distances will be displayed when you hovered on it. This make developer easier to refer on the measurement of the components.
Wrapping Up
Creating a design for mobile app is fun and challenging project. Through ideation process, I was able to validate Damai’s core features and also discover what most people want to have in managing their qadha.
I’m happy with the end result which help me improved not only my UI design skills, but also my UX research skills.
Next steps
Although this project concluded with a solid prototype, I would still like to continue testing and improving the design. The app itself is still in the development, and I always there to support the developer with the testing.
Once Damai is launched, i hope everyone can support us!
