Case Study | Kullufi - A User-Centric Mobile Grocery Experience

Empowering Cybersecurity, National Security, Policing, and Law Enforcement through Technology

Project Overview & App Purpose

Kullufi set out to redefine the grocery shopping experience for a fast-paced, bilingual (Arabic and English) market. The client was looking to create a growing e-commerce platform, one that appeared as an intuitive solution to take customers on a breath-taking journey.

The idea was to give customers a platform to easily browse products and have a streamlined checkout & delivery. The client envisioned a platform that commonly served tech-savvy consumers who value convenience, speed, and visual appeal. They also wanted to go beyond simple transactions, integrating features like recipes, loyalty points, and rewards to encourage repeated purchases and establish customer dependency for continuous usage.

Visual Identity & Branding

To enhance the brand value and create deep
understanding among target customers.

Based on the client’s requirement, the brand’s identity was set to appear as a fresh, modern and energetic vibe. The aim was to create a feeling of health, freshness and reliability.

Logo

The logo is a stylized, minimalist letter 'K'. Its design cleverly resembles a shopping bag handle or a checkmark, subconsciously reinforcing the app's purpose of shopping and successful order completion.

Typography

The font choice prioritizes clarity and modern aesthetics across both languages.

Latin Script: Helvetica. A timeless, neutral, and highly legible sans-serif font that ensures clarity for all English text, from headings to body copy.
Arabic Script: A modern, geometric Arabic font (specified as "أكوبات ال ال عربي" and "أربي," likely a phonetic spelling for a font like Avenir Next LT Arabic or a similar clean typeface). This choice complements Helvetica perfectly, maintaining a consistent modern feel.

Color Palette

The color scheme is simple yet powerful, creating high contrast and excellent readability.

Primary Green (#00C225): A vibrant, fresh green used for all primary call-to-actions (CTAs), highlights, branding elements, and active states. It evokes feelings of freshness, nature, and positivity.
Dark Charcoal (#313131): A sophisticated dark grey used for primary text and some background elements. It's easier on the eyes than pure black and provides a strong contrast against the white and green.
White/Light Grey: Used for backgrounds and cards to create a clean, organized, and spacious layout.

Iconography

The icons are minimalist and line-based, clearly representing their respective categories (Pasta, Dairy, Beverages, Snacks). This universal language allows for quick recognition and effortless navigation.

features

Quick Sign-In & OTP Verification
We implemented secure, OTP-based authentication to make sure users can access the app instantly in emergencies without compromising data protection.
Personalized Alert Contacts
This feature was added so users can predefine trusted individuals or authorities, ensuring alerts are sent to the most relevant recipients when every second matters.
Danger Status Update
We included a one-tap status switch to allow users to immediately indicate a shift from Normal to Danger, reducing alert-triggering time to a single action.
Real-Time Alert Sending & Receiving
We built two-way communication into the app so users can both broadcast distress alerts and receive safety confirmations from their network in real time.
Alert Cancellation Option
This functionality was added to let users stop an active alert once the situation is resolved, preventing false alarms and unnecessary panic.
Audio Recording
We integrated audio capture so users can record voice notes or ambient sounds during emergencies, providing responders with crucial real-world context.
Donation Support
We added a secure donation module to allow users to contribute toward the app’s ongoing development and operational sustainability.
Notification System
This system was developed to keep users informed through instant push notifications whenever alerts are sent, received, or acknowledged.

Key Features & UI/UX Analysis

The client wanted an app design that delivers an intuitive user journey, with key features to boost engagement and make the shopping process simple and easy.

Onboarding & Home Screen

Sign In / Sign Up
A clean and straightforward screen with minimal fields (Name, Email, Phone, Password) to ensure a low-friction registration process.
Home Screen
This is the central hub. It features a clear hierarchy with a top navigation bar for the shopping cart and menu, a prominent search bar, scrolling promotional banners, and easy-to-tap category icons. "Featured Products" are displayed in a card format for quick Browse and adding to the cart.

Product Discovery & Browse

Card-Based Layout
Products are displayed on clean, individual cards, each showing a product image, name, price, and a clear "Add to Cart" button. This is a highly effective and standard pattern for mobile e-commerce.
Categorization
The icon-based categories on the home screen allow users to immediately dive into the section they need, reducing the number of taps required to find items.

Recipe Integration (Key Differentiator)

The app includes a dedicated recipe section. The mockup shows a screen for "Delicious Pasta Recipe" with an ingredient list and preparation steps.
UX Value
This is a powerful engagement tool. It moves the app beyond a simple utility to a source of inspiration. Users can discover new meals and seamlessly add all required ingredients to their cart, likely increasing the average order value.

User Profile & Account Management

The "Me" or profile section is comprehensive, providing access to:

My Loyalty Points: A system to reward repeat customers.
Notifications, Payment Details, Address: Standard but essential account management features.
About Us, Terms & Conditions, FAQs: Provides trust and support.

Loyalty & Rewards Program

The "My Loyalty Points" screen is a standout feature for customer retention.
It clearly displays the total available points (e.g., 1798), which can likely be redeemed for discounts.
A detailed transaction history shows how points were earned (e.g., "From order #1234"), creating a transparent and rewarding experience.

Overall User Journey & Design

Onboarding

User signs up or logs in.

Discovery

Lands on the Home screen, where they can either search for a specific item, browse featured products, or tap a category.

Inspiration

The user might browse the recipe section, find a meal they like, and add the ingredients to their cart.

Selection

Users add multiple items to their cart directly from the product listing pages.

Checkout (Implied)

User proceeds to the cart, reviews their order, and completes the purchase.

Post-Purchase

Users can track their order status (implied) and see the loyalty points they've earned in their profile.

COLOUR PALLETE

TYPOGRAPHY

Helvetica Bold

Helvetica Semi Bold Helvetica Regular

What We Achieved!

We delivered a production-ready design blueprint for Kullufi based on the client’s vision of merging a strong brand identity offering a seamless shopping journey for customers.

The design included value-added features such as a recipe module and loyalty program to increase engagement and support business growth. With seamless bilingual support in Arabic and English, the final solution is tailored for the target market and built for scalability.

Make The Right Choice

Let's work on a project together

Request a quote

Enquire Now

Kullufi App