Revamping UI Design for learning Qur'an App
UI/UX Designer, UX Research
Productivity
2 weeks, 2022
Prompt
Qiroah doesn’t have UI design style guide for mobile development needs.
Frustration
Currently, Qiroah does not have a decent design documentation. As a new designer, my task is to create initial design system in a form of design style guide. It’s a first phase of great design documentation that every team need to have.
Alongside doing that, I decided to do some revamp over basic UI needs in app, such as ListView, button, and Alert/Popup
Currently, Qiroah focuses on iOS development, though for Android we use Flutter. Flutter supports Cuppertino for building iOS-like UI layout style.
Objective
Create initial UI design style guide (currently for iOS)
Revamp some basic UI apps
Feature
Color Palette
Typography
Alert/Popup
Profile Card
Snackbar/Toast
Segmented View
Toggle
Table List View
Button
tabIcons
Final Design
Noticeable Changes
Alert/Popup
Qiroah was using native (iOS) popup for faster development. After consideration and agreement between tech team and product team, we decided to add some ‘branding’ to app by redesigning the popup.
You can see the changes from before to after.
List View in General
The first design use bold text on white background, which will look less appealing and will be uncomfortable for long use. My approach is to go back to native as a guide, with a bit touch of Qiroah’s primary background color I created on Colour Palette. The other reason is to make the layout near to native so it’s easier for developer to build.
You can see the changes from before to after.
Form
The first design was inspired by Material design, though executed poorly. Again, I proposed iOS native design to make it visually familiar and easier to see and use.
You can see the changes from before to after.
