MAFA – Arts & Films App

A complete mobile solution for managing production, content, and user-admin workflows.

01. Overview

MAFA (Mokhani Arts & Films App) is a full-featured mobile application designed for an Arts & Film production brand, delivering a premium digital experience for both audiences and internal operations. The app supports end-to-end user flows, admin management, light/dark themes, and full Play Store-ready compliance screens.

This project demonstrates my ability to independently design a complete product ecosystem and collaborate continuously with developers to ensure feasibility, scalability, and accurate implementation.

✅ Purpose of the App

The purpose of the MAFA app is to:

• Build a digital presence for Mokhani Arts & Films

• Provide users with a smooth, cinematic browsing experience

• Enable structured user and admin management

• Support content & production-related app workflows digitally

• Ensure the app is ready for Play Store launch with required screens and policies

🧠 Design Process (Design Thinking)

🔍 1) Empathize

• Understanding how users interact with production/film apps

• Identifying common user expectations: simple UI, fast access, premium feel

🧩 2) Define

• Defined the core challenge:
  Designing a full app with multiple flows (user + admin) while keeping it clean and scalable.

💡 3) Ideate

• Structured features into modules

• Planned navigation flow

• Designed light + dark theme variations

✍️ 4) Prototype

• Built interaction-ready flows

• Designed component structure for developer handoff

✅ 5) Test

• UI checks for usability, readability, and consistency

• Edge cases + error states were included

02. Problems Identified

While designing MAFA, the key problems were:

❌ 1) Complex product scope

A production/film app includes multiple sections and screens — risk of becoming cluttered.

❌ 2) User + Admin management

Both user workflows and admin workflows must be supported without confusion.

❌ 3) Theme compatibility

Maintaining the same brand identity across light and dark themes with proper contrast.

❌ 4) Play Store compliance

App required:

• onboarding

• permissions

• privacy policy

• terms & conditions

• data-handling pages
  This needed to be integrated smoothly.

❌ 5) Developer feasibility

Some UI trends look good but are hard to implement.
The design needed to be beautiful but also realistic.

✅ Solution

To solve these problems, I designed MAFA as a complete scalable system, not just screens.

✔️ Clear Modular Structure

I divided the app into easy modules:

• User side screens

• Admin side screens

• Management screens

• Settings + compliance

✔️ Strong Visual Hierarchy

• Structured cards, sections, and spacing

• Clear primary CTA on every screen

• Reduced cognitive overload

✔️ Light + Dark Themes (Full System)

Both themes were designed with:

• consistent design tokens

• proper contrast & readability

• same hierarchy and branding

✔️ Play Store-Ready Flow

Included all required screens:

• onboarding steps

• permissions

• privacy policy and terms

• account & data related pages

✔️ Developer Collaboration

I collaborated continuously with developers for:

• feasibility checks

• spacing accuracy

• interaction logic

• faster UI implementation without confusion

03. Quantitative Research

Key Findings:

📌 Users expect:

• easy navigation

• premium UI

• quick access to content/services
  📌 Admin users need:

• fast actions

• clear control buttons

• manageable dashboard UI

Goals:

• reduce steps to reach content

• reduce confusion in navigation

• keep UI consistent across screens

• make it scalable for future updates

04. Competitive Analysis

To identify the best design approach, I observed patterns from apps like:

• OTT / Film / Creative apps

• Portfolio / Production platforms

• Admin-managed content apps

What I learned:

✅ Premium apps use:

• minimal UI

• cinematic visuals

• clean typography

• simple navigation

✅ Best apps reduce clutter by:

• cards + sectioning

• consistent CTA placement

• limited actions per screen

✅ Admin apps succeed when:

• dashboards are simple

• tasks are grouped logically

• data is easy to scan

05. User Personas

MAFA has multiple user types, so personas are important.

👤 Persona 1: Audience / Viewer

Goal: Explore films, updates, content easily
Pain Point: Doesn’t like complex UI
Needs: simple interface, good visuals, quick access

👨‍💼 Persona 2: Admin / Internal Team

Goal: Manage users and content efficiently
Pain Point: Too many manual tasks
Needs: structured dashboard, quick controls, easy monitoring

06. Empathy Map (User Perspective)

07. User Journey Map

Journey:

1. Download app

2. Onboarding screens

3. Sign up / login

4. Home → explore content

5. View content details

6. Notifications updates

7. Profile and settings

8. Admin controls (for admin users)

08. User Flow (Flowchart Style)

User Flow:

Splash → Onboarding → Login → Home → Sections → Details → Actions → Profile

Admin Flow:

Admin login → Dashboard → User management → Content approvals → Control actions → Reports/settings

09. Wireframes

I created wireframes before final UI to:

• establish layout structure

• finalize hierarchy

• validate navigation consistency

Wireframes included:

• user side

• admin side

• edge cases

• Play Store requirements pages

10. Typography & Colors

MAFA follows modern UI standards and premium style.

Typography System:

• Title hierarchy: H1 / H2 / H3

• Body text: Regular + medium

• Caption: helper text and small labels

Color System:

Light Theme

• clean background

• strong CTA color

• neutral text shades

Dark Theme

• deep background

• high contrast text

• glow/soft highlights for premium feel

11. Usability Testing

I validated MAFA UI using design checks like:

✅ Tested Factors:

• navigation clarity

• CTA visibility

• readability in both themes

• admin workflow efficiency

• spacing + alignment consistency

• screen-to-screen flow continuity

Improvements after testing:

• improved spacing in complex screens

• reduced extra elements where needed

• made CTA positioning consistent everywhere

• ensured dark theme contrast passes readability

12. Key Screens Designed (End-to-End)

✅ Splash / Launch
✅ Onboarding (Play Store ready)
✅ Login / Signup
✅ Home dashboard
✅ Detail pages
✅ User profile
✅ Settings
✅ Notifications
✅ Help / Support
✅ Terms & Policy
✅ Privacy policy
✅ Data permissions screens
✅ 404 & Empty states

Admin Side:

✅ Admin login
✅ Admin dashboard
✅ User management
✅ Content management
✅ Approval / status screens
✅ Admin settings controls

13. Tools & Workflow Innovation

To maintain speed and quality, I continuously adopted advanced tools and design technologies.

Tools Used:

• Figma (UI + prototyping)

• Component-based design system

• Design tokens

• Auto-layout for scalability

• Version control for iterations

Benefits:

✅ Faster workflow
✅ Scalable design
✅ Easy dev handoff
✅ Modern UI consistency
✅ High-quality screen output

Conclusion

MAFA is a complete end-to-end product where I independently designed:

✅ Full mobile app UI (Light + Dark themes)
✅ User + Admin management workflows
✅ All required Play Store compliant screens
✅ Complete end-to-end screens + edge cases
✅ Continuous developer collaboration for accurate implementation
✅ Modern scalable UI using advanced tools & design technologies

This project highlights my ability to design full-scale apps independently with professional standards, scalability, and clean user experience.