The Grocery Shopping App.

11 Feb 2025
Xirja helps you compare grocery prices across multiple stores, create smart shopping lists, and get the best deals—all in one app. Buy from the cheapest or your preferred store without leaving home!
XIRJA
XIRJA
E-commerce & Grocery Delivery
hero watermark background

Tech Stack

Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo

Services

#Market Research
#Product Strategy
#UX/UI Design
#User Journey Mapping
#Brand Identity Development
#Mobile App Design
#E-commerce Experience Optimization
#Price Comparison System
#Checkout Flow Optimization
#Ongoing Product Support & Enhancements
About project

Client and idea

Xirja is a grocery shopping platform designed to help users find the best prices across multiple stores and streamline their online shopping experience. The platform allows users to build shopping lists, compare prices, and select their preferred store for checkout—all within a single app.

Challenge & Goals

The grocery shopping market is highly fragmented, making it difficult for users to find the best prices across different retailers. Our challenge was to design an intuitive platform that seamlessly integrates multiple stores, offering users a hassle-free way to compare prices, manage shopping lists, and complete purchases efficiently.

Solutions & Result

We conducted extensive user research to understand shopping behaviors and developed a seamless navigation flow. The app features a powerful smart search function, an optimized checkout process, and a clear, engaging UI. As a result, we delivered an intuitive and visually appealing platform that simplifies grocery shopping while saving users time and money.

300
K+
Transactions
10
K+
Active users
900
+
Products listed
Project Overview

Main app features

Xirja simplifies grocery shopping by providing a seamless experience, connecting users with multiple stores, and ensuring fast and convenient deliveries. The platform is designed to be intuitive, efficient, and accessible to all residents of Malta.
Image interface

Smart Search & Filters

Xirja offers a powerful search engine that enables users to quickly find groceries across multiple stores. With advanced filtering options, users can sort products by price, availability, and category, ensuring an efficient shopping experience.

Personalized Recommendations

Xirja analyzes users’ shopping habits and preferences to offer personalized product recommendations. The app suggests frequently bought items, alternative choices, and exclusive store deals to help users save time and money.

Real-Time Order Tracking

Xirja provides real-time tracking, allowing users to monitor their grocery deliveries from store to doorstep. Live status updates and estimated arrival times ensure complete transparency and a worry-free shopping experience.

Seamless Checkout

With Xirja, checkout is quick and hassle-free. Users can securely pay with multiple payment options, including credit cards, Apple Pay, and Google Pay. Automated cart calculations and store-specific pricing ensure a smooth transaction process.

Easily find products with intuitive search and category filters. Enjoy a seamless shopping experience tailored to your needs.

Image interface
Design process

Research

During the research phase, our team conducted an in-depth analysis of the online grocery shopping landscape, evaluating user expectations, competitor solutions, and emerging industry trends. By studying over 20 grocery and e-commerce platforms, we identified key pain points such as inefficient product searches, complicated checkout processes, and limited store options. This research enabled us to design an experience that prioritizes usability, efficiency, and seamless store integration while maintaining a visually appealing and functional interface.
Design process

UX Wireframes

To ensure a smooth and intuitive user experience, we created a detailed sitemap outlining the app’s navigation flow. Using user story mapping, we tested different shopping journeys, from browsing and adding items to the cart to finalizing purchases and tracking orders. This structured approach helped us refine the wireframes, optimize interactions, and eliminate friction points, guaranteeing a hassle-free shopping experience for all users.
Full with interface image
Our team conducted multiple iterative feedback loops to refine the shopping experience—analyzing edge cases, optimizing navigation flows, and simplifying the checkout process. Each iteration was tested extensively, both internally and with potential users, to ensure seamless grocery selection, cart management, and payment processing. By continuously improving wireframes based on real-world feedback, we crafted an intuitive and efficient shopping journey that aligns with user expectations and eliminates unnecessary friction.
UI ImageUX Image
Design process

UI Design

Our design approach focused on creating a clean, modern, and intuitive interface that enhances usability while maintaining a visually engaging experience. We selected a color palette inspired by natural, warm tones—earthy yellows and rich browns—to evoke a sense of trust, reliability, and simplicity. These colors not only reflect the brand’s identity but also contribute to a seamless and comfortable shopping experience.

Design Concept

Based on user personas and behavioral insights, we designed an interface that prioritizes ease of navigation and product discovery. The use of soft transitions, minimalist icons, and well-structured layouts ensures that users can browse, add items to their cart, and complete their orders effortlessly. Interactive elements, such as animated micro-interactions and subtle motion effects, further enhance engagement while keeping the experience smooth and enjoyable.

Slider mockups image 0
Slider mockups image 1
Slider mockups image 2
Slider mockups image 3
Slider mockups image 4
Slider mockups image 5
Slider mockups image 6
Slider mockups image 7
Slider mockups image 8
Slider mockups image 9
Slider mockups image 0
Slider mockups image 1
Slider mockups image 2
Slider mockups image 3
Slider mockups image 4
Slider mockups image 5
Slider mockups image 6
Slider mockups image 7
Slider mockups image 8
Slider mockups image 9
Slider mockups image 0
Slider mockups image 1
Slider mockups image 2
Slider mockups image 3
Slider mockups image 4
Slider mockups image 5
Slider mockups image 6
Slider mockups image 7
Slider mockups image 8
Slider mockups image 9
Branding

Typography

For Xirja, we selected the Gilroy typeface, a modern and versatile sans-serif font that balances readability with a contemporary aesthetic. Its clean lines and well-spaced characters ensure a seamless reading experience across various devices, from mobile screens to desktop interfaces. By utilizing different font weights strategically, we highlight essential details—such as product names, prices, and checkout steps—without creating visual clutter. This choice strengthens Xirja’s brand identity, reinforcing its commitment to clarity, efficiency, and user-friendly navigation.
Gilroy
RegularMediumSemiboldBold
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
010203040506070809
Branding

Colors

For Xirja, we chose a color palette that embodies trust, efficiency, and accessibility. Black serves as a bold and authoritative foundation, ensuring clarity and contrast throughout the interface. Yellow adds vibrancy and energy, making key actions and interactive elements stand out. Light Yellow complements the palette by introducing warmth and approachability, ensuring a welcoming experience for users. This well-balanced combination not only enhances visual appeal but also strengthens brand identity, creating a dynamic yet intuitive interface that supports seamless navigation and engagement.
#030303
Black
#FCB324
Yellow
#FFDD99
Light Yellow
Consistency

Design System

To maintain a seamless and recognizable experience across all touchpoints, we developed a structured design system for Xirja. By leveraging the Gilroy typeface and a well-balanced color palette of Black, Yellow, and Light Yellow, we ensured clarity, accessibility, and brand coherence. Every UI component—from buttons to interactive elements—was carefully designed for consistency, reinforcing trust and ease of use. This unified approach enhances user engagement while delivering a visually compelling and intuitive shopping experience.
Full with interface image

Conclusion

Xirja revolutionizes the grocery shopping experience by offering a seamless, efficient, and user-friendly platform. With smart search, real-time tracking, and a streamlined checkout process, users can shop from their preferred stores with ease. Our team’s research-driven approach and intuitive design ensure that every interaction is smooth, responsive, and tailored to customer needs, making grocery shopping more accessible and hassle-free.