Trolley operates in a category built around speed and convenience. Customers rarely approach a grocery brand wanting to spend time understanding how it works, they want to know what is available, where they can find it, whether the service reaches them and what is new.
That creates a particular challenge for the digital experience. The website needs to communicate a large amount of practical information without feeling like a catalogue, directory or corporate portal. At the same time, it needs enough personality to reflect a modern grocery brand competing for attention in a fast-moving Kuwaiti retail market.
We worked on Trolley’s digital experience to translate the energy of the brand into a trendy, engaging and responsive website that makes products, stores, delivery services and brand content simple to explore. Rather than treating these areas as disconnected pages, we designed them as parts of one discovery experience, combining clear navigation, strong visual merchandising, playful interaction and a reusable design system.
The mandate was clear:
Make products and categories easy and enjoyable to discover
Help customers quickly understand where Trolley operates and which services are available
Translate Trolley’s energetic retail identity into a distinctive digital experience
Create a responsive system that stays coherent across desktop, tablet and mobile
Give the brand a flexible foundation for evolving products, locations, campaigns and content
Challenges
Turning practical grocery information into an experience people want to explore. Four connected challenges shaped the experience, and one experience challenge sat above them all: make everyday grocery information feel effortless without making the brand feel ordinary.
Methodology
We approached Trolley as both a content-discovery experience and a digital expression of the brand. The goal was not to add complexity or introduce unnecessary features. It was to organize the information customers already needed and make discovering it feel considerably more engaging.
Clarity defined the structure. Brand energy defined how that structure came to life. Our design process moved through six connected phases:
Empathize
Define
Ideate the Solution
Prototype
Design Validation
Design Brought to Life
Understand the Customer Context
Grocery browsing is different from many digital journeys. Customers may arrive looking for something specific, casually exploring products, checking what is new, searching for a nearby branch or simply trying to understand whether Trolley serves their area.
That means the homepage cannot rely on one linear journey. Instead, it needs to provide multiple clear starting points without making the interface feel fragmented.
We framed the experience around the questions a customer is most likely to arrive with: What can I find? What’s new? Where can I find Trolley? Is the service available to me? Answering those questions became the foundation of the information architecture.
About the Discovery
The early experience exploration focused on the full digital discovery journey:
Product and category discovery
Promotion and new-product visibility
Store and location discovery
Delivery and service-area information
Navigation between brand and functional content
Responsive behaviour across desktop, tablet and mobile
Translating Trolley’s existing personality into digital interaction
Establishing reusable components for future content and campaigns
Rather than adding more information, the priority became making existing information easier to see, understand and explore.
Define
The experience challenge converged around one key insight: grocery websites are naturally information-heavy. Trolley needed to feel information-rich without feeling crowded.
This changed how we approached both UX and visual design.
Experience Audiences
Ideate the Solution
We structured the website around a small number of clear discovery paths rather than forcing every visitor through the same hierarchy. The homepage acts as a flexible starting point from which customers can move naturally toward products, what’s new, locations, service areas and the Trolley story. This made the website useful for both purposeful and exploratory visits.
Information Architecture & User Flows
The discovery journey: land, choose, explore, discover. A visually distinctive homepage communicates the Trolley experience immediately; customers then move toward products, locations, services or brand information.
The discovery paths: Products → Categories → Product discovery. What’s New → Featured products → Campaign content. Locations → Store information → Relevant services. Service Areas → Coverage information → Next action. About Trolley → Brand story → Explore products or locations.
Strong imagery, concise content and clear hierarchy support browsing, and products, campaigns and locations become easy to move between.
Every path ends in the same place: continue exploring the Trolley ecosystem. Whether a customer arrives to check a branch, look for a product or simply see what is new, the next step is always visible and never forces them back through the same hierarchy.
One website, multiple discovery paths. Different intents, one coherent experience.
Wireframes
Wireframes established the page hierarchy before the visual personality was introduced. The focus was on creating repeatable structures for hero areas, product and category sections, featured-product modules, promotional content, store and location information, service-area content, navigation, calls to action and supporting brand content.
Working at this level allowed us to establish where information belonged and how customers should move between sections before introducing more expressive visual treatments. It also made responsive behaviour part of the architecture from the start rather than an adaptation at the end.
Prototype
The interface was then developed into higher-fidelity experiences where typography, imagery, interaction and motion could be evaluated together. The prototype allowed us to understand something static screens alone could not show: how energetic could the website become before that energy started competing with usability?
Motion was therefore used selectively. Elements could respond, transition or animate to create rhythm and reinforce the youthful personality of the brand, while navigation, product information and calls to action remained predictable. The result was an experience that feels alive without making customers work harder.
Design Validation
Key screens and responsive states were reviewed as connected journeys rather than individual compositions. Validation focused on:
Clarity of main navigation
Visibility of products and important content
Ease of accessing locations and service information
Content hierarchy across different screen sizes
Behaviour of cards, navigation and imagery responsively
Readability and accessibility of text over visually rich layouts
Consistency of interactions and components
Motion supporting rather than distracting from content
Responsive refinement ensured the expressive desktop compositions could translate into smaller screens without simply shrinking the same layout.
The visual language adapts. The hierarchy stays familiar.
Design Brought to Life
The final Trolley experience combines bold product imagery, playful layouts, contemporary typography, generous whitespace and purposeful motion into a responsive digital environment.
Six principles shaped the final website:
Final UI Design: Key screens
Takeaway
The Trolley project was not about making grocery shopping more complicated or turning an informational website into a feature-heavy platform. It was about making everyday information easier to discover and considerably more engaging to experience.
By combining straightforward UX with expressive visual design, responsive behaviour, motion and a reusable design system, Mindflares transformed products, locations, delivery information and brand content into one coherent digital experience. The result is a website that feels as convenient as the service it represents, simple when customers need answers, engaging when they want to explore, and unmistakably Trolley throughout.
The project was delivered in partnership with Media Market.
Director, Digital Business Channels at Mobily, Saudi Arabia
''A highly professional and reliable team. Through their strong understanding of our business and user needs, Mindflares delivered a high-quality bilingual UI/UX revamp and scalable Design Language System. Their expertise and close collaboration improved usability, consistency, accessibility, and development efficiency across Mobily Business.''
Kassem Baalbaki
Chief Information Officer at SMC Healthcare, Saudi Arabia
''Working with Mindflares has been a professional and collaborative experience. Their team demonstrated a good understanding of our objectives and provided valuable insights to support the continued enhancement of our digital patient experience. Overall, it was a smooth project and timeline was fully respected”
Carole Alsharabati
Founding Partner of Siren Analytics and Siren Associates
"Mindflares is one of those companies that makes magic happen for your products. It starts with a three-word request and ends up with a solidly grounded UX/UI design that conquers and charms the users. Their agility, commitment, and creativity are impressive. They are the kind of partner you need to ace your objectives and succeed in your business."
Wissam Youssef
Co-Founder and General Manager of CME Offshore
"Partnering with Mindflares has been an inspiring and fruitful journey and still is. Mindflares’ approach to business combines high ethics, transparency, and communication skills which were keys to our success."
